Responsive WordPress Theme Tutorial – Part 6 – JQuery Toggle Menu

Responsive WordPress Theme Tutorial – Part 6 – JQuery Toggle Menu


We continue to work on our navigation menu. In this part we write a bite of jQuery to create a toggle system for our navigation menu on small screens.

Check out the code and download the source files:

Music by Dano at Danosongs.com

What’s this series about?

In this series we are going to create a custom WordPress theme from scratch. We will learn how to create WordPress themes, use advanced features such as: custom post types, custom fields and meta data. We will be focusing our theme on a site based on a site like Kongregate.com or Armorgames.com.

Links
———
Skeleton:
WAMP:
Wordpress:

Website:
Twitter:

8 Comments

8 Replies to “Responsive WordPress Theme Tutorial – Part 6 – JQuery Toggle Menu”

  1. when i minimize the browser then the navigation bar shifts to the down and the toggle navigation button displays on the top of the navigation bar.and the toggle navigation button displays just when i hover.i dont know what is going on.somebody plz help me out

  2. I did some research on the jquery issue. Looks like I had the same problem. Took about 20 minutes of troubleshooting but got it to work. If people are still stuck on this here is the whole jquery code for the menu, just place in the footer. All you need is to make the Variable conflict free. This will do it and run it with no issues. Hope it helps.

     
            var $j = jQuery.noConflict();
            $j(“#show-nav”).click(function(){
            $j(“.main-nav”).toggle(“slow”);
            $j(“#close-nav”).show(“slow”);    
            });
            $j(“#close-nav”).click(function(){
            $j(“.main-nav”).toggle(“slow”);
            $j(“#close-nav”).hide(“slow”);    
            });
           

  3. When I do the media query in the style.css folder

    @media only screen and (min-width: 480px) and (max-width: 767px){
    .main-nav {
    display: none;
    }
    }

    All it does is take away the menu navs text and not the whole nav bar when i decrease the window size below what the media query  says

  4. My toggle bar only shows when I hover on it like another user said.
    If I remove the height of nav-var I get the double menu problem… any ideas?

  5. when i write the media screen code and show toggle button and nav-bar like tow button how to solve tihs proble

  6. Well, dude, your living place is great. sometime a noise is beauty. However it is great video tutorial series.

Comments are closed.