Applet Orchard

Responsive Web Design Navigation Menu Tutorial

[ad_1]
Learn how to create a responsive navigation menu. Mobiles will initially hide the navigation until a button is tapped. Check out my “Get a Developer Job” course:

Link to demo / source page:

For an overall introduction to JavaScript you can watch:

For an overall introduction to Responsive Web Design you can watch:

Have you put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? I’ve partnered with A Small Orange and can now offer my students 20% savings on any hosting plan. Hint: the shared “Small” plan is one of the best bangs for your buck around!

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:

Posted

in

by

appletorchard

Tags:

Comments

22 responses to “Responsive Web Design Navigation Menu Tutorial”

  1. Muhammad Irfan Avatar
    Muhammad Irfan

    As always Helpful….. Crystal Clear. Thanks

    Reply
  2. DesignVAT Excel Avatar
    DesignVAT Excel

    Awesome, thanks

    Reply
  3. David Castro Avatar
    David Castro

    Can i see your CSS? I am definitely missing something.
    After I click only the span dissapears.

    Reply
  4. Ike Avatar
    Ike

    There are a million videos about creating the nav bar but none that include the most important step of making the damn thing work (ex: click on page 2 on nav bar, page 2 is then displayed). Just kill me.

    Reply
  5. loco13 Avatar
    loco13

    hey wuz up man first thanks for the tutorial big help now i have a problem the menu works perfect with google crome but not with explorer can u plz help

    Reply
  6. Bri Iunno Avatar
    Bri Iunno

    You are the best!

    Reply
  7. ISHAN MAHAJAN Avatar
    ISHAN MAHAJAN

    You still had syntax error after width still posting ??? You gotta improve a lot man

    Reply
  8. Roland doda Avatar
    Roland doda

    did you have new advanced jquery tutorials?Great tutorial

    Reply
  9. William Wang Avatar
    William Wang

    HI Any chance i can download ur project for learning purpose, if yes do u mind send me ur project download link please. thanks William

    Reply
  10. Rosevelt Barahona Avatar
    Rosevelt Barahona

    niiiiiiceeeeee

    Reply
  11. falgun swami Avatar
    falgun swami

    Hey! I am unable to see the toggled list items. They have gone invisible

    Reply
  12. Kinarmi Avatar
    Kinarmi

    It worked! Thank you so much for the tutorials. They are a huge help to an aspiring front-end developer, you sir earned a sub!
    To those whom are having problems, click the link to demo / source page in the description. On that page view the links contents of "Direct link to JS" and "Direct link to CSS" and compare them to what you have.

    Reply
  13. Martin cool Avatar
    Martin cool

    Really good well explained video

    Reply
  14. Gons Avatar
    Gons

    Tnx.

    Reply
  15. lakShmi thirumeni Avatar
    lakShmi thirumeni

    Excellent tutorial. neat and clean….thank you sir and thank you jimmy luo for your tips to include js file.

    Reply
  16. illmtoloko Avatar
    illmtoloko

    thank you

    Reply
  17. mbambo lucas Avatar
    mbambo lucas

    Nice tutorial
    But im stuck with this line jQuery(this).toggleClass("nav-expanded").css('display', '');
    When i click on the MENU the nav-menu just it appear for one second then disappear

    Reply
  18. Ratnadeep Debnath Avatar
    Ratnadeep Debnath

    Hi, I couldn't understand the nav expanded thing on click jquery

    Reply
  19. Scarlet Fire Avatar
    Scarlet Fire

    Thank you! It worked for me!

    Reply
  20. rukkumani n Avatar
    rukkumani n

    can u say how to open or load all the links in same section of a page

    Reply
  21. Fuqing Wang Avatar
    Fuqing Wang

    For whoever has problems with the .css('display','') notation, here is a very comprehensive explanation.
    http://stackoverflow.com/questions/7420109/what-does-style-display-actually-do

    Reply
  22. azzywazzy768 Avatar
    azzywazzy768

    Everything works fine on desktop. Tapping on the menu button on mobile phone doesn't work. Anyone else had this problem?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *