Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal poderiam me dar exemplos de menus responsivos(os mais utilizados) e como faze-los
já resolvi o poblema
>
3 minutos atrás, Gabriel42 disse:
já resolvi o poblema
Poderia postar pra gente? Vai que alguém precise de ajuda futuramente e use o seu exemplo :)
Conteudo migrado sem texto.
Gabriel, legal .... mas serei um pouco mais chato :|
Quando você termina algo depois de pedir ajuda é legal postar o código e explicar o que fez, dessa forma se alguém, num futuro, usar a busca do fórum pode achar a sua solução e implementar no trabalho dela.
Isso vale para todas as pessoas em todas as salas desse fórum, é uma maneira de propagar todas as ideias que foram movimentadas aqui.
explicação melhor que um video só se eu dar aula particular pra pessoa
É mais ou menos o que o fórum faz com quem tem dúvidas ... dá uma aula particular, com a possibilidade de ser com vários professores e com código direto no fórum. Alguma das suas dúvidas foi respondida com vídeo?
>
1 hora atrás, Gabriel42 disse:
explicação melhor que um video só se eu dar aula particular pra pessoa
E outra, alguma parte do que está no código - digitado aqui - pode ser pesquisado, infelizmente ainda não chegamos ao ponto de realizar pesquisas dentro do vídeo. Nem vou comentar sobre o fato de algumas empresas bloquearem sites de vídeo.
Pessoal eu estava fazendo um layout responsivo e fiz o menu para mobile primeiro (first mobile), ai agora não estou conseguindo fazer o texto
aparecer fora do menu responsivo, já tirei o icone hamburguer e os links do menu sumiu
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Menu Responsivo</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
</head>
<body>
<header>
<input type="checkbox" id="btn-menu">
<label for="btn-menu"> <i class="fa fa-bars" aria-hidden="true"></i> </label>
<nav class="menu">
<ul>
<li><a href="#">Home</i></a></li>
<li class="submenu"><a href="#">Produtos <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul>
<li><a href="#">Hospedagem de Sites</i></a></li>
<li><a href="#">Hospedagem Wordpress</i></a></li>
<li><a href="#">Registro de Domínio</i></a></li>
<li><a href="#">Servidor Dedicado</i></a></li>
<li><a href="#">E-mail Exchange</i></a></li>
</ul>
</li>
<li class="submenu"><a href="#">Sobre <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul>
<li><a href="#">Sobre nós</i></a></li>
<li><a href="#">Parceiros</i></a></li>
<li><a href="#">Blog</i></a></li>
</ul>
</li>
<li><a href="#">FAQS</a></li>
</ul>
</nav>
</header>
<!-- JQUERY -->
<script>
$(".submenu").click(function(){
$(this).children("ul").slideToggle();
})
$("ul").click(function(p){
p.stopPropagation();
})
</script>
</body>
</html>
**CSS**/ RESET /
* {margin: 0; padding: 0; font-size: 100%; font-family: 'Open Sans', sans-serif; font-weight: normal; box-sizing: border-box; border: none;
outline: none;}
body {background-color: #fff;}
img {max-width: 100%;}
ul {list-style: none;}
a {text-decoration: none;}
/ MENU /
header {height: 50px; background-color: #CE852A;}
header label {font-size: 2.2em; color: #fff; cursor: pointer; padding: 1% 2%;} #btn-menu {display: none;}
.menu {position: absolute; width: 100%; transform: translateX(-100%); transition: all 0.6s;}
#btn-menu:checked ~ .menu {transform: translateX(0%);}
.menu ul {display: block; background: #555;}
.menu ul ul {width: 100%; position: absolute; background: rgba(0,0,0,0.4); width: 100%; display: none;}
.menu ul li ul {position: static;}
.menu a {display: block; padding: 15px 20px; color: #fff; font-size: 1.1em;}
.menu a:hover {background: rgba(0,0,0,0.3);}
.menu i {position: absolute; float: right; right: 2%;}
@media screen and (min-width: 768px) {
Alguem me ajuda por favor a intenção é o menu desktop ficar assim: http://prnt.sc/f75qe5
Tem que esse tópico:
No próprio fórum deve ter alguns exemplos ... tu chegou a pesquisar?