Results 1 to 3 of 3

Thread: Help with implementing jQuery Gooey Menu into navbar

  1. #1
    Join Date
    Jun 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with implementing jQuery Gooey Menu into navbar

    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
    Code:
    <!-- 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

    Code:
    <!-- 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 >.<

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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...
    DD Admin

  3. #3
    Join Date
    Jun 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

    Code:
    <!-- 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

    Code:
    <!-- 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>:

    Code:
    <!-- 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 -->

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •