css-tricks nav menu

[buildman]

Would it be a problem for you to post the way you did the multi-colored nav bar on this site. I love this thing. You’re a great instructor, I took your course on lynda.com and really enjoyed it, highly recommended

Thanks a bunch

James

[Ethan27]

yeh that would be cool

[rickylamerz]

I read this, and I found it interesting. So I tried to recreate the menu using CSS and jQuery instead of CSS3 for the animation.

Here’s what I came up with. You can look at the source and copy it.

http://reedeesign.com/csstricksmenu/

[gno]

The one thing that makes this tricky is that the current page tab is the wider one when no menu-item’s is hovered.

The basics could be accomplished, by CSS3 transitions, but you could do the same with jQuery. And jQuery is required to modify the width of the current page item (at least as far as I know).

Something like this should cover your needs.

$(document).ready(function(){

var hoverWidth = 200;

var normalWidth = 150;

var speedValue = 150;



$('#menu a').mouseover(function(){

$('#menu a').stop().animate({width: normalWidth}, speedValue); // make all #menu a's the non-active width

$(this).stop().animate({width: hoverWidth}, speedValue); // make this #menu a the active width

}).mouseout(function(){

$(this).stop().animate({width: normalWidth}, speedValue); // make this #menu a the non-active width

$('#menu a.active').stop().animate({width: hoverWidth}, speedValue); // make the #menu a.active the active width

});

});

For this to work, you should just make a div width an id of menu containing a series of a-tags. The a-tags should have the display property set to inline-block and have a set width which should be the same as the jQuery variable normalWidth. Furthermore you should have the a-tag corresponding to the current page set to the class active – and that class should have the width of the jQuery variable hoverWidth in your stylesheet.

When you got the basics of this up and running you can apply extra styling, like the different colors used here on CSS-tricks.

I guess you could make the jQuery animations as a fallback only used in browsers that does not support css transitions, if you want to go all fancy on this…

[buildman]

Hi gno;

Thanks for responding to my post, it’ll take me a while to get my arms around this because I’m just beginning to get into jquery, it’s great to have some code to start with and especially on a project I’m already into.

This is the first time I’ve posted on this forum, hope I’m getting it right.

Thanks a bunch

James

[jamygolden]

And jQuery is required to modify the width of the current page item (at least as far as I know).

@gno This isn’t true. Disable javascript and have a look. Also inspect what he has done with firebug.

It would be overkill to use jQuery for something like that unless you really want the animation to work cross-browser.

[Ethan27]

@rickylamerz Nice effort mate looks really good.

@jamy_za So its possible to write it just using css3….?

[jamygolden]

@Ethan27 It’s not only possible, Chris did it with CSS.

He’s set the with of the UL to 810px.
Each anchor is set to a width of 19%. There are 5 anchors.
The current page nav item is targeted via CSS and set to 24%.
(4 * 19%) + (1 * 24%) = 100%

Simply put, it consists of this:
– Current page nav item is set to 24%
– When the UL is hovered upon, all items are set to 19% – including the current page
– Hovering on an item sets the item to 24%
– Essentially two things are happening when you hover on an item. All items are set to 19%, and the item you are hovering on is set to 24%

The effects are achieved with css transitions.

http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
https://css-tricks.com/video-screencasts/93-css3-slideup-boxes/

[jamygolden]

Note: I’ve changed the title of this post because “Hi Chris” doesn’t have anything to do with this.

[Ethan27]

Nice man Ill have to try it out.

Lol I can see it now an internet covered with chris’ menu.

[rickylamerz]

@Ethan27 Thanks! :)

[TheDoc]

There was an interview that Chris did on another website that explained some of the problems he faced creating the menu and some of the things he had to do to fix it… but I cannot find it!

[chrisburton]

@TheDoc This one? http://vimeo.com/19194493

[TheDoc]

That’s the one!

[chrisburton]

I like the part where he thought the forum was new.

[Author]

Posts