Menu drop-down responsivo

Cinema 4D esferas coloridas
Cinema 4D – Como fazer bolas saltitonas que mudam de cor
17 Outubro, 2013
php likes redes sociais
Contar seguidores Facebook, Twitter e Google Plus em PHP
19 Outubro, 2013
menu drop down responsivo

Como criar um menu drop-down responsivo é uma das perguntas mais comuns que fazemos quando não encontramos nada adequados ao nosso site/blog. Muitos de nós até percebemos de html e css, mas quando chega a hora de fazer alterações ou de criar um, surge a dúvida, como deve ficar o menu drop-down em um celular ou tablet?

Resolvemos assim mostrar como criar um Menu drop-down responsivo. Vamos fornecer a informação necessária e explicar como tudo deve de ser feito, usando sempre uma linguagem simples para que todos possam entender.

Eu preparei uma só “Media Queries”, penso ser o suficiente para funcionar em quase todas as resoluções disponíveis para telemóveis, tablets, notebooks e desktops.

/* --------------------------------------------------------------
2. MEDIA QUERIES
-------------------------------------------------------------- */
/* Defaults Breakpoints */
@media screen and (max-width: 767px) {
    
} 

Mas no que consiste este “Media Queries”? Neste caso especifico, ela é usada para quebrar uma linha em uma determinada resolução, ou seja, nós temos uma lista de itens numa linha, mas, a partir de uma resolução inferior a 768px queremos que os itens sejam apresentados em linhas diferentes. Nela também definimos o novo visual quando se verificar a tal quebra.

Menu drop-down responsivo

O HTML do menu e uma simples lista, como este é um menu de navegação, é o lugar perfeito para implementar o HTML5 elemento “nav”.

<!-- START NAV -->
<nav id="site-navigation" class="main-navigation" role="navigation">
    <ul>
        <li class="current-menu-item"><a href="#">home</a>
            <ul class="sub-menu">
            	<li><a href="#">submenu version II</a></li>
            	<li><a href="#">submenu version II</a>
                    <ul class="sub-menu">
                    	<li><a href="#">submenu version III</a></li>
                    	<li><a href="#">submenu version III</a></li>
                    </ul>
                 </li>
            </ul>
        </li>
        <li><a href="#">features</a></li>
        <li><a href="#">pages</a></li>
        <li><a href="#">blog</a></li>
        <li><a href="#">contat</a></li>  
    </ul>
</nav><!-- #site-navigation -->                       
<!-- END NAV -->

O visual do menu vai depender do que queremos para o nosso menu drop-down responsivo. Mas basicamente, o funcionamento será o mesmo se você quiser adequar o visual para o seu site/blog:

/* --------------------------------------------------------------
1. NAVIGATION
-------------------------------------------------------------- */
/* main-navigation */
.main-navigation {
    margin: 30px 0 20px 0;
    border-top: 1px solid #fafafa;
    border-bottom: 1px solid #fafafa;
    text-align: center;
    background: #fefefe; 
}
.main-navigation ul {
    list-style: none;
    margin: 0px;
}
.main-navigation ul li {
    position: relative;
    display: inline-block;
    margin-left: -4px;
    text-align: left;
}
.main-navigation ul li a {
    color: #6c6c6c;
    display: block;
    font: 400 14px/1.6 serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 22px;
}
.main-navigation .current-menu-item > a, .main-navigation .current_page_item > a { color: #9A6614; }
.main-navigation > ul li { padding: 8px 0; }
.main-navigation > ul li a { padding: 0 25px 0 25px; border-left: 1px solid #f0f0f0; }
.main-navigation ul li:first-child a{ border-left: 0px; }
.main-navigation ul li:hover > ul { display:block; }
/* submenu */
.main-navigation ul.sub-menu {
    display: none;
    margin-top: 8px;
    position: absolute;
    left: 14px;
    padding:0 12px;
    min-width: 130px;
    background: #fff;
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
    z-index: 999990;
}
.main-navigation ul.sub-menu li {
    border-left: 0px;
    border-top: 1px solid #fafafa;
    padding: 8px 0;
    float: none;
    font-size: 0.9em; 
    display: block;
}
.main-navigation ul.sub-menu li a {
    border: none;
    padding: 0;
    text-transform: lowercase; 
}
.main-navigation ul.sub-menu li:first-child { border-top: none; }
/* levels */
.main-navigation ul.sub-menu li ul { left: 130px; top:-16px; margin: 17px 0 0 0; }
.main-navigation ul li ul.submenu li:hover > ul { display:block }

Agora o “Media Queries” que “oculta” o menu drop-down responsivo, para que ele não ocupe tanto espaço, vai transformá-lo em um só botão, que esconderá o restante menu.O restante já expliquei anteriormente:

/* --------------------------------------------------------------
2. MEDIA QUERIES
-------------------------------------------------------------- */
/* Defaults Breakpoints */
@media screen and (max-width: 767px) {
    .main-navigation {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .main-navigation ul li a {
        border-left: 0px;
        margin-left: 0;
        padding-left: 0;
        font: 400 13px/1.4 serif;
    }
    .main-navigation ul li {
        display: none;
        border-top: 1px solid #fafafa;    
    }
    .main-navigation ul li.current-menu-item {
        display: block;
    }
    .main-navigation:hover ul li {
        display: block;
    }
    /* submenu */
    .main-navigation ul.sub-menu {
        margin-top: 0px;
        left: 0px;
        z-index:999999;
    }
    /* third level */
    .main-navigation ul.sub-menu li ul {top:30px; left:30px;margin:0; }
} 

Este “Menu drop-down responsivo“, não será o ideal, principalmente para equipamentos com tecnologia “touch”, mas isso será um assunto para outro artigo. Se tiverem alguma dúvida ou observação, deixe seu comentário 😀

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *