Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

alemaopn

Menu responsivo com css

Por , em Desenvolvimento frontend

Recommended Posts

alemaopn    0

alemaopn
Postado

Boa Tarde, Estou com problema em um menu desenvolvido por css, gostaria que ele ficasse responsivo, porem não obtive sucesso em todas as formas ja utilizadas!

 

Segue abaixo o Html

 

<body>
<header>
<a href="#" ><img src="images/cabecalho.png" class="logo"> </a>
</header>

<ul id="nav">
<li class="left"><a href="#">Home</a></li>
<li class="right"><a href="#">Quem Sou </a></li>
<li class="left"><a href="#">Diy</a></li>
<li class="right"><a href="#">Look Do Dia</a></li>
<li class="left"><a href="#">Contato</a></li>
<li class="right"><a href="#">Anuncie</a></li>
</ul>

</body>

 

 

Segue Abaixo o CSS

ul li {
float: left;
list-style: none;
margin-right: 1em;

}

li a {
color: #544738;
text-decoration: none;
float: left;
font-size: 25px;
padding: 12px;

}

li a:hover {
color: #7eb9be;
}

@font-face {
font-family: 'KulminoituvaRegular';
src: url('fonte/kulminoituva.ttf');
src: local('‚ò∫'), url('fonte/kulminoituva.ttf.woff') format('woff'), url('fonte/kulminoituva.ttf') format('truetype'), url('fonte/kulminoituva.ttf.svg#webfontHNAi9IoX') format('svg');
font-weight: normal;
font-style: normal;
}

ul li {
float: left;
list-style: none;
margin-right: 1em;
font-family: 'KulminoituvaRegular', helvetica, sans-serif;
font-size: 25px;
padding: 12px;
display: block;
margin-left: 4%;
margin-right: auto;
}

li a {
color: #544738;
text-decoration: none;
float: left;
}

li a:hover {
color: #7eb9be;
}

li a:hover {
-webkit-transform: rotate(-10deg) scale(1.2);
-moz-transform: rotate(-10deg) scale(1.2);
-o-transform: rotate(-10deg) scale(1.2);
}

.left a:hover {

-webkit-transform: rotate(-10deg) scale(1.2);
-moz-transform: rotate(-10deg) scale(1.2);
-o-transform: rotate(-10deg) scale(1.2);
}

.right a:hover {
-webkit-transform: rotate(10deg) scale(1.2);
-moz-transform: rotate(10deg) scale(1.2);
-o-transform: rotate(10deg) scale(1.2);
}
.left a:hover {

/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;

/*Transform*/
-webkit-transform: rotate(-10deg) scale(1.2);
-moz-transform: rotate(-10deg) scale(1.2);
-o-transform: rotate(-10deg) scale(1.2);
}

.right a:hover {

/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;

/*Transform*/
-webkit-transform: rotate(10deg) scale(1.2);
-moz-transform: rotate(10deg) scale(1.2);
-o-transform: rotate(10deg) scale(1.2);

}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diegus Miestro    21

Diegus Miestro
Postado

É porque seu CSS tá em valores absolutos e não em valores relativos, vai precisar trocar os 'px' por '%' e as fontes em 'em' e usar media queries, isso seria o básico, além de pensar no layout assim ou pode aprender um Framework pensado nisso como o Twitter Bootrap ou o recém Material Designer Lite

 

Veja esses exemplos de websites responsivos: http://mediaqueri.es/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito