ImNotKibs
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:
<!-- 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&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:
.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 :)
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:
<!-- 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&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:
.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 :)