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 😀