CSS menu

[jaxdoug2]

I made a menu using strictly css. You can view it in these screens or if you visit my site, use the quick theme at the botom to view it, I have it named "new default theme". Let me know if you are interested in the menu, I'll share the code.


jaxdoug

[FirefoxWiz]

Share it please. I like it!!

[jaxdoug2]

HEADER:

<a name="top" id="top"></a>
	<div id="container">
<div id="panel">
{$welcomeblock}
			</div>
		<div id="header">
			<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a></div></div>
			
<div id="container2">
<div id="menu">

<ul id="item1">
<li class="top">Board Menu</li>
<li class="item"><a href="index.php">Home</a></li>
<li class="item"><a href="search.php">Search</a></li>
<li class="item"><a href="calendar.php">Calendar</a></li>
<li class="item"><a href="misc.php?action=help">Help</a></li>

</ul>

<ul id="item2">
<li class="top">Links</li>
<li class="item"><a href="#">menu item 1</a></li>

</ul>

<ul id="item3">
<li class="top">Quick Menu</li>
<li class="item"><a href="search.php?action=getnew">New Posts</a></li>
<li class="item"><a href="search.php?action=getdaily">Todays Posts</a></li>
<li class="item"><a href="private.php">Messages</a></li>
<li class="item"><a href="usercp.php">User CP</a></li>
<li class="item"><a href="{$mybb->settings['bburl']}/member.php?action=logout&uid={$mybb->user['uid']}&sid={$session->sid}">Log Out</a></li>
<li class="item"><a href="online.php">Who's Online</a></li>
<li class="item"><a href="member.php?action=register">Register</a></li>
<li class="item"><a href="member.php?action=login">Log In</a></li>
</ul>

<ul id="item4">
<li class="top">MyBB Sites</li>
<li class="item"><a href="#">menu item 1</a></li>
<li class="item"><a href="#">menu item 2</a></li>

<li class="item"><a href="#">menu item 3</a></li>
<li class="item"><a href="#">menu item 4</a></li>
</ul>

</div>
<div class="clear"></div>
<hr class="hidden" />
			<div id="panel">

			</div>

		</div>
<hr class="hidden" />
		<br class="clear" />
		<div id="content">
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			<navigation>
			<br class="clear" />

PUT IN ADDITIONAL CSS:

#container2{width:500px;margin:auto;font-size:10pt;text-align: center;}

#menu{position:absolute;margin-top:10px;}
#menu ul .item{display:none;}
#menu ul:hover .item{display:block;background:#ADCBE7;padding:1px;margin:1px;}

#menu ul:hover .item a{color:#fff;text-decoration:none;}
#menu ul:hover .item a:hover{color:#999;}

#menu ul{width:100px;float: left; margin:10px;padding:2px;background:#025890 url(images/thead_bg.gif);list-style:none; color:#FFFFFF}
.clear{clear:both;height:10px;}

Add as many menu items as you want, change colors and font size using css...

You might want to increase the padding from 8px to 10px for the Welcome block in your edit theme section. Pretty simple stuff actually. EDIT: New code for the Header, now includes, welcome block at top of theme.

Thanks,

jaxdoug

[FirefoxWiz]

Neato, Doug. Thanks a bunch for the code!!

I will save it for future reference.

[Bless]

Great job joug , got a demo?

[FirefoxWiz]

Great job joug , got a demo?

if you visit my site, use the quick theme at the botom to view it, I have it named "new default theme"

[xScopex]

Thats pretty cool, good job.