How Do I Drop Down Menus in the Header?

[LCN2007]

Im looking to add some drop down menus in my header where i already have some navigation buttons.

I have tried to figure this out with this article but im really having no luck. https://vborg.vbsupport.ru/showthread.php?t=122523

Any help would be greatly appreaciated.

[Lynne]

Linking to the thread doesn't help since no one wants to go through the whole thing looking for where you posted. You should either link to your post, or repost it here.

[LCN2007]

I didnt post anything that i havent posted in this thread.

Im simply asking how to put drop downs in the header where i already have nav buttons?

Then i stated i tried to see if i could use the technique in the thread i linked.

What would i need to copy from the other thread where i tried to help someone else use that article?

[Lynne]

I thought you posted some code. You can use that article to make your dropdowns wherever you like. If it's in the header, then put it in the header.

[LCN2007]

Well i tried this in my header with no success.

I dont have any of the code that the article is talking about so i just added the code were i thought it might go.

I put this below the last button code in the header
<td id="custommenu" class="vbmenu_control">
<a href="#">Custom Menu</a>
<script type="text/javascript">
vbmenu_register("custommenu");
</script>
</td>

Then i added this at the bottom of the header just befor the content table.
<div class="vbmenu_popup" id="custommenu_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Custom Menu</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
content row
</td>
</tr>
</table>
</div>

The final result was no drop down but rather a template break.

:(

[Lynne]

We need to see about 10 lines above and below your added code so we can see what else is going on. We have no idea what your header template looks like, so how can we possibly help without getting some idea from you about what it looks like?

[LCN2007]

Here is my whole header.
Im wanting to turn the stuff in red into menus with additional dropdown items.

Thanks for your help.


<div id="wrap">

<div id="topnav"><img src="http://www.yoursite.com/forum/images/onlydev/misc/topnav_right.gif" class="fright" alt="" /><img src="http://www.yoursite.com/forum/images/onlydev/misc/topnav_left.gif" alt="" /><a href="http://www.yoursite.com/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('topnav_home','','http://www.yoursite.com/forum/images/onlydev/misc/topnav_home_over.gif',1)"><img src="http://www.yoursite.com/forum/images/onlydev/misc/topnav_home.gif" name="topnav_home" id="topnav_home" alt="$vboptions[bbtitle]" /></a><a href="http://www.yoursite.com/forum/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('topnav_forum','','http://www.yoursite.com/forum/images/onlydev/misc/topnav_forum_over.gif',1)"><img src="http://www.yoursite.com/forum/images/onlydev/misc/topnav_forum.gif" name="topnav_forum" id="topnav_forum" alt="$vboptions[bbtitle]" /></a><a href="calendar.php$session[sessionurl_q]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('topnav_events','','http://www.yoursite.com/forum/images/onlydev/misc/topnav_events_over.gif',1)"><img src="http://www.yoursite.com/forum/images/onlydev/misc/topnav_events.gif" name="topnav_events" id="topnav_events" alt="$vbphrase[calendar]" /></a><a href="$vboptions[contactuslink]" rel="nofollow" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('topnav_contact','','http://www.yoursite.com/forum/images/onlydev/misc/topnav_contact_over.gif',1)"><img src="http://www.yoursite.com/forum/images/onlydev/misc/topnav_contact.gif" name="topnav_contact" id="topnav_contact" alt="$vbphrase[contact_us]" /></a><img src="http://www.yoursite.com/forum/images/onlydev/misc/topnav_mid.gif" alt="" /></div>

<div class="fright" id="nav">

<a href="http://www.yoursite.com/forum/garage.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_garage','','http://www.yoursite.com/forum/images/onlydev/misc/nav_garage_over.gif',1)"><img src="http://www.yoursite.com/forum/images/onlydev/misc/nav_garage.gif" name="nav_garage" id="nav_garage" alt="Garages - Time Slips - Dyno Charts" /></a>

<a href="http://www.yoursite.com/classifieds/index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_classifieds','','http://www.yoursite.com/forum/images/onlydev/misc/nav_classifieds_over.gif',1)"><img src="http://www.yoursite.com/forum/images/onlydev/misc/nav_classifieds.gif" name="nav_classifieds" id="nav_classifieds" alt="Classifieds" /></a>

<a href="http://www.yoursite.com/forum/payments.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_support','','http://www.yoursite.com/forum/images/onlydev/misc/nav_support_over.gif',1)"><img src="http://www.yoursite.com/forum/images/onlydev/misc/nav_support.gif" name="nav_support" id="nav_support" alt="Support the Community" /></a>

<a href="http://www.yoursite.com/forum/advertise.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_vendor','','http://www.yoursite.com/forum/images/onlydev/misc/nav_vendor_over.gif',1)"><img src="http://www.yoursite.com/forum/images/onlydev/misc/nav_vendor.gif" name="nav_vendor" id="nav_vendor" alt="Supporting Vendors" /></a>

<a href="faq.php$session[sessionurl_q]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_faq','','http://www.yoursite.com/forum/images/onlydev/misc/nav_faq_over.gif',1)"><img src="http://www.yoursite.com/forum/images/onlydev/misc/nav_faq.gif" name="nav_faq" id="nav_faq" alt="$vbphrase[faq]" /></a>

<img src="http://www.yoursite.com/forum/images/onlydev/misc/nav_bottom.gif" alt="" /></div>

[Lynne]

I think you'd have to totally redo the links in your navbar in order to do dropdowns like in that article. The article is based around the links being in table cells and your navbar links are not. So, you would have to either redo it completely like how vbulletin does it, talk to the style designer about redoing it for you, or google another dropdown menu option to use.

[LCN2007]

Im fine with redoing them i dont need the hoover feature im not even using that so if we need to turn them in to regular nav code thats fine.

I just need it to be a vertical navebar and on the right side of my header like:

Nav Button 1
Nav Button 2
Nav Button 3
Nav Button 4

Then when you click them the drop dowsn open.

[Lynne]

Well, create a table to hold the links and follow the article on how to make each of the links dropdowns.

[LCN2007]

Do you think you could help me by telling me how to make sure my table stays to the right of the header?

--------------- Added 1253308780 at 1253308780 ---------------

Yeah im dead lost on this one i get one link that fails and just pops me to the top well near it and no drop down.

[Lynne]

When you say you are lost, the best thing to do is post your code so people can point you in the right direction.

[LCN2007]

Lynne,

Though i appreciate your fast replies they dont help me.

You keep talking to me as if im a master coder/programer.

So telling me to make a table and follow the article doesnt help, expecially since the article is written specificly for existing navbars and i am neither have a existing navbar nor am i even in the navbar template. So the items that the article is telling me to search for are not there for me to use the article against.


<div class="fright" id="nav">
<td>
<td id="custommenu1" class="vbmenu_control">
<a href="#">Custom Menu1</a>
<script type="text/javascript">
vbmenu_register("custommenu1");
</script>
</td><td id="custommenu2" class="vbmenu_control">
<a href="#">Custom Menu2</a>
<script type="text/javascript">
vbmenu_register("custommenu2");
</script>
</td>
</td>

<img src="http://www.yoursite.com/forum/images/onlydev/misc/nav_bottom.gif" alt="" /></div>

<div id="header"><img src="http://www.yoursite.com/forum/images/onlydev/misc/header_right.gif" class="fright" alt="" /><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="http://www.yoursite.com/forum/images/onlydev/misc/logo.gif" alt="$vboptions[bbtitle]" /></a></div>
<br />
$cyb_flashimagebanners
<br />
<!-- Header Popup -->
<div class="vbmenu_popup" id="custommenu_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Custom Menu</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<a href="http://www.yoursite.com/forum/index.php">Link1</a>
<a href="http://www.yoursite.com/forum/index.php">Link2</a>
<a href="http://www.yoursite.com/forum/index.php">Link3</a>
</td>
</tr>
</table>
</div><div class="vbmenu_popup" id="custommenu_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Custom Menu</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<a href="http://www.yoursite.com/forum/index.php">Link1</a>
<a href="http://www.yoursite.com/forum/index.php">Link2</a>
<a href="http://www.yoursite.com/forum/index.php">Link3</a>
</td>
</tr>
</table>
</div>
<!-- End Header Popup -->


<!-- content table -->
$spacer_open

$_phpinclude_output

[Lynne]

The basic structure of a table is:
<table>
<tr>
<td>
</td>
</tr>
</table>
If you know nothing of tables, then you really should google them or have a good book on html. I like this site - HTML Tables (http://www.w3schools.com/html/html_tables.asp)

[LCN2007]

Thanks i understand that, but how do i apply the article?

Like i have above?

[Lynne]

What you did above is just gonna be screwed up because you have no table (<table>) or row (<tr>) tags.

Your id tags are off on the popups. Read the article about that - they have to correspond to the link in the navbar.

[LCN2007]

Hows this?


<div class="fright" id="nav">
<table>
<tr>
<td>
<td id="custommenu1" class="vbmenu_control">
<a href="#">Custom Menu1</a>
<script type="text/javascript">
vbmenu_register("custommenu1");
</script>
</td><td id="custommenu2" class="vbmenu_control">
<a href="#">Custom Menu2</a>
<script type="text/javascript">
vbmenu_register("custommenu2");
</script>
</td>
</td>
</tr>
</table>

<img src="http://www.yoursite.com/forum/images/onlydev/misc/nav_bottom.gif" alt="" /></div>

<div id="header"><img src="http://www.yoursite.com/forum/images/onlydev/misc/header_right.gif" class="fright" alt="" /><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="http://www.yoursite.com/forum/images/onlydev/misc/logo.gif" alt="$vboptions[bbtitle]" /></a></div>
<br />
$cyb_flashimagebanners
<br />
<!-- Header Popup -->
<div class="vbmenu_popup" id="custommenu_menu1" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Custom Menu1</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<a href="http://www.yoursite.com/forum/index.php">Link1</a>
<a href="http://www.yoursite.com/forum/index.php">Link2</a>
<a href="http://www.yoursite.com/forum/index.php">Link3</a>
</td>
</tr>
</table>
</div><div class="vbmenu_popup" id="custommenu_menu2" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Custom Menu2</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<a href="http://www.yoursite.com/forum/index.php">Link1</a>
<a href="http://www.yoursite.com/forum/index.php">Link2</a>
<a href="http://www.yoursite.com/forum/index.php">Link3</a>
</td>
</tr>
</table>
</div>
<!-- End Header Popup -->

[Lynne]

You still don't have your ids correct. This is from the article, look at the stuff in red - they must all be the same:
<td id="custommenu" class="vbmenu_control">
<a href="#">Custom Menu</a>
<script type="text/javascript">
vbmenu_register("custommenu");
</script>
</td><div class="vbmenu_popup" id="custommenu_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Custom Menu</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
content row
</td>
</tr>
</table>
</div>Also, you have two <td> and </td> tags in your code so remove one in that part of your code like this:
<table>
<tr>
<td id="custommenu1" class="vbmenu_control">
<a href="#">Custom Menu1</a>
<script type="text/javascript">
vbmenu_register("custommenu1");
</script>
</td><td id="custommenu2" class="vbmenu_control">
<a href="#">Custom Menu2</a>
<script type="text/javascript">
vbmenu_register("custommenu2");
</script>
</td>
</tr>
</table>

[LCN2007]

Ok i think i got what you said, the id thing i put the name in the wrong spot.

Hows this now?


<table>
<tr>
<td id="custommenu1" class="vbmenu_control">
<a href="#">Custom Menu1</a>
<script type="text/javascript">
vbmenu_register("custommenu1");
</script>
<td id="custommenu2" class="vbmenu_control">
<a href="#">Custom Menu2</a>
<script type="text/javascript">
vbmenu_register("custommenu2");
</script>
</td>
</tr>
</table>










<!-- Header Popup -->
<div class="vbmenu_popup" id="custommenu1_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Custom Menu1</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<a href="http://www.yoursite.com/forum/index.php">Link1</a>
<a href="http://www.yoursite.com/forum/index.php">Link2</a>
<a href="http://www.yoursite.com/forum/index.php">Link3</a>
</td>
</tr>
</table>
</div><div class="vbmenu_popup" id="custommenu2_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Custom Menu2</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<a href="http://www.yoursite.com/forum/index.php">Link1</a>
<a href="http://www.yoursite.com/forum/index.php">Link2</a>
<a href="http://www.yoursite.com/forum/index.php">Link3</a>
</td>
</tr>
</table>
</div>
<!-- End Header Popup -->

[Lynne]

You got rid of a needed </td> tag. Also, didn't you say you want this vertical? If so, each link needs to be it's own row. Something more like this:

<table>
<tr>
<td id="custommenu1" class="vbmenu_control">
<a href="#">Custom Menu1</a>
<script type="text/javascript">
vbmenu_register("custommenu1");
</script>
</td></tr>
<tr><td id="custommenu2" class="vbmenu_control">
<a href="#">Custom Menu2</a>
<script type="text/javascript">
vbmenu_register("custommenu2");
</script>
</td>
</tr>
</table>

[LCN2007]

Ok, i got it now

Is there a way to replace the "vbmenu_control" with a image?

The controls are to large for where im putting them?

Thanks Lynne

--------------- Added 1253510494 at 1253510494 ---------------

How does this look?

<table>
<tr>
<td id="garage" class="vbmenu_control">
<a href="#">Garage - Time Slips - Dyno Sheets</a>
<script type="text/javascript">
vbmenu_register("garage");
</script>
</td></tr>
<tr><td id="classifieds" class="vbmenu_control">
<a href="#">Classifieds</a>
<script type="text/javascript">
vbmenu_register("classifieds");
</script>
</td></tr>
<tr><td id="support" class="vbmenu_control">
<a href="#">Support the Community</a>
<script type="text/javascript">
vbmenu_register("support");
</script></td></tr>
<tr><td id="supportingvendors" class="vbmenu_control">
<a href="#">Supporting Vendors</a>
<script type="text/javascript">
vbmenu_register("supportingvendors");
</script>
</td>
</tr>
<tr><a href="http://www.yoursite.com/forum/faq.php">Frequently Asked Questions</a></tr>
</table>







<!-- Header Popup -->
<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" title="nohilite">
<a href="http://www.yoursite.com/forum/ICFgarage.html">Main Garage Stats</a><br />
<a href="http://www.yoursite.com/forum/ICFgarage-browse.html">Browse Garage</a><br />
<a href="http://www.yoursite.com/forum/ICFgarage-timeslips.html">Time Slips</a><br />
<a href="http://www.yoursite.com/forum/ICFgarage-dyno.html">Dyno Sheets</a><br />
<a href="http://www.yoursite.com/forum/ICFgarage-laptime.html">Lap Times</a><br />
<a href="http://www.yoursite.com/forum/ICFgarage-search.html">Vehicle Search</a><br />
<tr>
<td class="thead">Reviews</td>
</tr>
<a href="http://www.yoursite.com/forum/ICFgarage-shops.html">Store Reviews</a><br />
<a href="http://www.yoursite.com/forum/ICFgarage-garage.html">Installation Reviews</a><br />
<tr>
<td class="thead">Garage Vendors List</td>
</tr>
<a href="http://www.yoursite.com/forum/garage.php?do=business">Vendors Lists</a><br />
</td>
</tr>
</table>
</div><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" title="nohilite">
<a href="http://www.yoursite.com/classifieds/index.php/cat/1">Parts for Sale</a><br />
<a href="http://www.yoursite.com/classifieds/index.php/cat/3">Cars for Sale</a><br />
<a href="http://www.yoursite.com/classifieds/showcat.php/cat/6">Want to Buy</a><br />
<a href="http://www.yoursite.com/classifieds/index.php/cat/20">Want to Trade</a><br />
<a href="http://www.yoursite.com/classifieds/index.php/cat/22">Misc. for Sale</a><br />
</td>
</tr>
</table>
</div><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" title="nohilite">
<a href="http://www.yoursite.com/forum/index.php">Link1</a><br />
<a href="http://www.yoursite.com/forum/index.php">Link2</a><br />
<a href="http://www.yoursite.com/forum/index.php">Link3</a><br />
</td>
</tr>
</table>
</div><div class="vbmenu_popup" id="supportingvendors_menu" style="display:none">
<table cellpadding="4" cellspacing="1" border="0">
<tr>
<td class="thead">Supporting Vendors</td>
</tr>
<tr>
<td class="vbmenu_option" title="nohilite">
<a href="http://www.yoursite.com/forum/index.php">Supporting Vendor Info</a><br />
<a href="http://www.yoursite.com/forum/index.php">Supporting Vendors List</a><br />
<a href="http://www.yoursite.com/forum/index.php">Become a Supporting Vendor</a><br />
</td>
</tr>
</table>
</div>
<!-- /Header Popup -->

[Lynne]

Your code looks fine now except the FAQ link - you need to put it in <td> tags:
<tr><td><a href="http://www.yoursite.com/forum/faq.php">Frequently Asked Questions</a></td></tr>

I'm not sure what you want to replace with an image. Perhaps show us an image of what you have right now and point out what you want to replace.

[LCN2007]

Ok i got one picture.

If i could i would like to use the original images for the new menu so it doesn't break the template.

Also i noticed when you click the drop down i tried to make a break in the menu but didn't seem to work for me.
the review links are at the top of the menu instead of after the review break same think with the garage vendors list.

[Lynne]

I really don't understand what you are talking about. As I said before, an image showing what is happening now and an image showing what you want to happen would really help.

[LCN2007]

Sorry i had used a IMG Tag to show the picture, but i didnt reaalize that my site is producing invalid urls for albums.
I thinks its anti-leach protection maybe my vbseo. idk

I added it to the last post.

--------------- Added 1253655656 at 1253655656 ---------------

Lynne,

Can you see the image now?

[LCN2007]

Does anyone know how to do this?

Im wanting to replace the control with a image or create a new menu option so it doesnt break my template and like like it does now?

[Lynne]

I don't know what you mean by "break your template". You image just shows some drop down boxes and they look just like dropdown boxes should to me. If you mean they are too tall, you can reduce the line height or get rid of the arrows (there are other threads about getting rid of the arrows - just do a search).

[LCN2007]

I was wondering if there is a way to use a image in place of the buttons that arte there so it will lok like it did before i added the drop menus.

[Lynne]

I've never tried that, but have you tried replace the text with image code? ie. Instead of Supporting Vendors put in <img src="wahtever.jpg" alt="Supporting Vendors" />

[LCN2007]

I've never tried that, but have you tried replace the text with image code? ie. Instead of Supporting Vendors put in <img src="wahtever.jpg" alt="Supporting Vendors" />

I tried that out and it worked great except its still pushing the gradient behind it. Is there any way to get rid of that?

[Lynne]

I don't know what you mean about "pushing the gradient behind it" but I'll assume you are talking about some styling. So, find what is giving it the gradient and change it - remove the class or use inline styling to replace it or something like that.