Jump to content

Drop Down Menu


hoachen

Recommended Posts

http://www.w3schools.com/dhtml/tryit.asp?f...trydhtml_menu10This example is almost perfect for me but I need one more function which is when we scroll down the submenu the main menu background does not hightlight mean in static bgcolor. How do I make this happen? Where should I add-in when mouseover the submenu the main menu will hightlighted.
<head><style>body{font-family:Verdana, Arial, Helvetica, sans-serif}table{font-size:80%;background:none }a{color:#FFFFFF;text-decoration:none;font:bold}a:hover{color:#FFFF00}a.table {color:#FFFFFF; background:#0A7875; overflow:visible;}td.menu{background:#0A7875;}table.menu{font-size:100%;position:absolute;visibility:hidden;}</style>

[edit] wrapped code in

 tags - skemcin[/i]
Edited by Skemcin
Link to comment
Share on other sites

  • 2 weeks later...

If I have already created a navigation bar, can I still ad this functionality. I am talking about having another menu appear when you go over one link/button on the navigation bar. I used Dreamweaver to creat the navigation bar and Fireworks to creat the Up, Down, and Over states of the nav bar buttons.

Link to comment
Share on other sites

yes you can...have you looked at the example shown above? Do you understand what is being done? If not post what code you have and I can walk you through it.Also could a Moderator move this portion of the post...it isn't nice to hijack other ppls posts.Thanks.

Link to comment
Share on other sites

Let me try and be more specific. I created a vertical navigation bar. For one of the buttons (there might be more that I want to do this function), I would like to have another menu "pull out" when the mouse pointer is over it. Another vertical navigation bar that would come out parallel to the main navigation bar. Maybe that will help what I am asking.Another question. How do I keep this navigation bar on every page? Is that what is done with CSS or a templates? Obviously, the point for asking is because I don't want to have to ad the code to each page I create. Sorry, I am a beginner and don't know a whole lot. I am learing as I go.

Link to comment
Share on other sites

yes you can...have you looked at the example shown above? Do you understand what is being done? If not post what code you have and I can walk you through it.Also could a Moderator move this portion of the post...it isn't nice to hijack other ppls posts.Thanks.

How am I hijacking the post? Am I not talking about the same thing, just a different function? I apologize if I am hijacking the post.I can't post my code until I get home. My code is on my home computer. I vaguely understand the code in the example. It looks like a table was used for the naviagation bar. Other than that, I don't follow the java scripting part of the code.
Link to comment
Share on other sites

Ok sorry..I missed the vertical part.As far as not wanting ot put the code on everypage...you have a few choices.1. Use frames, can be messy and ugly and has some other problems but gets the job done.2. Use a scripting language like ASP or PHP and use the SSI (server side includes) functionality. Meaning you can build your navigation, once, and place it in its own page then call it as many times as you want from other pages.3. Put code on every page. Not really an option is it? lolSo...the easiest and quickest solution would be to use frames. If you go this route and need some help cleaning up the frames and making it look like you aren't using frames (not always as easy as it sounds) let me know.Learning a server side language will take time but is, by far, the best solution.

Link to comment
Share on other sites

oh...can you post your navigation code and I will show you how to make a pull down menu for it.

I will post it when I get home this evening. Thanks for the help. Do you recommend any books for learning web design? If this question is hijacking the thread, then let me know and I will erase it. You can PM me the answer, if you have one.
Link to comment
Share on other sites

I will post it when I get home this evening.  Thanks for the help.  Do you recommend any books for learning web design?  If this question is hijacking the thread, then let me know and I will erase it.  You can PM me the answer, if you have one.

Here is my code for the nav bar:
<script language="JavaScript" type="text/JavaScript"><!--function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_nbGroup(event, grpName) { //v6.0  var i,img,nbArr,args=MM_nbGroup.arguments;  if (event == "init" && args.length > 2) {    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();      nbArr[nbArr.length] = img;      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {        if (!img.MM_up) img.MM_up = img.src;        img.src = img.MM_dn = args[i+1];        nbArr[nbArr.length] = img;    } }  } else if (event == "over") {    document.MM_nbOver = nbArr = new Array();    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {      if (!img.MM_up) img.MM_up = img.src;      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);      nbArr[nbArr.length] = img;    }  } else if (event == "out" ) {    for (i=0; i < document.MM_nbOver.length; i++) {      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }  } else if (event == "down") {    nbArr = document[grpName];    if (nbArr)      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }    document[grpName] = nbArr = new Array();    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {      if (!img.MM_up) img.MM_up = img.src;      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;      nbArr[nbArr.length] = img;  } }}//--></script><body bgcolor="#0000CC" link="#990066" vlink="#0066FF" onLoad="MM_preloadImages('Pictures/hometestdown.png','Pictures/hometestover.png','Pictures/engagementtestdown.png','Pictures/engagementtestover.png','Pictures/weddingtestdown.png','Pictures/weddingtestover.png','Pictures/marriedguestsdown.png','Pictures/marriedguestsover.png','Pictures/golftournamentdown.png','Pictures/golftournamentover.png','Pictures/contactusdown.png','Pictures/contactusover.png')"><table border="0" cellpadding="0" cellspacing="0">  <tr>     <td><a href="Home.htm" target="_top" onClick="MM_nbGroup('down','group1','Home','Pictures/hometestdown.png',1)" onMouseOver="MM_nbGroup('over','Home','Pictures/hometestover.png','',1)" onMouseOut="MM_nbGroup('out')"><img src="Pictures/hometestup.png" alt="Home" name="Home" width="115" height="25" vspace="5" border="5" onload=""></a></td>  </tr>  <tr>     <td><a href="Home.htm" target="_top" onClick="MM_nbGroup('down','group1','Engagement','Pictures/engagementtestdown.png',1)" onMouseOver="MM_nbGroup('over','Engagement','Pictures/engagementtestover.png','',1)" onMouseOut="MM_nbGroup('out')"><img src="Pictures/engagementtestup.png" alt="Engagement" name="Engagement" vspace="5" border="5" onload=""></a></td>  </tr>  <tr>     <td><a href="Home.htm" target="_top" onClick="MM_nbGroup('down','group1','Wedding','Pictures/weddingtestdown.png',1)" onMouseOver="MM_nbGroup('over','Wedding','Pictures/weddingtestover.png','',1)" onMouseOut="MM_nbGroup('out')"><img src="Pictures/weddingtestup.png" alt="Wedding" name="Wedding" vspace="5" border="5" onLoad=""></a></td>  </tr>  <tr>    <td><a href="Home.htm" target="_top" onClick="MM_nbGroup('down','group1','MarriedGuests','Pictures/marriedguestsdown.png',1)" onMouseOver="MM_nbGroup('over','MarriedGuests','Pictures/marriedguestsover.png','',1)" onMouseOut="MM_nbGroup('out')"><img src="Pictures/marriedguestsup.png" alt="Married Guests" name="MarriedGuests" vspace="5" border="5" onLoad=""></a></td>  </tr>  <tr>    <td><a href="Home.htm" target="_top" onClick="MM_nbGroup('down','group1','GolfTournament','Pictures/golftournamentdown.png',1)" onMouseOver="MM_nbGroup('over','GolfTournament','Pictures/golftournamentover.png','',1)" onMouseOut="MM_nbGroup('out')"><img src="Pictures/golftournamentup.png" alt="Golf Tournament" name="GolfTournament" vspace="5" border="5" onLoad=""></a></td>  </tr>  <tr>    <td><a href="Home.htm" target="_top" onClick="MM_nbGroup('down','group1','ContactUs','Pictures/contactusdown.png',1)" onMouseOver="MM_nbGroup('over','ContactUs','Pictures/contactusover.png','',1)" onMouseOut="MM_nbGroup('out')"><img src="Pictures/contactusup.png" alt="Contact Us" name="ContactUs" vspace="5" border="5" onLoad=""></a></td>  </tr></table>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...