Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS css-tricks nav menu

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #31691
    buildman
    Participant

    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

    #59484
    Ethan27
    Member

    yeh that would be cool

    #59421
    rickylamerz
    Member

    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/

    #59423
    gno
    Member

    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…

    #59347
    buildman
    Participant

    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

    #59338
    jamygolden
    Member

    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.

    #59313
    Ethan27
    Member

    @rickylamerz Nice effort mate looks really good.

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

    #59302
    jamygolden
    Member

    @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/

    #59303
    jamygolden
    Member

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

    #59305
    Ethan27
    Member

    Nice man Ill have to try it out.

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

    #59306
    rickylamerz
    Member

    @Ethan27 Thanks! :)

    #59119
    TheDoc
    Member

    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!

    #59124
    chrisburton
    Participant
    #59140
    TheDoc
    Member

    That’s the one!

    #59145
    chrisburton
    Participant

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

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.