Tutorial: Menu CSS avançado com itens de menu em posições personalizadas em absolute
Tutorial: Menu CSS avançado com itens de menu em posições personalizadas em absolute
DOWNLOAD TUTORIAL / DEMONSTRAÇÃO DO TUTORIAL
Trago pra vocês um menu em css diferente o que geralmente se acha na internet. Geralmente se colocam menus na horizontal ou na vertical. Neste tutorial é criar um menu onde as posições de cada item de menu ficará onde desejamos de uma forma aleatória como pode ser visto na imagem acima. Bom vamos ao trabalho e chega de papo.
1º passo – código html
<div id="container"> <div id="topo"> <h1><a href="http://www.novidadesnaweb.com.br">Novidades na WEB</a></h1> <ul id="menu"> <li><a class="item_home" href="#">Home</a></li> <li><a class="item_categorias" href="#">Categorias</a></li> <li><a class="item_design" href="#">Design</a></li> <li><a class="item_contato" href="#">Contato</a></li> </ul> <div id="tutorial"> <h2>Menu CSS</h2> Tutorial Menu CSS avançado Posições absolutas e diferenciadas para cada item do menu.</div> </div> </div>
1º passo explicação
Dando foco ao nosso tutorial, estarei explicando a parte do menu, até porque a estrutura do topo é básica. Foi criado a estrutura da lista com id menu, sendo que para cada item foi criado uma classe ( é essa classe que irá colocar o item do menu em sua posição específica).
2º passo – código css
body{ color:#fff; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px; } #container{ width:778px; height:auto; margin:0 auto; } #topo{ width: 778px; height: 250px; margin: 0 auto; position:relative; background: transparent url(imagens/bg_topo.jpg) left top no-repeat; } #container h1 a{ width:353px; height:80px; display:block; position:absolute; top:47px; left:15px; text-indent:-9999em; background:transparent url(imagens/logo.jpg) left top no-repeat; } #tutorial{ bottom:18px; left:36px; position:absolute; } #tutorial h2, #tutorial p{ margin:0; padding:0; } #tutorial h2{font-size:15px; margin:10px 0; border-bottom:1px dotted #fff;} #menu { position:relative; margin:0; padding:0; width:300px; height:180px; float:right; clear:both; } #menu li{list-style:none; display:inline;} #menu li a{ display:block; padding:2px 12px; position:absolute; background-color:#109DD0; border:3px solid #fff; color:#fff; text-decoration:none; font-weight:bold; } #menu li a.item_home{ left:120px; top:25px; } #menu li a.item_categorias{ top:70px; left:10px; } #menu li a.item_design{ bottom:6px; left:55px; } #menu li a.item_contato{ bottom:48px; left:153px; } #menu li a:hover{ color: #C50905; border: 3px solid #C50905; background-color:#fff; }
2º passo – explicação
Antes de comecar da explicação gostaria de dizer que no exemplo foi colocado o css diretamente no html, mas apenas para facilitar a visualização. Em trabalhos é aconcelhável colocá-lo em um arquivo css externo. #menu – foi colocado a o position:relative, é ele que irá dar a base para as para o position: absolute de cada item do menu. #menu li - list-style:none; retira os marcadores da lista (#menu). #menu li a – aqui são declaradas todas as propriedades que serão comuns a todos os links dos menus. Destaque para o position:absolute que cada item do menu irá precisar. #menu li a.item_home e demais itens da lista – a classe criada para cada item do menu junto com o position:absolute herdado da tag <a>, possibilita diferenciar cada link com a propriedade bottom:6px; e left:55px; . O mesmo acontece para cada item do menu.
Final
Espero que gostem com certeza com essa base dá pra criar qualquer menu nesse estilo. Deixo 2 sites que desenvolvi que tem esse estilo de menu. www.diegotavares.com.br e www.cristinazigoni.com , qualquer dúvida só deixar um comentário, até ao próximo tutorial.
DOWNLOAD TUTORIAL / DEMONSTRAÇÃO DO TUTORIAL
 Note Hp Dv6 1247 C2d 2.0ghz 4gb 320gb 16 Blu Ray Hdmi Mais info» R$ 2,088.77 até 18x de 156.66 |  Hp Touchsmart Tx2 1020 X2 2.2 4gb 320gb Bluetooth Biometria Mais info» R$ 2,599.90 até 18x de 194.99 |  Acer Aspire One A150 Intel 1.6ghz, 1.0gb Ram, 160gb Hd, Cam Mais info» R$ 699.99 até 18x de 52.50 |
| Vitrine TecnoBlog |
Loading ...