7 replies to this topic

[lonebyrd]

I want to make a drop down menu and I thought I could do it with PHP. I only know HTML and some CSS and have been working on learning PHP. Is there a good place to find examples without having to search through every page? I'm tired of going to sites only to have to search forever and not even find anything. I know W3School is a good site but I don't see anything about drop down menus. So what I am really looking for is a good place with lots of examples of a variety of scripts.

[pasten]

Drop downs are something which happens in the visitor's browser. And PHP is used for dynamic page generation which actually happens in the website's server. You can't make drop downs using PHP (appearance not content wise, but that too using either CSS/Javascript). But there's something to cheer up for you. You can create very nice drop down using CSS only. As for the examples, you can find dozens of menu's at CSS Play.

[Veradesigns]

There are many ways to make drop down menu,
you can use adobe flash to make a abnormal flash menu or java script my personal because they come ready. This is the link for you to get a few
http://javascript-ar...drop_down_menu/

[lonebyrd]

can java just be added to a regular HTML page or is there something special I need to do? I nothing of java script. From the page you directed me to Veradesigns, it looks like all HTML. But I have to use CSS also. It looked a little confusing at first, I need to take a better look at it. It has been over a year since I did any programming and I wasn't that great to begin with

[lonebyrd]

Veradesigns, on Feb 3 2009, 01:25 PM, said:

There are many ways to make drop down menu,
you can use adobe flash to make a abnormal flash menu or java script my personal because they come ready. This is the link for you to get a few
http://javascript-ar...drop_down_menu/

I have to make a separate CSS style sheet to do this right? I understand that the first part goes in the body, but the CSS I am still a little confused about.

[galexcd]

lonebyrd, on Feb 3 2009, 10:54 AM, said:

can java just be added to a regular HTML page or is there something special I need to do? I nothing of java script.

First of all make sure you don't confuse java with javascript. They are completely different languages and any website that uses java for navigational links will certainly lose me as a visitor. Javascript allows the browser to modify the webpage in ways HTML and CSS cannot. You might want to read the first few pages of this webpage to get a general overview of javascript.

lonebyrd, on Feb 3 2009, 04:00 PM, said:

I have to make a separate CSS style sheet to do this right? I understand that the first part goes in the body, but the CSS I am still a little confused about.

The link Veradesigns provided is very useful, but I don't think it will help you learn how to make one in the future too well. The best way of learning something is to do it yourself, and I'd like to help you do that.

You said you already know HTML and CSS so you should be able to start out with this yourself:
1. Create your nav bar with the links that are going to call the drop down menus.
2. Create a few absolute-positioned div layers positioned under each of the links and fill them with the sub-menu items of your choice.
3. Give all those div layers their own unique ID using the ID attribute.
4. Set the style of all these div layers to be hidden, so they are not visible until you want them to be.

Now, after you do this you have a choice of which direction you want to go it. You can use CSS for basic drop-down menus, or if you decide to use javascript you can have a bit more control over these drop-down menus.(such as adding animation or fade in/out).

If you choose to use CSS add an class attribute to each of the links and use the :hover property to have the div layers to be visible.
For example:

<a href="#" class="stuff1">Stuff</a>
<div id="div1">Stuff1<br>Stuff2<br>Stuff3</div>
 ---- And in your head or another file:----
<style type="text/css">
.div1{display:none}
.stuff1:hover .div1{display:block;}
</style>

Now if you choose to use javascript you can use functions to show or hide the div layers using onMouseOver and onMouseOut:

<a href="#" onMouseOver="show()" onMouseOut="hide()">Stuff</a>
<div id="div1">Stuff1<br>Stuff2<br>Stuff3</div>
 ---- And in your head or another file:----
<script type="text/javascript">
function show(){
document.getElementById("div1").style.display="block";
}
function hide(){
document.getElementById("div1").style.display="none";
}
</script>

Now if you do decide to go with javascript and you are going to have multiple drop down menus you probably want to pass something to the function so javascript knows which submenu to display like this:

<a href="#" onMouseOver="show(1)" onMouseOut="hide(1)">Stuff</a> <a href="#" onMouseOver="show(2)" onMouseOut="hide(2)">Other</a>
<div id="div1">Stuff1<br>Stuff2<br>Stuff3</div><div id="div2">Other1<br>Other2<br>Other3</div>
 ---- And in your head or another file:----
<script type="text/javascript">
function show(i){
document.getElementById("div"+i).style.display="block";
}
function hide(i){
document.getElementById("div"+i).style.display="none";
}
</script>

Let me know if you have any questions or want me to explain something in greater detail.

[jlhaslip]

Of course, you could head over to http://cssplay.co.uk for grab a CSS version of Standard Compliant Drop Downs.

[iGuest]

Need drop down menuDrop Down Menu Help Please

The html file is :

<div id="header">  <div class="logo">NorthStar-EHS<br /><div class="sub">Environment Solutions</div></div>  <div class="menu">   <ul> <li><a href="#"><div class="links">About Us</div></a></li>    <li><a href="#"><div class="links">Services</div></a></li>    <li><a href="#"><div class="links">Products</div></a></li>    <li><a href="#"><div class="links">Enquiry</div></a></li>    <li><a href="#"><div class="links">Contact Us</div></a></li>   </ul>  </div></div>

 

The css used is :

#header{Background:url(images/menu_bg.Jpg) repeat-x;Height:56px;Width:910px;Margin:0 auto;}.Logo{Font-family:Georgia, "Times New Roman", Times, serif;Font-size:30px;Padding-top:3px;Padding-left:5px;Width:280px;Color:#FFFFFF;Float:left;}.Sub{Font-family:Verdana, Arial, Helvetica, sans-serif;Font-size:12px;Width:280px;Color:#FFFFFF;Text-align:right;}.Menu{Width:620px;Float:right;}.Menu ul{List-style-type:none;Margin:0px;Padding:0px;Width:620px;Text-align:right;}.Menu ul li{Float:left;Display:block;Width:120px;Border-left:solid 1px #1a3857;}.Menu ul li a{Display:block;Text-align:center;Color:#CCCCCC;Font-family:Verdana, Arial, Helvetica, sans-serif;Text-decoration:none;Font-weight:bold;Font-size:13px;Height:56px;}.Menu ul li a:hover{Color:#FFFFFF;Height:56px;Background:url(images/menu_over.Jpg) repeat-x;}.Links{Padding-top: 17px;}

 

I need 7 drop links under Services Link. Please help by code. The menu style should not be changed. To see it in working condition please browse :

http://www.Crazywebo...nment/index.Php

Drop menu should be under services link. Please help if u can.

 

Anil