Incorporate simple Javascript menu into my vB forum?

[anthroforum]

I have tried a few Javascript navigation scripts but they never work properly :/

This is what I want to achieve, could anyone suggest a script? Once I have a drop-down menu like in the second picture, I can dispense with the navbar altogether.

[Lynne]

Have you tried just copying the Quick Links code for use? You will have to comment out the Quick Links in the navbar if you copy the code because it will conflict with it in the top navbar if you do.

[anthroforum]

I pasted the following into my Header but it's not appearing in any shape or form :/

<div class="vbmenu_popup" id="usercptools_menu" style="display:none" align="$stylevar[left]">
		<table cellpadding="4" cellspacing="1" border="0">

		<tr><td class="thead">$vbphrase[quick_links]</td></tr>
		<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>
		<tr><td class="vbmenu_option"><a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a></td></tr>
		<tr><td class="vbmenu_option"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_contacts]</a></td></tr>
		$template_hook[navbar_quick_links_menu_pos1]

		<tr><td class="thead">$vbphrase[networking]</td></tr>
		<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=buddylist"><if condition="$show['friends_and_contacts']">$vbphrase[contacts_and_friends]<else />$vbphrase[contacts]</if></a></td></tr>
		<if condition="$show['quick_links_groups']">
			<tr><td class="vbmenu_option"><a href="group.php$session[sessionurl_q]">$vbphrase[social_groups]</a></td></tr>
		</if>
		<if condition="$show['quick_links_albums']">
			<tr><td class="vbmenu_option"><a href="album.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[pictures_and_albums]</a></td></tr>
		</if>
		$template_hook[navbar_quick_links_menu_pos2]

		<tr><td class="thead"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></td></tr>
		<if condition="$show['siglink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></td></tr></if>
		<!--<if condition="$show['avatarlink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editavatar">$vbphrase[edit_avatar]</a></td></tr></if>-->
		<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_your_details]</a></td></tr>
		<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>
		$template_hook[navbar_quick_links_menu_pos3]

		<tr><td class="thead">$vbphrase[miscellaneous]</td></tr>
		<if condition="$show['pmmainlink']"><tr><td class="vbmenu_option"><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></td></tr></if>
		<tr><td class="vbmenu_option"><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></td></tr>
		<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[your_profile]</a></td></tr>
		<if condition="$show['wollink']"><tr><td class="vbmenu_option"><a href="online.php$session[sessionurl_q]">$vbphrase[whos_online]</a></td></tr></if>
		$template_hook[navbar_quick_links_menu_pos4]

		</table>
	</div>

[Lynne]

"display:none" does what is says... it doesn't display anything.

Also, that code is just for the drop-down, you realize that, right? All it does is display the drop-down menu itself, not the link that you click on to make it drop down. That's why display:none is in there.

[anthroforum]

OK, this is where it's at now (in a skin not seen by ordinary users I hasten to add!)

It displays constantly, so I guess all I want to do is to have it show only on mouse over, and also to alter the positioning so that it is on the button.




Code:

<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
	<td align="center"> <table cellspacing="0" cellpadding="0" border="0" bgcolor="white" width="900" height="21">
<tr>
<td width="65"><img src="/images/gradients/hbf/01-topleft.gif"></td>
<td width="50%" background="/images/gradients/hbf/04-filler.gif"></td>
<td width="123"><img src="/images/gradients/hbf/02-topcentre.gif"></td>
<td width="50%" background="/images/gradients/hbf/04-filler.gif"></td>
<td width="29"><img src="/images/gradients/hbf/03-topright.gif"></td>
</tr>

<table cellspacing="0" cellpadding="0" border="0" bgcolor="white" width="900" height="57">
<tr>
<td width="258"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="/images/gradients/hbf/05.gif" border="0"></a></td>
<td width="65"><a href="usercp.php$session[sessionurl_q]"><img src="/images/gradients/hbf/06.gif" border="0"></a></td>
<td width="89"><a href="memberlist.php$session[sessionurl_q]"><img src="/images/gradients/hbf/07.gif" border="0"></a></td>
<td width="53"><a href="/photoplog/index.php$session[sessionurl_q]"><img src="/images/gradients/hbf/08.gif" border="0"></a></td>
<td width="71"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2"><img src="/images/gradients/hbf/09.gif" border="0"></a></td>
<td width="78"><img src="/images/gradients/hbf/10.gif" border="0">


<div class="vbmenu_popup" id="usercptools_menu"  align="$stylevar[left]">
		<table cellpadding="4" cellspacing="1" border="0">

		<tr><td class="thead">$vbphrase[quick_links]</td></tr>
		<if condition="$vboptions['enablesearches']"><tr><td class="vbmenu_option"><a href="search.php?$session[sessionurl]do=getdaily">$vbphrase[todays_posts]</a></td></tr></if>
		<tr><td class="vbmenu_option"><a href="forumdisplay.php?$session[sessionurl]do=markread">$vbphrase[mark_forums_read]</a></td></tr>
		<tr><td class="vbmenu_option"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_contacts]</a></td></tr>
		$template_hook[navbar_quick_links_menu_pos1]

		<tr><td class="thead">$vbphrase[networking]</td></tr>
		<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=buddylist"><if condition="$show['friends_and_contacts']">$vbphrase[contacts_and_friends]<else />$vbphrase[contacts]</if></a></td></tr>
		<if condition="$show['quick_links_groups']">
			<tr><td class="vbmenu_option"><a href="group.php$session[sessionurl_q]">$vbphrase[social_groups]</a></td></tr>
		</if>
		<if condition="$show['quick_links_albums']">
			<tr><td class="vbmenu_option"><a href="album.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[pictures_and_albums]</a></td></tr>
		</if>
		$template_hook[navbar_quick_links_menu_pos2]

		<tr><td class="thead"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_control_panel]</a></td></tr>
		<if condition="$show['siglink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editsignature">$vbphrase[edit_signature]</a></td></tr></if>
		<!--<if condition="$show['avatarlink']"><tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editavatar">$vbphrase[edit_avatar]</a></td></tr></if>-->
		<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editprofile">$vbphrase[edit_your_details]</a></td></tr>
		<tr><td class="vbmenu_option"><a href="profile.php?$session[sessionurl]do=editoptions">$vbphrase[edit_options]</a></td></tr>
		$template_hook[navbar_quick_links_menu_pos3]

		<tr><td class="thead">$vbphrase[miscellaneous]</td></tr>
		<if condition="$show['pmmainlink']"><tr><td class="vbmenu_option"><a href="private.php$session[sessionurl_q]" rel="nofollow">$vbphrase[private_messages]</a></td></tr></if>
		<tr><td class="vbmenu_option"><a href="subscription.php$session[sessionurl_q]" rel="nofollow">$vbphrase[subscribed_threads]</a></td></tr>
		<tr><td class="vbmenu_option"><a href="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[your_profile]</a></td></tr>
		<if condition="$show['wollink']"><tr><td class="vbmenu_option"><a href="online.php$session[sessionurl_q]">$vbphrase[whos_online]</a></td></tr></if>
		$template_hook[navbar_quick_links_menu_pos4]

		</table>
	</div>


</td>
<td width="66"><a href="/misc.php$session[sessionurl_q]?do=flashchat"><img src="/images/gradients/hbf/11.gif" border="0"></a></td>
<td width="58"><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')"><img src="/images/gradients/hbf/12.gif" border="0"></a></td>
<td width="162"><img src="/images/gradients/hbf/13.gif" border="0"></td>
</tr>
 </td>

	</td>
</tr>
</table>



<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

$ad_location[ad_header_end]

[Lynne]

It probably shows constantly because you didn't do the second part of my post:

Have you tried just copying the Quick Links code for use? You will have to comment out the Quick Links in the navbar if you copy the code because it will conflict with it in the top navbar if you do.

You could rewrite it to not conflict by giving it new ids. You can't have two items on a page with the same id or you will cause problems on your page (like a drop-down that stays dropped down).

[anthroforum]

I have removed the Quick Links in the navbar template, how can I get the Quick Links menu to float instead of force the table open.

[Lynne]

I don't know what you mean by this - "how can I get the Quick Links menu to float instead of force the table open."

[anthroforum]

Just the the Quick Links menu is disrupting the display of the forum, how it is placed now, it would be great if it only appeared when the mouse cursor was over the button:

[Lynne]

Post the code for you navbar (or whatever template you are using - both the template to make the navbar link and the one that makes the dropdown). Make sure to use the proper code tags around it or it's too hard to read.