SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do i show and hide my menu like this?

    I want to be able to show and hide my menu like on this site: http://etchapps.com/

    Anyone know how to do this?

    thanks in rewards.

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    simple animate() on the width of the menu div and use CSS3 rotate to turn the box.

    Not tested but should give you a starting block.
    Code:
    //menu btn is the trigger
    $("#menu_btn").click(function() {
            $('#menu_btn').css({
                '-moz-transform':'rotate(88deg)',
                 '-webkit-transform':'rotate(88deg)',
                 '-o-transform':'rotate(88deg)',
                 '-ms-transform':'rotate(88deg)'
            });
        
            $('.menu_div').animate({width: 'toggle'}, 500,
                function() {
                    // Animation complete.
                      
                  });
            });
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spikeZ View Post
    simple animate() on the width of the menu div and use CSS3 rotate to turn the box.

    Not tested but should give you a starting block.
    Code:
    //menu btn is the trigger
    $("#menu_btn").click(function() {
            $('#menu_btn').css({
                '-moz-transform':'rotate(88deg)',
                 '-webkit-transform':'rotate(88deg)',
                 '-o-transform':'rotate(88deg)',
                 '-ms-transform':'rotate(88deg)'
            });
        
            $('.menu_div').animate({width: 'toggle'}, 500,
                function() {
                    // Animation complete.
                      
                  });
            });
    Thanks that got me started=) But atm it looks like this, check out the fiddle:

    http://jsfiddle.net/Ymu8T/4/

    It animates the wrong way and as u can see the menu items "drop down under each other" at the end of the animation. And the trigger stays rotated and doesnt rotate back.

    I would be very grateful if you or someone else could fix this for me as im a total noob to javascript.

    thanks in advance

  4. #4
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    added overflow: hidden and some height to the parent div so now it looks like this: http://jsfiddle.net/Ymu8T/21/

    But still animating to the left and i the trigger is not rotating more then the first time its clicked.

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    I have updated your fiddle.....
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  6. #6
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spikeZ View Post
    I have updated your fiddle.....
    thanks

    I float the ul li left now and now i got some issue with the menu jumping like 30px to the right before the animation, u know why?

    http://jsfiddle.net/Ymu8T/27/

  7. #7
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spikeZ View Post
    I have updated your fiddle.....
    Now i think i got pretty much what i want ... except that i want to have the trigger on the other side, and to the animation to animate the other way, how do i do that?

    http://jsfiddle.net/Ymu8T/35/

  8. #8
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  9. #9
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by spikeZ View Post
    Thanks now its working as i want it to!

    Now on the other hand i would like to customize a bit more, i want the menu to "collapse" into the trigger on a certain page width (767px) , so that on 767px and under it only shows the menu when clicked.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •