XenSS06 Posted October 21, 2009 Share Posted October 21, 2009 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.I 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 More sharing options...
Ingolme Posted October 21, 2009 Share Posted October 21, 2009 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 More sharing options...
XenSS06 Posted October 21, 2009 Author Share Posted October 21, 2009 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 More sharing options...
XenSS06 Posted October 21, 2009 Author Share Posted October 21, 2009 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 More sharing options...
dsonesuk Posted October 21, 2009 Share Posted October 21, 2009 you may want to check out http://www.cssplay.co.uk/menus/ul-dropdown.html who supply several different type of drop down menus to consider. Link to comment Share on other sites More sharing options...
Ingolme Posted October 21, 2009 Share Posted October 21, 2009 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 More sharing options...
XenSS06 Posted October 21, 2009 Author Share Posted October 21, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.