Log in

View Full Version : Help with implementing jQuery Gooey Menu into navbar


Emeralda
06-21-2011, 09:45 PM
Script: jQuery Gooey Menu
http://www.dynamicdrive.com/dynamicindex1/gooeymenu.htm

Well, I can't seem to properly implement that code into the navigation bar on my site, and since I'm quite html illiterate unless I see a ready example I'm not sure what I'm doing wrong:

The original was:
http://prntscr.com/243v2

<!-- nav buttons bar -->



<div align="center">
<table border="0" width="87%" id="table2" cellspacing="0" cellpadding="0">

<tr align="center">
<td width="19"></td>

<td class="vbmenu_control" style="-moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px;" width="5px"></td>

<td class="vbmenu_control" style="font-weight: bold;"><a href="$vboptions[homeurl]">Main Site</a></td>
<td class="vbmenu_control"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td>

<if condition="$show['registerbutton']">
<td class="vbmenu_control"><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></td>
</if>

<if condition="$show['popups']">
<td id="gamesmenu" class="vbmenu_control">
<a href="$show[nojs_link]#" rel="nofollow">Games</a>
<script type="text/javascript">
vbmenu_register("gamesmenu");
</script>
</td>
</if>
<if condition="$show['communitylink'] AND $show['popups']">
<td class="vbmenu_control">
<a id="community" href="$show[nojs_link]#community" rel="nofollow" accesskey="6">$vbphrase[community]</a>
<script type="text/javascript"> vbmenu_register("community"); </script>
</td>
<else />

<if condition="$show['memberslist']">
<td class="vbmenu_control"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td>
</if>

<if condition="$show['quick_links_groups']">
<td class="vbmenu_control"><a href="group.php?$session[sessionurl]">$vbphrase[social_groups]</a></td>
</if>
</if>
<if condition="$show['popups']">

<if condition="$show['searchbuttons']">
<if condition="$show['member']">
<td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$cyb_anp</a></td>
<else />
<td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
</if>

<td class="vbmenu_control"><a id="navbar_search" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></td>
</if>
<if condition="$show['member']">
<td class="vbmenu_control"><a id="usercptools" href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>
</if>
<else />
<if condition="$show['searchbuttons']">
<td class="vbmenu_control"><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></td>
<if condition="$show['member']">
<td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$cyb_anp</a></td>
<else />
<td class="vbmenu_control"><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
</if>
</if>
<td class="vbmenu_control"><a href="forumdisplay.php?$session[sessionurl]do=markread&amp;markreadhash=$bbuserinfo[securitytoken]" rel="nofollow">$vbphrase[mark_forums_read]</a></td>
<if condition="$show['member']">
<td class="vbmenu_control"><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>
</if>
</if>
<td id="gamesmenu" class="vbmenu_control"><a href="$show[nojs_link]#" rel="nofollow"><a href="irc.php">Chat</a></td>
$template_hook[navbar_buttons_right]
<if condition="$show['member']">
<td class="vbmenu_control"><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></td>
</if>

<td class="vbmenu_control" style="-moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px;" width="5px"></td>

<td width="17"></td>
</tr>
</table>
</div>
<!-- / nav buttons bar -->


After my attempt to change it:
http://prntscr.com/243vw


<!-- nav buttons bar -->



<div align="center">
<table border="0" width="87%" id="table2" cellspacing="0" cellpadding="0">

<tr align="center">
<td width="19"></td>

<td width="5" class="vbmenu_control" style="-moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px;"></td>

<td class="vbmenu_control">

<ul id="gooeymenu1" class="underlinemenu">

<li font-weight: bold;"><a href="$vboptions[homeurl]" class="selected">Main Site</a></li>

<li><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></li>

<if condition="$show['registerbutton']">
<li><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></li>
</if>

<if condition="$show['popups']">
<li id="gamesmenu">
<a href="$show[nojs_link]#" rel="nofollow">Games</a>
<script type="text/javascript">
vbmenu_register("gamesmenu");
</script>
</li>
</if>
<if condition="$show['communitylink'] AND $show['popups']">
<li>
<a id="community" href="$show[nojs_link]#community" rel="nofollow" accesskey="6">$vbphrase[community]</a>
<script type="text/javascript"> vbmenu_register("community"); </script>
</li>
<else />

<if condition="$show['memberslist']">
<li><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></li>
</if>

<if condition="$show['quick_links_groups']">
<li><a href="group.php?$session[sessionurl]">$vbphrase[social_groups]</a></li>
</if>
</if>
<if condition="$show['popups']">

<if condition="$show['searchbuttons']">
<if condition="$show['member']">
<li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$cyb_anp</a></li>
<else />
<li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
</if>

<li><a id="navbar_search" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></li>
</if>
<if condition="$show['member']">
<li><a id="usercptools" href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></li>
</if>
<else />
<if condition="$show['searchbuttons']">
<li><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></li>
<if condition="$show['member']">
<li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$cyb_anp</a></li>
<else />
<li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li>
</if>
</if>
<li><a href="forumdisplay.php?$session[sessionurl]do=markread&amp;markreadhash=$bbuserinfo[securitytoken]" rel="nofollow">$vbphrase[mark_forums_read]</a></li>
<if condition="$show['member']">
<li><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></li>
</if>
</if>
<li><a href="$show[nojs_link]#" rel="nofollow"><a href="irc.php">Chat</a></li>
$template_hook[navbar_buttons_right]
<if condition="$show['member']">
<li><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu1', selectitem:1})
</script>

</td>

<td class="vbmenu_control" style="-moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px;" width="5px"></td>
</if>
<td width="17"></td>
</tr>
</table>
</div>
<!-- / nav buttons bar -->


I put the scripts in headinclude as well, but yeah, I have no idea what's wrong >.<
ddadmin
06-22-2011, 07:24 AM
It's hard to tell just based on the raw template code you posted, since some of that code changes when vBulletin actually outputs it on the browser. What you should do is view source on the modified page and copy the HTML markup that pertains to the Gooey Menu here...
Emeralda
06-22-2011, 11:26 AM
After some changes to Advnaced New Posts template it isn't as buggy, but for some reason it looks like a column still, and it adds those nasty dots in front. By the way, could those <li> tags be each in separate <td>? And does it have to be <li> only? I would catch you on MSN, since it would be easier, but yeah >.<



Original html http://prntscr.com/248x1


<!-- nav buttons bar -->



<div align="center">
<table border="0" width="87%" id="table2" cellspacing="0" cellpadding="0">

<tr align="center">
<td width="19"></td>

<td class="vbmenu_control" style="-moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px;" width="5px"></td>

<td class="vbmenu_control" style="font-weight: bold;"><a href="http://g2anime.net">Main Site</a></td>
<td class="vbmenu_control"><a href="usercp.php">User CP</a></td>




<td id="gamesmenu" class="vbmenu_control">
<a href="/search.php?searchid=9252&amp;nojs=1#" rel="nofollow">Games</a>
<script type="text/javascript">
vbmenu_register("gamesmenu");
</script>
</td>


<td class="vbmenu_control">
<a id="community" href="/search.php?searchid=9252&amp;nojs=1#community" rel="nofollow" accesskey="6">Community</a>
<script type="text/javascript"> vbmenu_register("community"); </script>
</td>





<td class="vbmenu_control"><a href="search.php?do=getnew" accesskey="2"><a href="search.php?do=getnew" style="color:Lime">




New Posts: 19 (In 6 Threads)


</a>







</a></td>


<td class="vbmenu_control"><a id="navbar_search" href="search.php" accesskey="4" rel="nofollow">Search</a> <script type="text/javascript"> vbmenu_register("navbar_search"); </script></td>


<td class="vbmenu_control"><a id="usercptools" href="/search.php?searchid=9252&amp;nojs=1#usercptools" accesskey="3">Quick Links</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>


<td id="gamesmenu" class="vbmenu_control"><a href="/search.php?searchid=9252&amp;nojs=1#" rel="nofollow"><a href="irc.php">Chat</a></td>


<td class="vbmenu_control"><a href="login.php?do=logout&amp;logouthash=1308741349-c4ff1051986c1c0ce36440c7435a2353507a13b9" onclick="return log_out('Are you sure you want to log out?')">Log Out</a></td>


<td class="vbmenu_control" style="-moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px;" width="5px"></td>

<td width="17"></td>
</tr>
</table>
</div>
<!-- / nav buttons bar -->



Here's the source code after my clumsy changes and how it looks: http://prntscr.com/248wg


<!-- nav buttons bar -->



<div align="center">
<table border="0" width="87%" id="table2" cellspacing="0" cellpadding="0">

<tr align="center">
<td width="19"></td>

<td width="5" class="vbmenu_control" style="-moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px;"></td>

<td class="vbmenu_control">

<ul id="gooeymenu1" class="underlinemenu">

<li font-weight: bold;"><a href="http://g2anime.net" class="selected">Main Site</a></li>

<li><a href="usercp.php">User CP</a></li>




<li id="gamesmenu">
<a href="/index.php?nojs=1#" rel="nofollow">Games</a>
<script type="text/javascript">
vbmenu_register("gamesmenu");
</script>
</li>


<li>
<a id="community" href="/index.php?nojs=1#community" rel="nofollow" accesskey="6">Community</a>
<script type="text/javascript"> vbmenu_register("community"); </script>
</li>





<li><a href="search.php?do=getnew" accesskey="2"><a href="search.php?do=getnew" style="color:Lime">




New Posts: 20 (In 6 Threads)


</a>







</a></li>


<li><a id="navbar_search" href="search.php" accesskey="4" rel="nofollow">Search</a> <script type="text/javascript"> vbmenu_register("navbar_search"); </script></li>


<li><a id="usercptools" href="/index.php?nojs=1#usercptools" accesskey="3">Quick Links</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></li>


<li><a href="/index.php?nojs=1#" rel="nofollow"><a href="irc.php">Chat</a></li>


<li><a href="login.php?do=logout&amp;logouthash=1308741431-5a6c7c1efb32e907b9853cb7b05525d9dcc38df1" onclick="return log_out('Are you sure you want to log out?')">Log Out</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu1', selectitem:1})
</script>

</td>

<td class="vbmenu_control" style="-moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px;" width="5px"></td>

<td width="17"></td>
</tr>
</table>
</div>
<!-- / nav buttons bar -->




Changed for <li>:


<!-- nav buttons bar -->



<div align="center">
<table border="0" width="87%" id="table2" cellspacing="0" cellpadding="0">

<tr align="center">
<td width="19"></td>

<td width="5" class="vbmenu_control" style="-moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px;"></td>

<td class="vbmenu_control">

<ul id="gooeymenu1" class="underlinemenu">

<li font-weight: bold;"><a href="http://g2anime.net" class="selected">Main Site</a></li>

<li><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></li>

<if condition="$show['registerbutton']">
<li><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></li>
</if>

<if condition="$show['popups']">
<li id="gamesmenu">
<a href="$show[nojs_link]#" rel="nofollow">Games</a>
<script type="text/javascript">
vbmenu_register("gamesmenu");
</script>
</li>
</if>
<if condition="$show['communitylink'] AND $show['popups']">
<li>
<a id="community" href="$show[nojs_link]#community" rel="nofollow" accesskey="6">$vbphrase[community]</a>
<script type="text/javascript"> vbmenu_register("community"); </script>
</li>
<else />

<if condition="$show['memberslist']">
<li><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></li>
</if>

<if condition="$show['quick_links_groups']">
<li><a href="group.php?$session[sessionurl]">$vbphrase[social_groups]</a></li>
</if>
</if>
<if condition="$show['popups']">

<if condition="$show['searchbuttons']">
<if condition="$show['member']">
<li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$cyb_anp</a></li>
<else />
<li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li>
</if>

<li><a id="navbar_search" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></li>
</if>
<if condition="$show['member']">
<li><a id="usercptools" href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></li>
</if>
<else />
<if condition="$show['searchbuttons']">
<li><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></li>
<if condition="$show['member']">
<li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$cyb_anp</a></li>
<else />
<li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li>
</if>
</if>
<li><a href="forumdisplay.php?$session[sessionurl]do=markread&amp;markreadhash=$bbuserinfo[securitytoken]" rel="nofollow">$vbphrase[mark_forums_read]</a></li>
<if condition="$show['member']">
<li><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></li>
</if>
</if>
<li><a href="$show[nojs_link]#" rel="nofollow"><a href="irc.php">Chat</a></li>
$template_hook[navbar_buttons_right]
<if condition="$show['member']">
<li><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></li>
</ul>
<script>
gooeymenu.setup({id:'gooeymenu1', selectitem:1})
</script>

</td>

<td class="vbmenu_control" style="-moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px;" width="5px"></td>
</if>
<td width="17"></td>
</tr>
</table>
</div>
<!-- / nav buttons bar -->