How do I create a responsive navigation bar?

Question

I am having trouble making my website responsive, I have done it for all of the pages and just need to finish off with my navigation.

It can be seen at www.christierichards.co.uk/gcc_website/index.php

Basically when the window is resized down to 635px the nav ul disappears and a menu icon appears, in the CSS at this point the nav ul has been set to display:none. What I need to happen here is that when you click on the menu icon the navigation is set to display block and slides down the entire page to reveal the nav (I hope that makes sense!) This technique is used with a lot of responsive sites nowadays but I cant for the life of me figure out how to do it!

I hope somebody can help me! Thank you

Answer 1

try this>>>

CSS:
ul > li { 
width: 24.5%; /*important*/
height: 50px;
background-color:#000;
color:orange;
float: left;
margin-left: 0.5%; /*important*/
list-style-type: none;
}
ul{margin:0px;padding:0px;} /*important*/

HTML:
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
<li>NAV4</li>
</ul>

This resizes depending on browser size. Please comment back. http://jsfiddle.net/S4TcF/ The text can be center align vertically and horiziontaly please comment back for that

Answer 2

You need to do 2 things -

1.Hang an event on the menu button to open/close the nav (I see you're using jQuery, so you can set

$("#pull").on("click", function(){
  $("#nav-bg").toggleClass("vertical")});

2.Set the CSS definition to match the class you're adding - something like:

div#nav-bg.vertical {
    height: auto;
    background: blue;
}
.vertical ul {
    display: block;
}
.vertical nav li {
    display: block;
    float: none;
}
.vertical nav li a {
    display: block;
}
.vertical nav {
    background: blue;
}

Answer 3

为#pull添加onClick事件，并使用jQuery slideUp / slideDown方法在＃nav-bg ul上切换显示。

Answer 4

You would need to load it with a display set to none as you are doing now but using one class, let's name it ".hide", then use a jQuery click function to switch to a ".show" class which has the display set to block.

CSS looks like this:

.show {display:block;}
.hide {display:none;}

jQuery:

$("#pull").click(function(){
$("#nav-menu").toggleClass('show');
});

Here is a working fiddle:

http://jsfiddle.net/22sSj/6/

Answer 5

you use a variable that is not defined within the loading of the page your #pull is not visible during a page load that the size of the window is bigger than 635 so the variable var pull = $('#pull'); isn't defined, and change of the window width wouldn't give you any change besides the other style you've got for the bar.

so i recommend you'll try to change the script so it would listen to the window width and will execute this function only when the window width is smaller or equal to 636px.

var winWidth = $(window).width();
$(window).rezise(function(){
    if(winWidth <= 635){
    addPull();
    }
});

function addPull(){
    menu        = $('nav ul');
    menuHeight  = menu.height();

    $(document).on('click','#pull' function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
}
$(document).ready(function(){
    if(winWidth <= 635){
    addPull();
    }
});