Home > CSS, Java Script, JQuery > Google.com like top bar with drop down menu using html css and jQuery

Google.com like top bar with drop down menu using html css and jQuery


Now a days google has a inteligent navigation top bar with drop down menu. I’ll tell you how you can implement it easily.

Some of the features we are going to cover in this tutorial of making Top Menu Bar found in Google products is :

  • Creating the red ribbon like effect for the current page
  • keeping the bar fixed even when the rest of the page is scrolled
  • creating the drop down menu when more button is clicked
  • Styling the elements of the menu exactly to those found on Google

Let’s Look at the code below:

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google top menu example - demo.afriend.in</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/top_menu.js"></script>

<link href="css/google_top_menu.css" rel="stylesheet" type="text/css"/>

</head>

<div id="header"><!-- begin header -->

<div >

                    <div style="float:left;">
                    <ul >
                    <li class=""><!-- for links with no dropdown -->
        <a target="_blank" href="http://plus.google.com">+You</a>
        </li>
        <!-- Using for the link of the current page -->
      <li>
        <a target="_blank" href="http://www.google.co.in/">Web</a>
        </li>
      <li class=""><!-- for links with no dropdown -->
        <a target="_blank" href="http://orkut.com">Orkut</a>
        </li>
      <li class=""><!-- for links with no dropdown -->
        <a target="_blank" href="http://gmail.com">Gmail</a>
        </li>
      <li class=""><!-- for links with no dropdown -->
        <a target="_blank" href="https://www.google.com/calendar">Calendar</a>
        </li>
      <li class=""><!-- for links with no dropdown -->
        <a target="_blank" href="https://docs.google.com">Documents</a>
        </li>
      <li class=""><!-- for links with no dropdown -->
        <a target="_blank" href="http://picasaweb.google.co.in/home">Photos</a>
        </li>
      <li><!-- Do not add any class for links with dropdown -->

        <!-- Drop Down menu Items -->

                        <li style="border-right:0;">
                            <dl>
                               <dt><a class="" href="settings" onClick="return false;">Account<span></span></a></dt>
                                 <dd>
                                        <ul style="right: -1px; left: auto; display: none;">
                                            <li><a href="http://www.google.co.in/reader">Reader</a></li>
            <li><a href="https://sites.google.com">Sites</a></li>
            <li><a href="http://groups.google.co.in">Groups</a></li>
            <li><a href="http://www.youtube.com">YouTube</a></li>
            <li>
            <div>
            </div>
            </li>
            <li><a href="http://www.google.co.in/imghp?hl=en&tab=wi">Images</a></li>
            <li><a href="http://maps.google.co.in/maps?hl=en&tab=wl">Maps</a></li>
            <li><a href="http://translate.google.co.in/">Translate</a></li>
            <li><a href="http://books.google.co.in">Books</a></li>
            <li><a href="http://scholar.google.co.in/">Scholar</a></li>
            <li><a href="http://blogsearch.google.co.in">Blogs</a></li>
            <li>
            <div>
            </div>
            </li>
            <li><a href="http://www.google.co.in/intl/en/options/">even more >></a></li>
            <li>
            <div>
            </div>
            </li>
                                        </ul>
                                 </dd>
                           </dl>
                       </li>

                   </ul>

                    </div>

    </div>

CSS


    @charset "utf-8";
    /* CSS Document */
    *{
        margin:0;
        padding:0;
    }
html{overflow-y:scroll;margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;background-color:#e8e8e8;color:#808080;}
body{font-size: 11px;font-family:"lucida grande",tahoma,verdana,arial,sans-serif;color:#333;line-height:1.28;margin:0;padding:0;text-align:left;direction:ltr;unicode-bidi:embed}
hr
    {
    color: #e9e9e9;
background-color: #e9e9e9;
    }

    div.mainbar{
        top:0;
        z-index: 999;
        padding:0px 10px;
        position:fixed;
        width:100%;
        background:#2D2D2D;
        height:30px;

    }

    ul.mainMenu{
        list-style:none;

    }

    ul.mainMenu li{
        float:left;
        /*border-right:1px solid #bcb6aa;*/
        padding:0px;
    }
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;

padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
    .mainMenu li a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
display:block;
    }
.mainMenu a:hover{
background-color:#676767;
color:#CCCCCC;
}
/*
    .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:#fff;
        line-height:15px;
        text-decoration:none;
    }

    .staticMenu dt a.selected{
        background:white;
        position:relative;
        z-index:99;
        padding-bottom:6px;
        color:#3366cc;
    }

    /* 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:123px;
    }

    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:#3366cc;;
        text-decoration:none;
    }
    .mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}
/*
    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;
    }
    */

Javascript (jQuery)


// JavaScript Document
var SubMenutimer;
    var last_o;

    $(".mainbar").ready(function() {
    //alert('sw');
    //$(this).find(".noti_bubble").hide();

        $(".staticMenu dt a").click(function() {
$(this).parents(".staticMenu").find(".noti_bubble").hide();
            $(".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();
    }

Hope this tutorial helped you,

Categories: CSS, Java Script, JQuery
  1. February 27, 2012 at 4:49 PM

    Look logic to me but how do I implement the barfunction in my wordpress?

  2. February 28, 2012 at 1:42 AM

    Thanks for the information. Really interesting.

  3. rebecca
    May 15, 2012 at 5:36 PM

    body {
    margin:0 auto;
    }

    /*–navigation wrapper–*/
    #navwrapper {
    margin:0 auto;
    background-color: #2D2D2D;
    }

    #nav {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    padding-top:4px;
    }

    #nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: Arial, Helvetica, sans-serif;
    }

    /*–main nav links style–*/
    #nav a {
    display:block;
    padding:7px 7px 7px 7px;
    color:#ccc;
    text-decoration:none;
    }

    #nav a.dmenu {

    }

    #nav a.dmenu:hover {
    color:#3366CC !important;
    background-color: #fff !important;
    }

    #nav li {
    float: left;
    }

    #nav li {position: relative;}

    /* hide from IE, mac */
    #nav li {position: static; width: auto;}
    /* end hiding from IE5 mac */

    /*–drop down menu styling–*/
    #nav li ul {
    position: absolute;
    display: none;
    margin-left:-1px;
    padding-bottom:10px;
    background-color: #FFFFFF;
    border: 1px solid #bbb;
    border-top:none;
    -moz-box-shadow: 0 0 5px #ddd;
    -webkit-box-shadow: 0 0 5px #ddd;
    box-shadow: 0 0 5px #ddd;
    /*–make it top of all the elements on page, so that it can be visible–*/
    z-index:5000;
    }

    #nav li:hover a, #nav a:focus,
    #nav a:active {
    padding:7px 7px 7px 7px;
    color:#fff;
    background:#444;
    text-decoration:none;
    }

    #nav li ul, #nav ul li {
    width: 10em;
    }

    /*–drop down menu styling is different from main nav, strict rule–*/
    #nav ul li a {
    color: #3366CC !important;
    border-right: 0;
    }
    #nav ul li a:hover {
    color:#3366CC !important;
    background-color: #eef3fb !important;
    border-right: 0;
    }

    /*–the selected, current item in the navigation menu–*/
    #nav a.current{
    color:#fff;
    font-weight:bold;
    background:#2D2D2D;
    text-decoration:none;
    border-top:2px solid #C33;
    padding-bottom:5px; /*–removing 2px border from 7px padding–*/
    }

    #nav a.current:hover{
    padding-bottom:5px; /*–removing 2px border from 7px padding–*/
    }

    #nav li:hover ul {
    display: block;
    }

    #nav li:hover ul a{
    color: #000000;
    background-color: transparent;
    }

    #nav ul a:hover {
    background-color: #606060!important;
    color: #FFFFFF !important;
    }

    /*–used in drop down menu items–*/
    .menuseprator{border-bottom:1px solid #ddd; margin:10px 0 10px 0;}

    /*–for showing down arrow in drop down menu item–*/
    .arrowdown{color#eee; font-size:0.5em;}

    /*–for the left navigation menu–*/
    .floatleft{float:left;}

    /*–for the right options navigation menu–*/
    .floatright{float:right;}

    /*–clear all floating, left and right–*/
    .clear{clear:both;}

    More ?

    Translate
    Books
    Schoolar
    Blogs

    Youtube
    Calender
    Photos
    Documents
    Sites
    Groups

    Even More »

  4. rebecca
  1. No trackbacks yet.

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

Follow

Get every new post delivered to your Inbox.

Join 65 other followers

%d bloggers like this: