Jump to content

Drop Menu Help


XenSS06

Recommended Posts

Hey everyone i have been at this for weeks and now im turning to you guys for help.Im trying to make a vertical drop menu on my, but im kinda stuck.xenss06-albums-site-images-picture1042-dropmenu.jpgI have already sorted out the right image issue so please ignore that one.I want to make the middle image look like the left image.Is there a way i can replace the class with an actual image?I want to have the menu look like the original but operate like a drop menu.

<table width="240" border="0" cellpadding="0" cellspacing="0"><tr><td width="230" class="vbmenu_control" id="garage"><a href="#">Garage - Time Slips - Dyno Sheets</a><script type="text/javascript">vbmenu_register("garage");</script></td><tr><td id="classifieds" class="vbmenu_control"><a href="#">Classifieds</a><script type="text/javascript">vbmenu_register("classifieds");</script></td><tr><td id="support" class="vbmenu_control"><a href="#">Support the Community</a><script type="text/javascript">vbmenu_register("support");</script></td><tr><td id="supportingvendors" class="vbmenu_control"><a href="#">Supporting Vendors</a><script type="text/javascript">vbmenu_register("supportingvendors");</script></td><tr><td class="vbmenu_control"><a href="http://www.localcobalt.net/forum/faq.php">Frequently Asked Questions</a></tr></table><!-- NAVBAR POPUP MENUS --><img src="http://www.localcobalt.net/forum/images/onlydev/misc/nav_bottom.gif" alt="" /></div><div id="header"><img src="http://www.localcobalt.net/forum/images/onlydev/misc/header_right.gif" class="fright" alt="" /><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="http://www.localcobalt.net/forum/images/onlydev/misc/logo.gif" alt="$vboptions[bbtitle]" /></a></div><br />$cyb_flashimagebanners<br /><!-- GARAGE TOOLBAR --><div class="vbmenu_popup" id="garage_menu" style="display:none"><table cellpadding="4" cellspacing="1" border="0"><tr><td class="thead">Garage - Time Slips - Dyno Sheets</td></tr> <tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/ICFgarage.html">Main Garage Stats</a></td></tr><tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/ICFgar...e.html">Browse Garage</a></td></tr><tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/ICFgar...ips.html">Time Slips</a></td></tr><tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/ICFgarage-dyno.html">Dyno Sheets</a></td></tr><tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/ICFgar...time.html">Lap Times</a></td></tr><tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/ICFgar....html">Vehicle Search</a></td><tr><td class="thead">Reviews</td></tr><tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/ICFgar...ps.html">Store Reviews</a></td></tr><tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/ICFgar...">Installation Reviews</a></td><tr><td class="thead">Garage Vendors List</td></tr> <tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/garage...iness">Vendors Lists</a></td></td></tr></table></div><!-- CLASSIFIEDS TOOLBAR --><div class="vbmenu_popup" id="classifieds_menu" style="display:none"><table cellpadding="4" cellspacing="1" border="0"><tr><td class="thead">Classifieds</td></tr><tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/classifieds/...p/cat/1">Parts for Sale</a></td></tr> <tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/classifieds/...hp/cat/3">Cars for Sale</a></td></tr> <tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/classifieds/...p/cat/20">Want to Trade</a></td></tr> <tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/classifieds/...p/cat/22">Misc. for Sale</a></td></tr></table></div><!-- SUPPORT TOOLBAR --><div class="vbmenu_popup" id="support_menu" style="display:none"><table cellpadding="4" cellspacing="1" border="0"><tr><td class="thead">Support the Community</td></tr><tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/index.php">Link1</td></tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/index.php">Link2</td></tr><tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/index.php">Link3</td></tr></table></div><!-- SUPPORTVENDOR TOOLBAR --><div class="vbmenu_popup" id="supportingvendors_menu" style="display:none"><table cellpadding="4" cellspacing="1" border="0"><tr><td class="thead">Support the Community</td></tr><tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/index.php">Supporting Vendor Info</td></tr> <tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/index.php">Supporting Vendors List</td></tr> <tr><td class="vbmenu_option"><a href="http://www.localcobalt.net/forum/index.php">Become a Supporting Vendor</td></tr></table></div> 

Thank you in advance.

Link to comment
Share on other sites

If you used unordered lists rather than tables you would have it easier. When working with tables in Javascript you have to deal with several nested elements (table -> tbody -> tr -> td), while with a list you only need to deal with one level of nesting (ul -> li)I can't give detailed information because I don't know what the vbmenu_register() function does. But it's likely you'll have to redo the Javascript, since putting <script> tags everywhere just fills up the page with extra unnecessary mark-up.The way to do things is to separate HTML from Javascript and CSS:HTML:

var i;// To begin with, hide the submenus// to those who have Javascript activatedvar menu = document.getElementById("menu");for(i = 0; i < menu.getElementsByTagName("ul").length; i++) {  menu.getElementsByTagName("ul")[i].style.display = "none";}var menuItems = menu.childNodes;for(i = 0; i < menuItems.length; i++) {  // Only get the <li> elements  if(menuItems[i].nodeName == "li") {    // When the link is clicked, the menu is opened with displayMenu()    addEvent(menuItems[i].getElementsByTagName("a")[0],"click",displayMenu);  }}// Display the menu when an element is clickedfunction displayMenu(e) {  // Get event object  e = e ? e : window.event;  // Get the element that fired the event  target = e.srcElement ? e.srcElement : e.target;  // Safari will use the text node within the element as the target  if(target.nodeType == 3) target = target.parentNode;  var subMenu = target.parentNode.getElementsByTagName("ul")[0];  if(subMenu.style.display == "none") {    subMenu.style.display = "";  } else {    subMenu.style.display == "none"  }}/* Cross-browser event handling */function addEvent(target,eventType,handler) {    if(target.addEventListener) {      target.addEventListener(eventType,handler,false);    } else if(target.attachEvent) {      target.attachEvent('on'+eventType,handler);    } else {      target['on' + eventType] = handler;    }    return;}

CSS:

#menu {  padding: 0;  list-style-type: none;}

Link to comment
Share on other sites

Ok so i think i can figure out the HTML part:If i change the href="#" to a image link that will use an image to display the button correct?Then when the button is clicked the submenu's will display?

<ul id="menu">	<li><a href="#">Menu item 1</a>		<ul>			<li><a href="">Submenu item</li>			<li><a href="">Submenu item</li>		</ul>	</li>	<li><a href="#">Menu item 2</a>		<ul>			<li><a href="">Submenu item</li>			<li><a href="">Submenu item</li>		</ul>	</li></ul>

Link to comment
Share on other sites

Sorry im am very new to programing, but i am trying to learn thats why i came here so my coding level is novice at best.Do i have to edit this javascript, if so in what way?

var i;// To begin with, hide the submenus// to those who have Javascript activatedvar menu = document.getElementById("menu");for(i = 0; i < menu.getElementsByTagName("ul").length; i++) {  menu.getElementsByTagName("ul")[i].style.display = "none";}var menuItems = menu.childNodes;for(i = 0; i < menuItems.length; i++) {  // Only get the <li> elements  if(menuItems[i].nodeName == "li") {    // When the link is clicked, the menu is opened with displayMenu()    addEvent(menuItems[i].getElementsByTagName("a")[0],"click",displayMenu);  }}// Display the menu when an element is clickedfunction displayMenu(e) {  // Get event object  e = e ? e : window.event;  // Get the element that fired the event  target = e.srcElement ? e.srcElement : e.target;  // Safari will use the text node within the element as the target  if(target.nodeType == 3) target = target.parentNode;  var subMenu = target.parentNode.getElementsByTagName("ul")[0];  if(subMenu.style.display == "none") {    subMenu.style.display = "";  } else {    subMenu.style.display == "none"  }}/* Cross-browser event handling */function addEvent(target,eventType,handler) {    if(target.addEventListener) {      target.addEventListener(eventType,handler,false);    } else if(target.attachEvent) {      target.attachEvent('on'+eventType,handler);    } else {      target['on' + eventType] = handler;    }    return;}

I think i can figure out where to add the css code.CSS:

#menu {  padding: 0;  list-style-type: none;}

Link to comment
Share on other sites

The Javascript doesn't need to be modified in any way.The <a> element isn't used to display images. If you want an image in your links, you can use CSS to apply a background image. But seeing as you don't understand the href attribute and don't know where to put the CSS, you should first look at the:W3Schools HTML TutorialW3Schools CSS TutorialThe first step to getting anything done is knowing what's going on.

Link to comment
Share on other sites

ok thanks guys i appreciate the help i will read up some and ill check back in a few days to let you guys know how i made out.Ingolme,Im using vbulletin i have a specific area to add additional css but i will still read those links.Like you said the 1st step is knowing whats going on.Thanks again guys ill be back.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...