From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
After I got a lot of feedback for the Beautiful Slide Out Navigation, I had some new ideas for a similar horizontal navigation. Thanks a lot to everyone!
Like Stefan Matei pointed out, it might be quite cute but we don’t want the user to hover over all options first, in order to see what menu items exit. So, I thought about labeling the menu items and making them stick out, so the user can always “see” what the navigation entails. Being in a horizontal position makes everything readable and when the user hovers over the label, the rest of the item with the icon will slide out.
Although this tutorial is related to the previous one, I will start again from scratch – for the readers that are only interested in this new navigation.
The icons that we will be using are from the Colorful Sticker Icon Sets 1, 2, 3 and 4 by DryIcons. (It is not allowed to redistribute them under the free license, so I cannot include them in ZIP file of this tutorial.)
Ok, let’s get to work.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
1. The HTML Structure
The only thing we will need for the navigation is a simple unordered list with links and spans inside of the list elements:
<ul id="navigation"> <li class="home"><a href=""><span>Home</span></a></li> <li class="about"><a href=""><span>About</span></a></li> <li class="search"><a href=""><span>Search</span></a></li> <li class="photos"><a href=""><span>Photos</span></a></li> <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li> <li class="podcasts"><a href=""><span>Podcasts</span></a></li> <li class="contact"><a href=""><span>Contact</span></a></li> </ul>
The spans will carry the names of your menu items.
The list is getting an ID because we want to refer to it later in the JavaScript. With jQuery, we will make the link items slide out whenever we hover over the li elements of the list.
2. The CSS
First, we define the CSS properties for the list:
ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; }
We position the list in the top right corner of the page.
The navigation should always be accessible for the user, even if he scrolls down the page. So, the position should be fixed. Margin and padding are explicitly set to 0, since the unordered list has default values for them. The navigation should also be on top of all other elements on the page. That’s why we set the z-index very high. The width is defined here, because I want to make the elements inside of the list floating. If I would not give this list an explicit width though, they would start moving and overlapping each other once I start resizing the page. In order to avoid that your floating elements start to e.g. move down when you resize the window, always put them in a container with a fixed width. (721px is the sum of all the li elements)
Now, let’s look at the list element properties:
ul#navigation li { width: 103px; display:inline; float:left; }
If you want a list to be shown horizontally, set the display of the elements to inline. This will make them be next to each other rather than under each other.
For the links in the list elements, we define the following CSS properties:
ul#navigation li a { display: block; float: left; margin-top: -2px; width: 100px; height: 25px; background-color: #E7F2F9; background-repeat: no-repeat; background-position: 50% 10px; border: 1px solid #BDDCEF; text-decoration: none; text-align: center; padding-top: 80px; }
This is the common style for the link elements. We already define the properties for the background images that we will then put in separate class definitions. The text properties and the padding we need to set for the spans inside the link elements. The padding will push the spans to the bottom part.
Let’s add some rounded borders (they don’t work in Internet Explorer, though) and make the items semi-transparent:
ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#E7F2F9; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; text-decoration:none; text-align:center; padding-top:80px; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); }
The last filter property will make this work for Internet Explorer as well.
These were the common properties of all the link elements in the list. Now we will define the background image for the links in the specific list items:
ul#navigation .home a{ background-image: url(../images/home.png); } ul#navigation .about a { background-image: url(../images/id_card.png); } ul#navigation .search a { background-image: url(../images/search.png); } ul#navigation .podcasts a { background-image: url(../images/ipod.png); } ul#navigation .rssfeed a { background-image: url(../images/rss.png); } ul#navigation .photos a { background-image: url(../images/camera.png); } ul#navigation .contact a { background-image: url(../images/mail.png); }
When hovering over the elements, we want to change the background color in order to make them stand out a little bit more:
ul#navigation li a:hover{ background-color:#CAE3F2; }
Now we just need to add some style to the spans:
ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; text-shadow: 0 -1px 1px #fff; }
The text-shadow property will give the letters an engraved look (but it will not work in IE).
And that was the CSS part. Now, let’s take a look at the JavaScript that will give some life to the navigation.
The JavaScript
With jQuery we will first make all of the items disappear first in a “piano-like” way until the point that we can only see the text of the links. When hovering over an item, we will make the whole element slide out from the top. For all this, we define the following:
$(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); });
For creating the piano-like effect we define that for each of the link elements the top margin should be set to -80 pixels (this will make them move to the top outside of the screen). The effect for the first element should last 300 + 150 milliseconds and then each further element should disappear with an additional delay of 150 milliseconds.
When hovering, we want the specific link element to get a top margin of -2 pixels, and that nicely animated, and not too slow (200 milliseconds). Moving the mouse out shall put the link element back to it’s old position (-80 pixels). The stop() function “stops all the currently running animations on all the specified elements” which gives the beautiful effect when, for example, hovering over all elements very quickly.
And that’s it! I hope you like it – enjoy!
Hi, I liked it too much, i want to do some changes in my site including this menu, I also want to add a slider like this one http://www.cooltricksntips.com/2009/06/adding-jquery-posts-slider-to-blogger.html Can some of the experts here tell us how could we make the slider more dynamic showing the last 3 or 5 posts automatically? (Something like auto RSS posts slider) how to do it? thnks in advance =)
wonderfull! but is it possible to have all buttons open as first entering the site, and when choosing one they all close, and don’t open again? right now every time you choose a new menu the animation of all menu items is reloading. so just have sort of a one off thing? 🙂
I love your design. I got it via adobe.
I am in the process of redesigning my site I want to use your tabs on the new design.
I have made the new template and uploaded a test page which opens beautifully in chrome and firefox but will not open at all in IE9 and the latest Opera. It opens in an older IE because at my school there is no problem – the network isn’t updated very often…
Is there any way I can get them to display?
My test page is: http://www.cyberphysics.co.uk/revisionaids.htm
Please ignore the above… the problem arose when I extracted css info for an external sheet… back to the drawing board!
Love your navigation bar!
i like this menu i done all the parts but i can’t understand where to insert that javascript code !!! please help me .
??! How can i include login form in this menu or part of php-code?
Hi, can this be used on jquery 1.6.1?
Hi there,
Thank you very much for the menu. Looks great and works even better!
One question…is it possible to stop the sliding after every click? I only want the menu so slide down when the user hover’s over it. As it is, every time they go to a new page the menu is extended and retracts.
Thanks again,
Ben
Webfunk Designs
Good work!
i try to call your menu to my forum by iframe (uploaded in domain) where i had put the chatbox, the problem is that i can’t resize the iframe automatically with the slide contain ! can anyone help me? (i am beginner)
Is there a way to move it with positioning properties rather than margin? I want to use the menu in the middle off the page but don’t want it to affect anything else…
thanks
You are genius!
I love this menu, Mary, and I want to use it instead of desktop links to start programs without leaving browser window. I just started with jQuery, and I am looking for better ways to set and save custom css properties for the menu from within a property page to put more than one icon/link for each menu panel. I also wonder if there is a way to attach this menu to browser instead of a page? Would you give me some advice on the ways to go with my project?
Could someone possibly tell me how to go about making this verticle? I have an image gallery, I want it to look like it’s coming out of the left side of the main gallery image. If someone could please e-mail me how to go about doing this, it would be very much appreciated!
jcowden85@hotmail.com
I didn’t like the way the buttons flashed up and hid themselves on page load – very annoying for every page – so I tweaked the CSS to initially show the buttons in ‘closed’ position, and the JS to not initially move the buttons back. Works fine, and okay for non-JS browsers because they can see the titles. Just a case of adding and subtracting a few lots of 80px here and there.
Hello Mary Lou,
first of all i want to tell tell you that this menu is great work.
My question is, is it possible to place the bar on the right side of the screen, change the ratio of the text and the sliding effect should also change to right aspect.
Thank You.
Hi, I hope comments are still open… I recently discovered this script and it is PERFECT for my needs, but I’m trying to modify it and am running into a wall. What I’m trying to do (with both the horizontal AND vertical versions) is have just one slide-out with multiple links inside, rather than multiple slide outs with one link each. Could you please let me know if this is possible and how I can prevent the links from interfering with the script? Thanks!!
Are you able to use smooth scroll with your slide out navigation? Are you also able to use the slide out with a current state link?
first of all i want to tell tell you that this menu is great work.
My question is, is it possible to place the bar on the right side of the screen, change the ratio of the text and the sliding effect should also change to right aspect.
Hello Mary , your tutorial was very nice and i really liked it.
i know that this is not a suport site or tutorial , but iam askng you as a favor , could you please expalin the jQuery code how its working , or add come comments just to understand easier what is going on on the code lines.
Thank you very much
Ani