Menu Responsivo com Jquery e Css

Neste artigo veja como fazer um Menu Responsivo com Jquery e Css.

Veja como Fazer um menu responsivo bem funcional, com níveis de itens com drop-down com um efeito em jQuery e CSS. Ao ser reduzido ao responsivo, cria a composição de um menu minimalista horizontal. Detalhe para o ícone de fechar que aparece na versão Mobile. 

Vamos Adicionar o Html:

<header class="main_header container">
    

    <div class="menu-fixo">
        <a href="#" class="btn-mobile"><span class="icon-bars"></span>Menu</a>
    </div>

    <div class="content">

        <div class="main_header_logo">
            
                <a href="https://www.loopnerd.com.br/" title="Loop Nerd">    
                    <img src="img/logo.png" alt="logo.png" title="Loop Nerd"/>
                </a>

        </div>

        <nav>
            <ul>
                <li><a href="#"> Início</a></li>
                <li><a href="#">Sobre</a></li>
                
                <li class="submenu">
                    
                    <a href="#">Front-end <span class="icon-down-open-mini"></span></a>
                    
                    <ul class="children">
                        <li><a href="#">Html5 </a></li>
                        <li><a href="#">Css3 </a></li>
                        <li><a href="#">Jquery </a></li>
                    </ul>

                </li><!--submenu-->
                
                <li class="submenu">
                    
                    <a href="#">Sites Prontos<span class="icon-down-open-mini"></span></a>

                    <ul class="children">

                        <li><a href="#">Sites em Html</a></li>
                        <li><a href="#">Temas Para WordPress</a></li>
                    
                    </ul>
                </li><!--submenu-->
                
                <li><a href="#">Contato</a></li>

            </ul>
        </nav>

    </div><!--C0ntent-->
        
</header>

Vamos Adicionar o Css:

.menu-fixo { display:none; }

nav {

    background:#ffffff;
    z-index:1;
    width: 75%;
    float: right;
    text-align: right;
}

nav ul {
    list-style:none;
}

nav ul li {
    display:inline-block;
    position: relative;
}

nav ul li:hover {
    
    background:#00bec5;

}

nav ul li a {
    color:#262626;
    display:block;
    text-decoration:none;
    padding:1.1em 1em;
}

nav ul li a:hover {

    color:#ffffff;

}

nav ul li a span {
    margin-right:10px;
}

nav ul li:hover .children {
    display:block;
}

nav ul li .children {
    display: none;
    background:#00bec5;
    position: absolute;
    width:170%;
    z-index:1000;
    text-align:left;
}

nav ul li .children li {
    display:block;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.5);
}

nav ul li .children li:hover { background:#262626; color:#ffffff;}

nav ul li .children li a  {
    display: block;
}

nav ul li .children li a span {
    float: right;
    position: relative;
    top:3px;
    margin-right:0;
    margin-left:10px;
}

nav ul li .caret {
    position: relative;
    top:3px;
    margin-left:10px;
    margin-right:0px;
}

@media screen and (max-width: 900px) {

    .menu-fixo {
        display:block;
        width:100%;
        background:#00BEC5;
        position:fixed;
    }

    .menu-fixo .btn-mobile {

        display: block;
        padding: 0.5em 1em;
        color: #fff;
        overflow: hidden;
        font-size: 25px;
        font-weight: bold;
        text-decoration: none;
    }

    .menu-fixo span {

        float: right;
        font-size:25px;

    }

    nav {
        width: 80%;
        height: calc(100% - 80px);
        position: fixed;
        right:100%;
        margin: 0;
        overflow: scroll;
        text-align:left;
    }

    nav ul li {
        display: block;
        border-bottom:1px #f0f0f0 solid;
    }

    nav ul li a {
        display: block;
    }

    nav ul li:hover .children {
        display: none;
    }

    nav ul li .children {
        width: 100%;
        position: relative;
    }

    nav ul li .children li a {
        margin-left:20px;
    }

    nav ul li .caret {
        float: right;
    }
}

Por fim Vamos Adicionar Jquery para controlar no Mobile:

<script>

$(document).ready(main);

var cont = 1;

function main () {
	$('.menu-fixo').click(function(){
		if (cont == 1) {
			$('nav').animate({
				left: '0'
			});
			cont = 0;
		} else {
			cont = 1;
			$('nav').animate({
				left: '-100%'
			});
		}
	});

	// Mobile
	$('.submenu').click(function(){
		$(this).children('.children').slideToggle();
	});
}

</script>

Script para deixar o Menu fixo ao rolar a página:

<script>

$(function () {


    //HEADER
    $(window).scroll(function () {
          if($(this).scrollTop() > 200)
          {
              if (!$('.main_header').hasClass('fixed'))
              {
                  $('.main_header').stop().addClass('fixed').css('top', '-100px').animate(
                      {
                          'top': '0px'
                      }, 500);
              }
          }
          else
          {
              $('.main_header').removeClass('fixed');
          }
    });


});

</script>

Veja o código Funcionando abaixo:

Baixar Código Veja Funcionando