CSS, Javascript, JQuery

Facebook style top bar/ bottom bar navigation thing

I said some while ago now I would post a more elegent version of the facebook drop down JQuery…Well here it is. It works per menu item. It can work from the container div only but I wanted it this way it made ore sense for me. Sorry I didn’t post this earlier I am so busy lately.

The Javascript:

var SubMenutimer;
var last_o;

$(".mainbar").ready(function() {
	$(".staticMenu dt a").click(function() {
		
		$(".staticMenu dd ul").not($(this).parents(".staticMenu").find("ul")).hide();
		$(".staticMenu dt a").not($(this)).removeClass("selected");
		$(this).parents(".staticMenu").find("ul").toggle();
		
		if($(this).parents(".staticMenu").find("ul").css("display") == "none"){
			$(this).removeClass("selected");		
		}else{
			$(this).addClass("selected");		
		}
								   
	});

	$(".staticMenu dd ul li a").click(function() {
		var text = $(this).html();
		$(".staticMenu dt a span").html(text);
		$(".staticMenu dd ul").hide();
	}); 

	$(document).bind('click', function(e) {
		var $clicked = $(e.target);
		if (! $clicked.parents().hasClass("staticMenu")){
			$(".staticMenu dd ul").hide();
			$(".staticMenu dt a").removeClass("selected");	
		}
	
	});						 
});

function openSubMenu(o){
	cancelSubMenuClose();

	if(last_o) $(last_o).parent().find("div").hide();

	last_o = o;
	$(o).parent().find("div").show();
}

function closeSubMenu(){
	SubMenutimer = setTimeout("close()",500);
}

function cancelSubMenuClose(){
	clearTimeout(SubMenutimer);	
}

function close(){
	$(last_o).parent().find("div").hide();
}

The css:

@charset "utf-8";
/* CSS Document */

div.mainbar{
	top:0; 
	z-index:99;
	padding:0;
	position:fixed;
	width:100%;	
}

div.mainbarInner{
	background:url(/images/pre_top.png);
	border:1px solid #bcb6aa;
	border-top:0;
	border-bottom:0;
	margin:0 15px;
}

ul.mainMenu{
	list-style:none;
	
}

ul.mainMenu li{
	float:left;
	border-right:1px solid #bcb6aa;
}

.mainMenu li a{
	padding:5px 4px 5px 4px;
	margin-bottom:1px;
	display:block;
	font-weight:bold;
	color:#444444;
	line-height:15px;	
	text-decoration:none;
}

.mainMenu li a:hover{
	background:white;
	text-decoration:none;
}


.staticMenu dl{ }
.staticMenu dd { position:relative; }

/* DT styles for sliding doors */
.staticMenu dt a {	
	padding:5px 4px 5px 4px;
	margin-bottom:1px;
	display:block;
	font-weight:bold;
	color:#444444;
	line-height:15px;	
	text-decoration:none;
}
		
.staticMenu dt a.selected{
	background:white;
	position:relative;
	z-index:99;
	padding-bottom:6px;
}

/* UL styles */
.staticMenu dd ul { 
	display:none;
    list-style:none; 
	position:absolute; 
    cursor:pointer;
}
	
ul.mainMenuSub{
	position:absolute;
	top:-2px;
	left:-1px;
	padding:2px;
	border:1px solid #b4a291;
	background: white;
}

ul.mainMenuSub li{
	border:0;
	width:223px;	
}

ul.mainMenuSub li.seperator{
	width:223px;
	height:2px;
	display:block;
	background:url(/images/mainmenusep.png) repeat-x;
	margin-bottom:6px;
	margin-top:4px;
	overflow:visible;
}

ul.mainMenuSub li a:link{
	display:block; 
	font-weight:bold;
	text-align:left;
	overflow:hidden;
	padding:2px 4px 3px 19px; 
	color:#444444; 
	text-decoration:none;
}

ul.mainMenuSub li a:hover{
	background:#444444;
	color:white;
	text-decoration:none;
}

ul.mainMenuSub li a img{

	border:0;
}

ul.mainMenuSmall li{
	width:173px;
}

div.mainMenuSubTwo{
	display:none;
	left:220px; 
	position:absolute;
	top:3px;
	z-index:99;
	background:white;
}


div.mainMenuSubTwo ul{
	border:1px solid #b4a291;
	padding:2px;
	background:white;
}

a.MainSubExpandable{
	background:white url(/images/mainmenuexpandable.png) no-repeat right top;

}

ul.mainMenuSub li a.MainSubExpandable:hover{
	background:#444444 url(/images/mainmenuexpandable.png) no-repeat;
	background-position:right -20px;
}

Some sample html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="content-language" content="en"/>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		
		<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen, projection"/>
		<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen, projection"/>
		<link rel="stylesheet" href="/css/presence_bar.css" type="text/css" media="screen, projection"/>
		
		<script type="text/javascript" src="/js/jquery.js"></script>
		<script type="text/javascript" src="/js/presence_bar.js"></script>
	
	</head>
	
	<body>	
<div class="mainbar">
	<div class="mainbarInner" style="overflow:visible; position:relative; display:block; height:26px;">
				<ul class="mainMenu">
                	<li>
                        <dl style="" class="staticMenu">
                            <dt><a href="/applications" onclick="return false;">Applications</a></dt>
                            <dd>
                                <ul class="mainMenuSub">
                                    <li><a>There are no applications here</a></li>
                                </ul>
                            </dd>
                        </dl>
            		</li>             
                    <li>
                        <dl style="" class="staticMenu">
                            <dt><a href="/places" onclick="return false;">Places</a></dt>
                            <dd>
                                <ul class="mainMenuSub">
                                    <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Library</a> 

                                        <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        	<ul>
                                        		<li><a href="#">Videos</a></li>
                                        		<li><a href="#">Favourites</a></li>                                                
                                            	<li><a href="#">Playlists</a></li>
                                            	<li><a href="#">Subscriptions</a></li>
                                            </ul>
                                       	</div>
									</li>
                                    <li class="seperator"><!-- --></li>                               
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Networks</a></li>                                       
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Groups</a></li>                                    
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Friends</a></li>                                    
                                    <li class="seperator"><!-- --></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Inbox</a></li> 
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Channel</a></li>                                   
                                </ul>
                            </dd>
                        </dl>                    
                    </li>
                    <li>
                        <dl style="" class="staticMenu">
                            <dt><a href="/settings" onclick="return false;">Settings</a></dt>
                            <dd>
                                <ul class="mainMenuSub">
                                    <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Preferences</a>
                                        <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        	<ul>
                                        		<li><a href="#">About Me</a></li>
                                        		<li><a href="#">Appearence</a></li>  
                                                <li><a href="#">Main Menu</a></li>                                              
                                            	<li><a href="#">Privacy</a></li>
                                            	<li><a href="#">Notifications</a></li>
                                            	<li><a href="#">Adverts</a></li>  
                                            	<li><a href="#">Safe Search</a></li>                                                                                                
                                            </ul>
                                       	</div>                                    
                                    </li>
                                    <li><a href="javascript:;" onmouseover="openSubMenu(this)" class="MainSubExpandable" onmouseout="closeSubMenu(this)" style="cursor:pointer;">Administration</a>
                                        <div class="mainMenuSubTwo" id="subMenuMainLib" onmouseover="cancelSubMenuClose()" onmouseout="closeSubMenu(this)">
                                        	<ul>
                                        		<li><a href="#">Block List</a></li>
                                        		<li><a href="#">Parental Controls</a></li>                                                
                                            	<li><a href="#">Email Options</a></li>
                                            	<li><a href="#">Username</a></li>
                                            	<li><a href="#">Password</a></li>  
                                            	<li><a href="#">Payments</a></li>                                                
                                            	<li><a href="#">Linked Accounts</a></li>                                                                                                
                                            	<li><a href="#">Security Question</a></li>                                                                                                                                                
                                            	<li><a href="#">Deactivate Account</a></li>                                                                                                                                                
                                            </ul>
                                       	</div>                                      
                                    </li>
                                    <li class="seperator"><!-- --></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Help Center</a></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">About StageX</a></li>                                 
                                    <li class="seperator"><!-- --></li>
                                    <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Developers</a></li>                                                                           
                                </ul>
                            </dd>
                        </dl> 
                     </li>                    
                </ul>
                <div style='float:right;'>
                <ul class="mainMenu" style="float:right;">
                	<li style="border-right:0;">
                        <dl class="staticMenu">
                           <dt><a href="/settings" onclick="return false;">Sam</a></dt>
                             <dd>
                                    <ul class="mainMenuSub" style="right:-1px; left:auto;">
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="A" style="cursor:pointer;">Available</a></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Busy</a></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Away</a></li>  
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="F" style="cursor:pointer;">Appear Offline</a></li>                                                                                
                                        <li class="seperator"><!-- --></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Log out</a></li>
                                        <li><a href="javascript:;" class="dropdownglobalchange" id="M" style="cursor:pointer;">Switch User</a></li>                                 
                                    </ul>
                             </dd>
                       </dl>  
                   </li>
               </ul>               
                	<div class="notificationArea" style='float:right;'>
                    	Notification Icons
                    </div>                    
                </div>
	</div>
</div>
</body>
</html>

3 thoughts on “Facebook style top bar/ bottom bar navigation thing

  1. Um, the link shows only:

    Videos Channels Community
    sam.millman@googlemail.com | My Library | Settings | Help | Logout
    cheese

    Logout array(6) { [“logged”]=> bool(true) [“uid”]=> string(24) “4c9f8ed96803faaa211d0000” [“server_key”]=> string(24) “uyeiTFFRUVE7QSk+PVBcLVs=” [“AUTH_TIER2”]=> bool(true) [“email”]=> string(26) “sam.millman@googlemail.com” [“form_hash”]=> string(32) “690a0a28628d9f78d0b35da4e1e3658c” } 4ca227bb6803faef03040000

    1. Oops yeah sorry I reformatted the server recently to try something and now everything has changed. I forgot that all my wordpress links no longer work.

      I’ll try and get the examples back up and working asap.

      Thanks for reminding me 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s