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
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 |
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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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> </h2>
<h2>CLICK HERE TO GO TO THE TUTORIAL LINK TO DOWNLOAD THE SOURCE CODE</h2>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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:
Subscribing to RSS feeds
Subscribing by email
Subscribing by SMS(currently limited to Indian Users)
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.
Copyright protected by Digiprove © 2011 Praveen Gowda I VAcknowledgements: Lucas From jQueryLoad.com
Some Rights ReservedRelated posts:
#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.
[Translate]
#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!
[Translate]
#3 by indezoo on October 9, 2011 - 12:46 pm
this is really awesome…was looking for this one..thank you for sharing
[Translate]
#4 by Praveen Gowda I V on October 9, 2011 - 3:52 pm
Welcome
[Translate]
#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!
[Translate]
#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
[Translate]
#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!
[Translate]
#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
[Translate]
#9 by Tristan Prichett on October 14, 2011 - 12:04 am
Enjoyed examining this, very good stuff, regards .
[Translate]
#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!
[Translate]
#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.
[Translate]
#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 > 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 { $(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!
[Translate]
#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!
[Translate]
#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!
[Translate]
#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
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.
[Translate]
#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!
God Bless You!
Bye!
[Translate]
#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!
[Translate]
#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!).
[Translate]
#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.
[Translate]
#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?
[Translate]
#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.
[Translate]
#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!
[Translate]
#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!
[Translate]
#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
[Translate]
#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.
[Translate]
#26 by shobz on December 5, 2011 - 7:41 pm
Very Nice
hey but google has again changed the menu now…. can you please share that one too… its really nice black menu under the logo…
[Translate]
#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
[Translate]
#28 by Marco Tugnoli on December 19, 2011 - 7:49 pm
and what about right links with
profile,preferences etc etc ?
[Translate]
#29 by Praveen Gowda I V on January 24, 2012 - 4:13 pm
Just float the list items to the right
It is as simple as that
have a look at this http://jsfiddle.net/6yCsE/12/embedded/
[Translate]
#30 by Praveen Gowda I V on January 24, 2012 - 7:55 pm
Here is what you asked
http://jsfiddle.net/6yCsE/24/embedded/
Just examine to find out what changes have been made
[Translate]
#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.
[Translate]
#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.
[Translate]
#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.
[Translate]
#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.
[Translate]
#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
[Translate]
#36 by Praveen Gowda I V on January 24, 2012 - 6:21 pm
Just float the list items to the right
It is as simple as that
have a look at this http://jsfiddle.net/6yCsE/12/embedded/
[Translate]
#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
[Translate]
#38 by Praveen Gowda I V on January 24, 2012 - 7:47 pm
Got it, I’ll prepare a jsFiddle and get it to you
[Translate]
#39 by Praveen Gowda I V on January 24, 2012 - 7:54 pm
Hello Sebastin,
Here is what you asked
http://jsfiddle.net/6yCsE/24/embedded/
Just examine to find out what changes have been made
[Translate]
#40 by Sebastian on January 24, 2012 - 10:40 pm
wow, thanks alot!
[Translate]
#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!
[Translate]
#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.
[Translate]
#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.
[Translate]
#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.[Translate]
#45 by Praveen Gowda I V on February 21, 2012 - 10:47 pm
I’ll have a look at it and let you know
[Translate]
#46 by Praveen Gowda I V on February 21, 2012 - 11:02 pm
Replace the
jquery.google_menu.jsfile 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.
[Translate]
#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
[Translate]
#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.
[Translate]
#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!
[Translate]
#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
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 ?
[Translate]
#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
[Translate]
#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
[Translate]
#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; }[Translate]
#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.
[Translate]
#55 by Fabio on July 11, 2012 - 4:02 pm
How do I sub-menu? I need child menu.
[Translate]
#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
[Translate]
#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.
[Translate]
#58 by Praveen Gowda I V on September 26, 2012 - 7:09 am
I am glad you got it working
[Translate]
#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
[Translate]
#60 by Jithin on May 15, 2013 - 6:03 am
thanks . It is working.
[Translate]