The Arcive of Official vBulletin Modifications Site.

ImNotKibs · #1 02-23-2011, 07:24 PM

Oh hai, Mark.

I've been fidgeting with this navbar for a day or so now.

It's basically something written for wordpress that I've re purposed to get to work with VB.

However, there are a few fundamental problems with it:

1. The leftmost submenu is not aligning properly, even with a margin of -40px
2. One sub-submenu isn't working, and that's the 1st, Forums, the second does work, however, the IRC
-I've had other sub-submenus in, that also don't show up, they also went missing along with their parents
3. Internet F#$%ing Explorer

An actual working example of the code can be found at: http://918thefan.com/

My attempted reproduction can be found at: http://918thefan.com/forums/

Here's the code (full header):

HTML:

Code:

<!-- header -->

<!-- <script type="text/javascript"> sitePath = "http://918thefan.com/wp-content/plugins/let-it-snow/"; </script>
<script type="text/javascript" src="http://918thefan.com/wp-content/plugins/let-it-snow/snowstorm.js"></script> -->


<table width="950" border="0" align="center" cellpadding="0" cellspacing="0" class="wrapper" style="height:100%;">
    <tr>
        <td class="headerwrap">
            <table width="950" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="top">

                        <!-- advertisement -->
                            <a href="http://www.durararausa.com/" style="float:left; border:0;"><img src="http://918thefan.com/images/durarara.gif" /></a>
                        <!-- / advertisement -->

                        <table width="950" border="0" cellpadding="0" cellspacing="0" class="headerwrap2">
                            <tr>
                                <td>
                                    <!-- Brie/Speech/PM -->
                                        <div class="brie"><!-- --></div>
                                        <div class="speech"><!-- --></div>
                                        <if condition="$show['member']">
                                            <div class="smallfont_welcome">
                                                <strong><phrase 1="$bbuserinfo[username]">$vbphrase[welcome_x]</phrase></strong><if condition="$show['pmstats']"><br /><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></if><br />		
                                                <script type="text/javascript" src="http://918thefan.com/forums/brie.js"></script>
                                            </div>
                                        <else />
                                            <div class="smallfont_guest">
                                                <strong>Welcome, Guest</strong>
                                                <br />
                                                It seems you're not logged in
                                                <br />
                                                You can do that <a href="http://918thefan.com/forums/usercp.php">Here</a>
                                                <br />
                                                Or <a href="http://918thefan.com/forums/register.php">Register</a>
	                                        </div>
										</if>

                                    <!-- / Brie/Speech/PM -->

                                    <!-- Header Image -->

                                        <!-- <div class="snowtop"><img src="http://918thefan.com/images/snowtop.png" /></div> -->
                                        <a href="http://918thefan.com"><img src="images/918thefan/headerblue.png" alt="91.8 The Fan" width="950" height="223" border="0" style="margin-top:-1px;z-index:-1;" /></a>

                                    <!-- / Header Image -->
                                </td>
                            </tr>
                        </table> 
                    </td>     
                </tr>   
            </table>
        </td>  
    </tr>


        <!-- navbar -->		


    <tr>
	    <td>
            <div id="navigation">
                <ul id="menu">
                    <li class="page_item_left"><a href="http://918thefan.com/">Home</a>
                        <ul class="children">
                            <li class="page_item">
                                <a href="http://918thefan.com/home/about/">About</a>
                            </li>
                            <li class="page_item">
                                <a href="http://918thefan.com/home/volunteer/">Join Us</a>
                            </li>
                            <li class="page_item">
                                <a href="http://918thefan.com/home/faq/">FAQ</a>
                            </li>
                            <li class="page_item">
                                <a href="http://918thefan.com/home/advertise/">Advertise</a>
                            </li>
                        </ul>
                    </li>

                    <li class="page_item"><a href="http://918thefan.com/radio/">Radio</a>
						<ul class="children">
						    <li class="page_item">
							    <a href="http://918thefan.com/radio/playlist/">Playlist</a>
							</li>
						</ul>
                    </li>


                    <li class="page_item"><a href="http://918thefan.com/forums">Community</a>
                        <ul class="children">
                            <li class="page_item"><a href="http://918thefan.com/forums">Forums</a>
                                <ul class="children">
                                    <if condition="$show['member']">
                                        <li class="page_item">
                                            <a href="http://918thefan.com/forums/usercp.php">User CP</a>
                                        </li>
                                        <li class="page_item">
                                            <a href="http://918thefan.com/forums/faq.php">Rules</a>
                                        </li>
                                        <li class="page_item">
                                            <a href="http://918thefan.com/forums/group.php">Fanclubs</a>
                                        </li>
                                        <li class="page_item">
                                            <a href="http://918thefan.com/forums/calendar.php">Calendar</a>
                                        </li>
                                        <li class="page_item">
                                            <a href="http://918thefan.com/forums/search.php">Search</a>
                                        </li>
                                        <li class="page_item">
                                            <a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]"  onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">Log Out</a>
                                        </li>
                                    <else />
                                        <li class="page_item">
                                            <a href="http://918thefan.com/forums/register.php">Register</a>
                                        </li>
                                        <li class="page_item">
                                            <a href="http://918thefan.com/forums/usercp.php">Log In</a>
                                        </li>
                                    </if>
                                </ul>
                            </li>
                        </ul>
	
                        <ul class="children">
                            <li class="page_item"><a href="http://918thefan.com/forums/chat.php">IRC Chat</a>
                                <ul class="children">
                                    <li class="page_item">
        		                        <a href="http://918thefan.com/irc-chat/irc-faq/">IRC FAQ</a>
			                     	</li>
                                    <li class="page_item">
			                     	    <a href="http://918thefan.com/irc-chat/irc-rules/">IRC Rules</a>
		                    		</li>
		                    	</ul>
                            </li>
                        </ul>
                  	</li>

                    <li class="page_item">
	                    <a href="http://918thefan.com/vip-section/">VIP Section</a>
	                </li>

                    <li class="page_item"><a href="http://918thefan.com/store/">Store</a>
                        <ul class='children'>
                            <li class="page_item">
			                    <a href="http://sharkrobot.com/91-8-the-fan/">Apparel</a>
		                    </li>
                            <li class="page_item">
			                    <a href="http://www.zazzle.com/918thefan/">Buttons</a>
		                  	</li>
                            <li class="page_item">
		                 	    <a href="http://918thefan.com/vip-area/">Fanatics</a>
			                </li>  
		                </ul>	  
	                </li>
                </ul>
            </div>
        </td>
    </tr>

    	<!-- / navbar -->

</table>
<!-- / header -->

<!-- content table -->
$spacer_open
$_phpinclude_output

CSS:

Code:

.navbits
    {
	    background-color:#EFFAFF;
		color:#000000;
		font-weight:bold;
		font-face:arial;
		line-height:10px;
		border-radius:10px;
		-moz-border-radius:10px;
		color:#000000;
		!important
	}

#navback
    {
	    background-color:#000000; 
		border:none; 
		height:38px; 
		background-repeat: repeat-x; 
		font-weight:bold; 
		text-align:center; 
		text-transform:uppercase;
	}

.nav_item a:link, .nav_item a:visited{color: #fff; line-height:38px; font-weight:bold; border-right:1px solid #333; text-align:center; display:block; text-transform:uppercase;}
.nav_item a:hover {font-weight:bold; line-height:38px;  background-image:url('http://918thefan.com/wp-content/themes/91.8%20The%20Fan/images/menu_hover.gif'); font-weight:bold; repeat-x; color:#000; text-transform:uppercase; text-align:center; display:block;}
.logout a:link, .logout a:visited, .logout a:hover, .logout a:active{color:#333333;font-weight:bold;font-family:arial;font-size:12px; !important}
.rss a, .rss a:hover, .rss a:visited, .rss a:active{text-decoration:none;border:0;!important}

#navigation
    {
	    height:38px; 
		background-color:#000;
		margin-top:-16px;
	}
#menu li
    {
	    display:inline; 
		float:left; 
		font-size:14px; 
		text-transform:uppercase; 
		font-weight:bold; 
		letter-spacing:-1px;
	}

.page_item a:link, .page_item a:visited{color: #fff; display:block; line-height:38px; padding:0 20px 0 20px; border-right:1px solid #333;}
.page_item a:hover { display:block; line-height:38px; padding:0 20px 0 20px; background:url(http://918thefan.com/wp-content/themes/91.8%20The%20Fan/images/menu_hover.gif) repeat-x; color:#000;}
.page_item_left a:link, .page_item_left a:visited{color: #fff; display:block; line-height:38px; padding:0 20px 0 20px; border-right:1px solid #333;margin-left:-40px;}
.page_item_left a:hover { display:block; line-height:38px; padding:0 20px 0 20px; background:url(http://918thefan.com/wp-content/themes/91.8%20The%20Fan/images/menu_hover.gif) repeat-x; color:#000;margin-left:-40px;}
.page_item_active a:link, .page_item_active a:visited{ display:block; line-height:38px; padding:0 20px 0 20px; background:url(http://918thefan.com/wp-content/themes/91.8%20The%20Fan/images/menu_hover.gif) repeat-x; color:#000;}

ol.commentlist li ul.children{}
ol.commentlist li ul.children li{background:#fff;border:1px solid #e9e9e9;margin:5px 0 0 0;}
.children_left {background:#fff;border:1px solid #e9e9e9;margin:5px 0 0 -40px;}
ol.commentlist li ul.children li li.alt{background:#eee;}
ol.commentlist li ul.children_left li li.alt{background:#eee;margin-left:-40px;}
ol.commentlist li ul.children li.bypostauthor{}
ol.commentlist li ul.children li.byuser{}
ol.commentlist li ul.children li.comment{}
ol.commentlist li ul.children li.comment-author-admin{}
ol.commentlist li ul.children li.depth-2{}
ol.commentlist li ul.children li.depth-3{}
ol.commentlist li ul.children li.depth-4{}
ol.commentlist li ul.children li.depth-5{}
ol.commentlist li ul.children li.odd{}

#menu li li a, #menu li li a:link, #menu li li a:visited {opacity: .99;filter: alpha(opacity=99);background: #0d172e;width: 130px;color: #fff;float: none;margin: 0;padding: 0px 12px 0px 12px;border-bottom: 1px solid #333;}
#menu li li a:hover, #menu li li a:active {background: url(http://918thefan.com/wp-content/themes/91.8%20The%20Fan/images/menu_hover.gif) repeat-x;color: #000;}
#menu li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 155px;margin: 0;padding: 0;}
#menu li li {border:none;}
#menu li ul a {width: 120px;}
#menu li ul a:hover, #menu li ul a:active {}
#menu li ul ul {margin: -39px 0 0 152px;border: none;}
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {left: -999em;}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {left: auto;}
#menu li:hover, #menu li.sfhover {position: static;}

I've basically not worked with code for 6 months, and I'm so rusty my fingers are falling apart, so I'd appreciate any help anyone can offer, and would gladly return it with kittens and fluff

kh99 · #2 02-25-2011, 04:52 PM

I'm not really an HTML or CSS person, but did you maybe try taking it out of the table? I'm not sure if it will matter, but it's not in a table on the page that works. It looks like you could just put the </table> before the <div id="navigation"> and take out the extra <tr> and <td> tags.

ImNotKibs · #3 02-25-2011, 07:29 PM

Well that fixed fudging internet explorer's issue.

The main issue of things simply not showing up still persists, though. However, many thanks.

kh99 · #4 02-25-2011, 08:48 PM

OK, I might have figured out your disappearing 'Forums' issue - there seems to be an extra <ul class=children> inside the Community menu. 'Forums' is inside one, and 'IRC' is insde another one, but I think they should be inside the same <ul> tag.

ImNotKibs · #5 02-25-2011, 10:04 PM

I fixed it.

^ You were right on the spot, I didn't even think about that, as for getting everything aligned correctly, it was just a matter of letting the main menu be and let it be 40 pixels to the right, then adding a second div and putting the margin-left for that to -40px.

Everything is fine, and went better than expected.

Code for those curious

Code:

<!-- navbar -->		
<div id="navigation">
<div id="navigation_fix">
<ul id="menu">
    <li class="page_item"><a href="http://918thefan.com">Home</a>
        <ul class="children">
            <li class="page_item">
                <a href="http://918thefan.com/home/about/">About</a>
            </li>
            <li class="page_item">
                <a href="http://918thefan.com/home/volunteer/">Join Us</a>
            </li>
            <li class="page_item">
                <a href="http://918thefan.com/home/faq/">FAQ</a>
            </li>
            <li class="page_item">
                <a href="http://918thefan.com/home/advertise/">Advertise</a>
            </li>
        </ul>
    </li>

    <li class="page_item"><a href="http://918thefan.com/radio/">Radio</a>
	    <ul class="children">
		    <li class="page_item">
			    <a href="http://918thefan.com/radio/playlist/">Playlist</a>
			</li>
		</ul>
    </li>


    <li class="page_item_active"><a href="http://918thefan.com/forums">Community</a>
        <ul class="children">
            <li class="page_item_active"><a href="http://918thefan.com/forums/">Forums</a>
                <ul class="children">
                    <if condition="$show['member']">
                        <li class="page_item">
                            <a href="http://918thefan.com/forums/usercp.php">User CP</a>
                        </li>
                        <li class="page_item">
                            <a href="http://918thefan.com/forums/faq.php">Rules</a>
                        </li>
                        <li class="page_item">
                            <a href="http://918thefan.com/forums/group.php">Fanclubs</a>
                        </li>
                        <li class="page_item">
                            <a href="http://918thefan.com/forums/calendar.php">Calendar</a>
                        </li>
                        <li class="page_item">
                            <a href="http://918thefan.com/forums/search.php">Search</a>
                        </li>
                        <li class="page_item">
                            <a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]"  onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">Log Out</a>
                        </li>
                    <else />
                        <li class="page_item">
                            <a href="http://918thefan.com/forums/register.php">Register</a>
                        </li>
                        <li class="page_item">
                            <a href="http://918thefan.com/forums/usercp.php">Log In</a>
                        </li>
                    </if>
                </ul>
            </li>
        
	

            <li class="page_item"><a href="http://918thefan.com/forums/chat.php">IRC</a>
                <ul class="children">
                    <li class="page_item">
					    <a href="http://918thefan.com/irc-chat/irc-faq/">IRC FAQ</a>
					</li>
                    <li class="page_item">
					    <a href="http://918thefan.com/irc-chat/irc-rules/">IRC Rules</a>
					</li>
				</ul>
            </li>
        </ul>
	</li>

    <li class="page_item">
	    <a href="http://918thefan.com/vip-section/">VIP Section</a>
	</li>

    <li class="page_item"><a href="http://918thefan.com/store/">Store</a>
        <ul class='children'>
            <li class="page_item">
			    <a href="http://sharkrobot.com/918thefan/">Apparel</a>
		    </li>
            <li class="page_item">
			    <a href="http://zazzle.com/918thefan/">Buttons</a>
			</li>
            <li class="page_item">
                <a href="http://918thefan.com/vip-area/">Fanatics</a>
			    <ul class="children">
                    <li class="page_item">
			            <a href="http://918thefan.com/forums/payments.php">Renew</a>
			        </li>
			        <li class="page_item">
	                    <a href="http://918thefan.com/custom-forum-usernames/">Usernames</a>
	                </li>
                    <li class="page_item">
	                    <a href="http://918thefan.com/forums/showthread.php?t=334">Music Priority</a>
	                </li>
                </ul>
			</li>  
		</ul>	  
	</li>
</ul>
</div>
</div>

<!-- / navbar -->

CSS remains the same except for a single ID added with a margin of -40px

Issue is resolved allow me to celebrate:
http://www.youtube.com/watch?v=T9rJLtz64Hg

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04165 seconds Memory Usage 2,236KB Queries Executed 11 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)ad_showthread_firstpost (1)ad_showthread_firstpost_sig (1)ad_showthread_firstpost_start (3)bbcode_code (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)navbar (3)navbar_link (120)option (5)post_thanks_box (5)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (5)post_thanks_postbit_info (5)postbit (5)postbit_onlinestatus (5)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end fetch_musername postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!