Coming Soon - Premium WordPress Theme Giveaway To All Our Email Subscribers

Creating The New Top Black Menu Bar Found in Google Search and all its Products


Google has come up with a new look with the launch of Google Plus and one of the prominent changes we can observe is the black menu bar found on the top of Google Search Page and every other Google product like Google Plus(obviously),  Google reader, etc. Almost every Google product by now has been integrated with the top black menu bar.

Introducing this menu bar looks like a  move by Google to integrate Google Plus with all other Google products.

I thought it would be a great idea to make a tutorial on how to create this black menu bar using simple jQuery and CSS.

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
  • creating the drop down menu when more button is clicked
  • keeping the bar fixed even when the rest of the page is scrolled
  • Styling the elements of the menu exactly to those found on Google

    Creating the top menu bar found in Google Plus tutorial

    Top Menu Bar Found in Google+

I think the adjacent picture better describes the outcome of this tutorial
Check out the live demo and download the source code below:

Download Source Code

DOWNLOAD

Live Demo

LIVE DEMO

Want to know how this works, then look at the code below:


HTML


Source Code Of index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Creating Google Plus Top Black Menu Bar Live Demo | http://blog.geotitles.com</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.google_menu.js"></script>
<link rel="stylesheet" type="text/css" href="google_menu.css"/>
<script>
        $('document').ready(function(){
            $('.menu').fixedMenu();
        });
        </script>
</head>
<body>
<div class="menu">
	<ul>
	  <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
		<a target="_blank" href="http://plus.google.com">+You</a>
		</li>
        <!-- Using class="current" for the link of the current page -->
      <li class="current">
		<a target="_blank" href="http://www.google.co.in/">Web</a>
		</li>
	  <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
		<a target="_blank" href="http://orkut.com">Orkut</a>
		</li>
	  <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
		<a target="_blank" href="http://gmail.com">Gmail</a>
		</li>
	  <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
		<a target="_blank" href="https://www.google.com/calendar">Calendar</a>
		</li>
	  <li class="single-link"><!-- Using class="single-link" for links with no dropdown -->
		<a target="_blank" href="https://docs.google.com">Documents</a>
		</li>
	  <li class="single-link"><!-- Using class="single-link" 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 -->
		<a href="#">More<span class="arrow"></span></a>
        <!-- Drop Down menu Items -->
<ul>
			<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 class="mid-line">
			</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 class="mid-line">
			</div>
			</li>
			<li><a href="http://www.google.co.in/intl/en/options/">even more >></a></li>
			<li>
			<div class="mid-line">
			</div>
			</li>
		</ul>
		</li>
	</ul>
</div>
<div align="center">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <h2>THIS IS THE LIVE DEMO OF CREATING GOOGLE LIKE TOP BLACK MENU BAR TUTORIAL AT <a href="http://blog.geotitles.com">HITHERTO WEB LABS</a></h2>
<h2>&nbsp;</h2>
  <h2>CLICK HERE TO GO TO THE TUTORIAL LINK TO DOWNLOAD THE SOURCE CODE</h2>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp; </p>
</div>
</body>
</html>

CSS


Source Code Of google_menu.css

body{
padding:0;
margin:0;
}
.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}
.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}
.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}
.menu ul{
list-style:none;
margin:0;
padding:0 0 0 10px;
}
.menu ul li{
padding:0;
float:left;
}
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
}
.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;
/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
   -moz-box-shadow:0 1px 5px #CCCCCC;
        box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}
.active ul{
display:block !important;
}
.single ul{
display:block !important;
}
.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;
/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
   -moz-box-shadow:0 -1px 5px #CCCCCC;
        box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}
/*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;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}
.active a:hover{
background-color:white;
color:#3366CC;
}
.active ul a:hover{
background-color:#e4ebf8;
}
.active ul a{
border:0 !important;
/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
   -moz-box-shadow:0 0 0 #CCCCCC;
        box-shadow:0 0 0 #CCCCCC;
border:0;
width:100%;
}
.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}
.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}

Javascript


Source Code Of jquery.google_menu.js

$(function ($) {
    $.fn.fixedMenu = function () {
        return this.each(function () {
            var menu = $(this);
            //close dropdown when clicked anywhere else on the document
            $("html").click(function () {
                menu.find('.active').removeClass('active');
            });
            menu.find('ul li > a').bind('click', function (event) {
                event.stopPropagation();
                //check whether the particular link has a dropdown
                if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
                    //hiding drop down menu when it is clicked again
                    if ($(this).parent().hasClass('active')) {
                        $(this).parent().removeClass('active');
                    } else {
                        //displaying the drop down menu
                        $(this).parent().parent().find('.active').removeClass('active');
                        $(this).parent().addClass('active');
                    }
                } else {
                    //hiding the drop down menu when some other link is clicked
                    $(this).parent().parent().find('.active').removeClass('active');

                }
            })
        });
    }
})(jQuery);

Hope this tutorial helped you, next week we will be back with another interesting tutorial, until then stay updated with our blog by:

Want to request a new tutorial, then please Contact me right-away.

I promise to respond to everyone who contacts asking for support or new tutorials.

VN:F [1.9.22_1171]
Rating: 5.0/5 (10 votes cast)
Creating The New Top Black Menu Bar Found in Google Search and all its Products, 5.0 out of 5 based on 10 ratings

Related posts:

, , , , , , , , , , , , , , , , , , ,

  1. #1 by Leigh Yballe on September 26, 2011 - 1:42 pm

    Just wanna input that you have a very nice internet site , I enjoy the pattern it really stands out.

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
  2. #2 by Annalee Lorincz on September 29, 2011 - 12:23 pm

    Pretty nice post. I just stumbled upon your blog and wanted to say that I’ve truly enjoyed surfing around your blog posts. After all I’ll be subscribing to your rss feed and I hope you write again very soon!

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
  3. #3 by indezoo on October 9, 2011 - 12:46 pm

    this is really awesome…was looking for this one..thank you for sharing

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
  4. #5 by Thiago on October 10, 2011 - 2:32 am

    Hey! This is really cool! A great work, for sure!
    But i want to know something…
    how can i hide the dropdown menu clicking by document.body or using the mouseout event? is it possible?

    Thanks for the tutorial! Awesome!

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    • #6 by Praveen Gowda I V on October 10, 2011 - 6:42 pm

      Infact even I realized that the only thing that puts this tutorial apart from the Google bar found in Google is that the dropdown does not close when you click anywhere outside the menu

      But alternatively you can hide the dropdown by clicking on the more button one more time which could close the drop down

      you can also use the

      $(document.body).bind('click',function()

      to hide the menu

      But clicking on the more button to toggle the dropdown is a better option if you are not good at programming

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (2 votes cast)
      • #7 by Thiago on October 10, 2011 - 8:41 pm

        Hello again Praveen! Thanks for the explanation! I’m starting at jquery, then i’m trying to learn more and more! Your tutorial is very good for everyone that wants to learn more about css and jquery. Well, keep doing a great work! As I said before, you’re awesome!

        Thanks again!

        VA:F [1.9.22_1171]
        Rating: 5.0/5 (1 vote cast)
        • #8 by Praveen Gowda I V on October 11, 2011 - 12:05 pm

          Thanks for the appreciation, if you ever want to request a tutorial, don’t hesitate to leave a comment or Contact Me
          Also stay updated with all the tutorials be subscribing to our email feeds

          VN:F [1.9.22_1171]
          Rating: 4.0/5 (3 votes cast)
  5. #9 by Tristan Prichett on October 14, 2011 - 12:04 am

    Enjoyed examining this, very good stuff, regards .

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
  6. #10 by Thiago on October 18, 2011 - 6:35 pm

    Well… I tried to create the document.body effect, but I had a bug on the source. When I click on body, the code creates a conflict on dropdown and document.body. Nothing happens. Praveen, can you help me to create the effect that closes the dropdown clicking anywhere on the document?

    Thanks!

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    • #11 by Praveen Gowda I V on October 19, 2011 - 1:33 pm

      Thiago it is my pleasure to help you

      Could you please reply with the JavaScript code you used so that I can help you solve out the problem. :)

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (1 vote cast)
      • #12 by Thiago on October 20, 2011 - 4:33 pm

        As you wish, here it is!

        (function ($) {
          $.fn.fixedMenu = function () {
            return this.each(function () {
              var menu = $(this);
              menu.find('ul li &gt; a').bind('click', function () {
                //check whether the particular link has a dropdown
                if (!$(this).parent().hasClass('single-link') &amp;&amp; !$(this).parent().hasClass('current')) {
                  //hiding drop down menu when it is clicked again
                  if ($(this).parent().hasClass('active')) {
                    $(this).parent().removeClass('active');
                  }
                  else {
                    //displaying the drop down menu
                    $(this).parent().parent().find('.active').removeClass('active');
                    $(this).parent().addClass('active');
                  }
                }
                else {
        			$(document.body).bind('click', function(){
        				if ($(this).parent().parent().hasClass('active')){
        					$(this).parent().parent().find('.active').removeClass('active');
        				}
        			})
                  //hiding the drop down menu when some other link is clicked
        		$(this).parent().parent().find('.active').removeClass('active');
                }
              })
            });
          }
        })(jQuery);

        Only one more thing, why cant I close the dropdown menu clicking anywhere? I tried more ways but no success… how can i do it? I’m studying and desperate to know it…

        Thanks again Praveen!

        VA:F [1.9.22_1171]
        Rating: 5.0/5 (1 vote cast)
        • #13 by Thiago on October 24, 2011 - 12:52 am

          Praveen, how can i do it work?

          =)

          I tried some more events like mouseout, unbind, but no success… Im trying to understand the parent() event too… I readed about parentS() and closest() events. Isn’t it better?

          Thanks again and waiting for reply!

          VA:F [1.9.22_1171]
          Rating: 5.0/5 (1 vote cast)
  7. #14 by Thiago on October 25, 2011 - 8:25 pm

    Hello Praveen! Dont worry about time! If you havent time to help me for a while, dont worry, i can keep trying more and more! Maybe i find a solution. If i do, I’ll post here for everyone that need helps.

    Keep doing a good job! Thanks again!

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    • #15 by Praveen Gowda I V on October 28, 2011 - 8:15 pm

      Hello Thiago, today I observed a lot of traffic driving from Stackoverflow and then realized that a couple of users had asked the same question as yours and I am posting the best answer below:


      Bind a click event to html to capture any click made, and make it hide the menu

      $("html").click(function() {
        menu.find('.active').removeClass('active');
      });

      Then override that on your menu’s click event using .stopPropagation();

      menu.find('ul li > a').bind('click', function (event) {
        event.stopPropagation();

      and here is the JavaScript after the above changes

      $(function ($) {
        $.fn.fixedMenu = function () {
          return this.each(function () {
            var menu = $(this);
            $("html").click(function() {
              menu.find('.active').removeClass('active');
            });
            menu.find('ul li > a').bind('click', function (event) {
              event.stopPropagation();
              //check whether the particular link has a dropdown
              if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
                //hiding drop down menu when it is clicked again
                if ($(this).parent().hasClass('active')) {
                  $(this).parent().removeClass('active');
                }
                else {
                  //displaying the drop down menu
                  $(this).parent().parent().find('.active').removeClass('active');
                  $(this).parent().addClass('active');
                }
              }
              else {
                //hiding the drop down menu when some other link is clicked
                $(this).parent().parent().find('.active').removeClass('active');
       
              }
            })
          });
        }
        })(jQuery);

      I have also updated the code in the live demo, check it out below:

      Live Demo

      LIVE DEMO

      here below is the link to the two questions, so that you can look at the other solutions as well ( I have posted the solution which was the simplest)
      1.http://stackoverflow.com/q/7930116/1015208
      2.http://stackoverflow.com/q/7921802/1015208

      Hope this helps you.

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (2 votes cast)
      • #16 by Thiago on October 30, 2011 - 5:27 am

        hey hey Praveen! How are you going?

        Well, the code worked perfectly! I don’t have anything more to say! awesome for sure! thanks very much!

        And as I said before, keep doing a great job as you are doing now!

        I’m studing jquery to be a good jquery user! then, if you need help someday, if i can help, ill for sure!

        Hugs Praveen! :D

        God Bless You!

        Bye!

        VA:F [1.9.22_1171]
        Rating: 5.0/5 (1 vote cast)
        • #17 by Praveen Gowda I V on October 30, 2011 - 11:23 am

          Hello Thiago,

          I’ll wish best of luck for your study,

          after your study, may be you can submit a tutorial yourself later sometime.
          You are always welcome to guest blog on my blog.

          I will request you to stay updated with all the tutorials of my blog.

          Bye!

          VN:F [1.9.22_1171]
          Rating: 5.0/5 (1 vote cast)
  8. #18 by Anura on November 11, 2011 - 3:12 am

    I’m just in the process of adapting this to my site.

    As my site uses a different colour scheme, I would like to change the colour of the ‘drop-down’ arrow. But I can’t figure out where this is.

    Is it in the core jQuery javascript file?

    Otherwise, it’s working beautifully (so far!).

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    • #19 by Praveen Gowda I V on November 11, 2011 - 11:21 am

      That is very simple, just refer between the lines 101 to 107 of the CSS, there is a class called arrow as shown below:

      .arrow{
      border-color:#C0C0C0 transparent white;
      border-style:solid dashed dashed;
      margin-left:5px;
      position:relative;
      top:10px;
      }

      in the line 102, you will find the styling for border-color
      In this change #C0C0C0 to any color of your choice the arrow wants to be in.
      Hope it helps you.

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (1 vote cast)
      • #20 by Anura on November 11, 2011 - 8:05 pm

        OK, I will give that a go. I was expecting there to be a reference to an image file.

        Does this mean that jQuery is smart enough to pull a colour reference from a CSS file and change the colour of the arrow image on the fly?

        VA:F [1.9.22_1171]
        Rating: 5.0/5 (1 vote cast)
        • #21 by Praveen Gowda I V on November 12, 2011 - 12:24 pm

          No image has been used for the arrow, moreover the arrow has got nothing to do with jQuery.
          Arrow is created using pure CSS.

          VN:F [1.9.22_1171]
          Rating: 5.0/5 (1 vote cast)
        • #22 by Thiago on November 14, 2011 - 6:48 am

          Hello Anura,

          You can create a class called

          .active .arrow{}

          then, when you are clicking on dropdown you will activate the .active .arrow{} class.

          I did it and it worked for me.

          If I can help more, I will for sure.

          Good Luck!

          VA:F [1.9.22_1171]
          Rating: 5.0/5 (1 vote cast)
          • #23 by Anura on November 16, 2011 - 2:53 am

            Thanks everyone, this works nicely. I notice that the additional border on the active state makes the items to the right ‘jump’ a bit but I should be able to fix that.

            Now I just need to integrate this into my site design without break anything else!

            VA:F [1.9.22_1171]
            Rating: 5.0/5 (1 vote cast)
          • #24 by Praveen Gowda I V on November 16, 2011 - 4:04 pm

            If you have any problem, please let us know
            We will definitely be happy to help you :)
            Good luck with your site design

            VN:F [1.9.22_1171]
            Rating: 5.0/5 (1 vote cast)
  9. #25 by Darlo on November 19, 2011 - 3:36 am

    I keep getting a function expected error when I run code in the .js file in visual studio in debug mode…anyone experienced this…any ideas please?

    Thanks
    p:s; Everything works great.

    VA:F [1.9.22_1171]
    Rating: 4.0/5 (1 vote cast)
  10. #26 by shobz on December 5, 2011 - 7:41 pm

    Very Nice :D hey but google has again changed the menu now…. can you please share that one too… its really nice black menu under the logo…

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    • #27 by Praveen Gowda I V on December 5, 2011 - 9:25 pm

      Guess what, we are already working on creating the new menu and will be published in about a week, subscribe to our blog via email to stay updated when we publish the tutorial

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (1 vote cast)
  11. #28 by Marco Tugnoli on December 19, 2011 - 7:49 pm

    and what about right links with
    profile,preferences etc etc ?

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
  12. #31 by Jason on January 3, 2012 - 9:03 am

    Any idea why on FF 8.0 it puts a white outline around the fixed bar when you open the submenu? I have tried playing around with outline options thinking that was what was causing it, and have even disabled outlines completely in about:config, but it still does it. Google’s navbar doesn’t do it, but they have structured their html a little differently. It does not do this in any other browser – I have also tested in FF 4.0 and it worked perfectly.

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    • #32 by Praveen Gowda I V on January 3, 2012 - 10:29 am

      I tried to have a look at the bar in FF 8.0, but did not notice any white outlines.
      Could you please provide a snapshot of what outline you are exactly mentioning.
      It will make us easier to help you with this.

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (1 vote cast)
      • #33 by Jason Labani on January 4, 2012 - 4:36 am

        Interesting. Both my development machine and laptop have FF 8.0 and are doing this: Image. My work laptop has FF 8.0.1 and it is performing correctly. I have upgraded my laptop to 9.0.1 and it is also performing correctly now. I’ll just attribute it to some strange FF 8.0 behavior. Thanks for the reply.

        VA:F [1.9.22_1171]
        Rating: 5.0/5 (1 vote cast)
        • #34 by Praveen Gowda I V on January 4, 2012 - 10:11 am

          Hello Jason it is not a strange behavior of FF 8.0, I did not understand which outline you were referring to.
          So here is the fix for that
          The outline which you are referring to is the box shadow.
          So remove the following lines(61 – 64) from the CSS to fix it.

          /*box-shadow*/
          -webkit-box-shadow:0 -1px 5px #CCCCCC;
             -moz-box-shadow:0 -1px 5px #CCCCCC;
                  box-shadow:0 -1px 5px #CCCCCC;

          Here is a jsfiddle after the changes
          http://jsfiddle.net/6yCsE/1/

          Hope this helped.

          VN:F [1.9.22_1171]
          Rating: 5.0/5 (1 vote cast)
  13. #35 by Sebastian on January 24, 2012 - 4:24 pm

    I really love your tutorial about the google black bar. Very good work,
    thank you.
    How you have noticed, google has added some profile and setting menüs with
    icons to the right side of the black menu bar. Can you tell me how to get
    the dropdown menu right aligned like google does?

    Thank you
    Greetings Sebastian

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
  14. #37 by Sebastian on January 24, 2012 - 7:40 pm

    Thank you for your quick response. Thats not the solution I am looking for. I explained myself bad.
    I want a right floated dropdown menu. That works fine. But the dropdown box does not grow from the right to the left side like in this pic http://postimage.org/image/wcrm66jw5/
    Do you know what I mean?

    Best greetings
    Sebastian

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
  15. #40 by Sebastian on January 24, 2012 - 10:40 pm

    wow, thanks alot!

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  16. #41 by Nagihiko on February 7, 2012 - 6:19 am

    Hi~ I’m making a project on Google, and your post was really helpful. I have one problem though- for some reason the dropdown menu doesn’t work. Whenever I click the “More” link, it just brings me back to the top of the current page. I’ve included the link to the website with this comment, and I’d really appreciate it if you could look at the source code and see what might be wrong. Thanks!

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (2 votes cast)
    • #42 by Praveen Gowda I V on February 7, 2012 - 4:03 pm

      I examined the source and the solution is very simple.
      You have not linked to the google_menu.css, and it is giving a 404 error.
      Fix the link to that CSS file and you should be good to go.

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (2 votes cast)
      • #43 by Nagihiko on February 15, 2012 - 6:28 am

        Thank you for replying so fast~ I’ve fixed and linked the .css sheet now, but I’m still not able to get the drop down menu working.

        VA:F [1.9.22_1171]
        Rating: 5.0/5 (1 vote cast)
        • #44 by Nagihiko on February 21, 2012 - 10:39 pm

          I’ve made sure the CSS is right, and the dropdown menu even works when I put it in Adobe Dreamweaver. However, the dropdown menu still functions as a “Return to top” function on my website. Is there a substitute or alternate way to code [a href = "#"]? I’ve tried replacing the # with javascript:void(0); , but that hasn’t worked either.

          VA:F [1.9.22_1171]
          Rating: 5.0/5 (1 vote cast)
          • #45 by Praveen Gowda I V on February 21, 2012 - 10:47 pm

            I’ll have a look at it and let you know

            VN:F [1.9.22_1171]
            Rating: 5.0/5 (1 vote cast)
    • #46 by Praveen Gowda I V on February 21, 2012 - 11:02 pm

      Replace the jquery.google_menu.js file with the following code

      (function ($) {
        $.fn.fixedMenu = function () {
          return this.each(function () {
            var menu = $(this);
            menu.find('ul li > a').bind('click', function () {
              //check whether the particular link has a dropdown
              if (!$(this).parent().hasClass('single-link') && !$(this).parent().hasClass('current')) {
                //hiding drop down menu when it is clicked again
                if ($(this).parent().hasClass('active')) {
                  $(this).parent().removeClass('active');
                }
                else {
                  //displaying the drop down menu
                  $(this).parent().parent().find('.active').removeClass('active');
                  $(this).parent().addClass('active');
                }
              }
              else {
                //hiding the drop down menu when some other link is clicked
                $(this).parent().parent().find('.active').removeClass('active');
      
              }
            })
          });
        }$(".menu").fixedMenu();
      })(jQuery);

      And let me know if it works now.

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (1 vote cast)
  17. #47 by Chinos on February 17, 2012 - 8:59 am

    Fantastic
    thanks so much for your sharing…
    i will test this code on my site,hope it could be ok

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
    • #48 by Praveen Gowda I V on February 17, 2012 - 1:23 pm

      It sure will look great, Do give it a try and please know that you are free to contact me if you have any problems on getting it to work.

      VN:F [1.9.22_1171]
      Rating: 5.0/5 (1 vote cast)
      • #49 by Chinos on February 22, 2012 - 2:09 pm

        hi Praveen
        i’ve tried the code of this one (Using chrome)
        http://jsfiddle.net/6yCsE/24/embedded/
        and the more button finally dropped down
        but there are still some bugs.
        1. the Triangle sign besides the word “more” doesn’t appear..
        2. when i scrolled the down the page, and click more, the menu dropped down, but the page also scrolled to the top…

        besides, could you tell me how can i separate the TOP BAR with my existed top on my page? right now there are overlapping together…(i’m too fish to handle css problem)

        here is my test link
        http://www.mologer.cn/devo/

        Thank you in advance!

        VA:F [1.9.22_1171]
        Rating: 0.0/5 (0 votes cast)
        • #50 by Praveen Gowda I V on February 23, 2012 - 5:27 pm

          Even I had a look at the jsfiddle in chrome and the arrow button do appears beside the more button, you got to recheck on that.

          moreover

          besides, could you tell me how can i separate the TOP BAR with my existed top on my page? right now there are overlapping together

          with respect to the above words, I did not understand a bit as to what you are trying to say.
          Please try to explain more clearly,
          I visited the link you provided and I saw that menu seems to look OK.
          So what really you want to get done ?

          VN:F [1.9.22_1171]
          Rating: 0.0/5 (0 votes cast)
  18. #51 by Vikas on May 26, 2012 - 1:05 pm

    Hi, Praveen
    First of i would like thank you for such an exciting article. I have downloaded the source code for this menu and was trying to build a multi level menu for my website. But i am unable to do this can u help me on this.

    Also how can i show the menu on mousehover

    Thanks in advance.

    With Kind Regards
    Vikas NM

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  19. #52 by darthrevan13 on July 9, 2012 - 5:28 pm

    The code seems to have a shadow bug. If you set the example page code background to black a white arrow will appear under more, like here:http://postimage.org/image/o9864xnh7/ . Is there any workaround.

    Great code btw.
    Thanks

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    • #53 by Praveen Gowda I V on July 9, 2012 - 6:37 pm

      Thanks for letting me know
      Here is the fix for the class arrow

      .arrow {
      border-color: #CCC transparent;
      border-style: solid;
      border-width: 5px 5px 0;
      display: inline-block;
      font-size: 0;
      height: 0;
      line-height: 0;
      width: 0;
      margin-left: 5px;
      }
      VN:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
  20. #54 by darthrevan13 on July 10, 2012 - 1:56 pm

    Thanks for the response. I find that this makes the arrow too big now and it puts it a bit more down than the original from Google, so i modified the code to look exactly like it should:

    .arrow {
    border-bottom: 0px dashed transparent;
    border-left: 3px dashed transparent;
    border-right: 3px dashed transparent;
    border-top: 3px solid #C0C0C0;
    display: inline-block;
    font-size: 0;
    height: 0;
    line-height: 0;
    width: 0;
    padding: 1px 0px 0px;
    position: relative;
    left: 4px;
    top: -1px;
    }

    most importantly is the size reduced to 3px, and position:relative, top: -1px and left:4px

    But i found something else that disturbed me. If the background is black like the previous example the mid-line shows a black line at the right: http://postimage.org/image/zeei10e73/ . I tried to correct it on my own but I wasn’t able. If you could find a fix to this too I would greatly appreciate it.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  21. #55 by Fabio on July 11, 2012 - 4:02 pm

    How do I sub-menu? I need child menu.

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)
  22. #56 by Deepak on September 26, 2012 - 12:50 am

    Hi Praveen,

    You made the top bar thing very easy for the not so frontend inclined people like me. Thank you.

    Have one issue though, the same Nagihiko had.
    http://jsfiddle.net/LMcUS/2/embedded/
    How to recreate this issue -
    1. Have more content in the body so that you have to scroll down
    2. Scroll down to an extent or to the end
    3. Click on ‘More’ menu

    The menu is shown but it brings you back to top of the page. This totally negates the purpose of fixed top menu.

    I did try the modified script you had asked Nagihiko to try and it does not work. Any inputs on this would be greatly helpful.

    Regards,
    Deepak

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
    • #57 by Deepak on September 26, 2012 - 1:06 am

      Sorry was too quick to pull the trigger on this.

      Some googling provided the solution – http://jsfiddle.net/LMcUS/3/embedded/

      Cant thank you enough for making this easier.

      VA:F [1.9.22_1171]
      Rating: 0.0/5 (0 votes cast)
      • #58 by Praveen Gowda I V on September 26, 2012 - 7:09 am

        I am glad you got it working

        VN:F [1.9.22_1171]
        Rating: 0.0/5 (0 votes cast)
  23. #59 by Blaz on May 14, 2013 - 11:26 am

    Hi Praveen,

    Once again great tutorial. Can you please explain how to modify this menu so that it can be included with php and showing the current class only on the section being clicked?

    Thanks,

    Blaz

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)
  24. #60 by Jithin on May 15, 2013 - 6:03 am

    thanks . It is working.

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

Leave a Comment, Feedback or Support Requests

%d bloggers like this: