Curso de Design Responsivo Aula 07 Criando e estilizando menu com submenu lateral

Nessa vídeo aula vamos aprender como criar um menu com submenu lateral, utilizando as tags padrões e a criar um botão para ativar o menu utilizando jQuery

O que é JQuery?

jQuery é uma biblioteca de código aberto e possui licença dual, fazendo uso da Licença MIT ou da GNU General Public License versão 2. A sintaxe do jQuery foi desenvolvida para tornar mais simples a navegação do documento HTML, a seleção de elementos DOM, criar animações, manipular eventos e desenvolver aplicações AJAX.

Para saber mais informações sobre a biblioteca jQuery visite o site oficial http://www.jquery.com

Código HTML desenvolvido na vídeo aula

<nav>
    <div class="botaoMenu"></div>
    <ul>
        <li><a href='./' title="Home">Home</a></li>
        <li>
            <ul>
                <li><a href="#galeria" title="Galeria">Galeria</a></li>
                <li><a href="#castrar" title="Castração">Castração</a></li>
                <li><a href="#denuncie" title="Denuncie">Denuncie</a></li>
                <li><a href="#conselhos" title="Conselhos">Conselhos</a></li>
            </ul>
        </li>
        <li><a href='#' title="Redes Sociais">Redes Sociais</a>
            <ul>
                <li>
                    <a href="https://www.facebook.com/bobrinhacursos" title="Acompanhe no Facebook">Facebook</a>
                </li>
                <li>
                    <a href="https://www.youtube.com/c/Bobrinha" title="Acompanhe no Youtube">Youtube</a>
                </li>
                <li>
                    <a href="https://twitter.com/bobrinhacursos" title="Acompanhe no Twitter">Twitter</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Código CSS do menu desenvolvido na vídeo aula

nav ul {
    position: fixed;
    left: -100%;
    top: 0;
    width: 75%;
    height: 100%;
    min-width: 200px;
    max-width: 320px;
    background: #029830;
    overflow: hidden;
    overflow-y: auto
}
nav ul li {
    position: relative
}
nav ul li a{
    color: #99FF00;
    display: block;
    padding: 10px
}
nav ul li:hover,
nav ul li a:hover{
    background-color: #02CA3E;
    color: #41FE01
}
nav ul li ul {
    position: relative;
    margin: 0 auto;
    width: 100%;
    background-color: #006600;
    padding: 10px
}
nav ul li ul li a {
    text-align: left;
    border-bottom: 1px solid #009900
}
nav ul li ul li a:hover{
    color: #9ACD32;
    background-color: #003300
}

Código CSS do botão desenvolvido na vídeo aula

.botaoMenu {
    width: 46px;
    height: 46px;
    float: right;
    cursor: pointer;
    background: #33CC33 url(../imagens/menu.png) center center no-repeat;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%
}
.botaoMenu.menuAtivo {
    background-color: #083000
}
.botaoMenu:hover {
    background-color: #089000
}

Código jQuery desenvolvido na vídeo aula

$(function(){
    $('.botaoMenu').click(function (event){
        event.stopPropagation();
        if(!$(this).hasClass('menuAtivo')){
            $(this).addClass('menuAtivo');
            $('nav ul').animate({'left':'0px'},300);
        }else {
             $(this).removeClass('menuAtivo');
            $('nav ul').animate({'left':'-100%'},300);
        }
    });
});

 



Hospedagem Profissional de Sites