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

Todo desenvolvedor web passa por um grande desafio que é a interpretação dos códigos em diversos tipos de navegadores. A comunidade dos desenvolvedores para Firefox trouxeram a tempos a ferramenta FireBug, uma mão na roda para descobrir as falhas em CSS, HTML e JavaScript. Nem todos os desenvolvedores conhecem este magnífico utilitário mas aos que conhecem, sempre tiveram problemas com o famigerado Internet Explorer.

Acredito que assim como eu, grande parte dos desenvolvedores tem algumas dores de cabeça e até noites em claros para desvendar mistérios de compatibilidade entre Internet Explorer e outros navegadores.

Recentemente descobri uma ferramenta similar ao Firebug feita pela própria Microsoft que acabou me poupando horas de trabalho para entender o porque alguns CSS’s funcionam em Firefox, Safari, Opera e Chrome, mas simplesmente não funcionam no Internet Explorer e vice-versa.

A interface do IE Developer tool é bastante parecida com a do Firebug, em alguns minutos, quem já estava acostumado a trabalhar com o Firebug consegue se achar tranquilamente, vai reclamar de algumas coisas que faltam no IE Dev e achar legal (ou não) alguns extras que não existem no firebug.

O grande lance é que pra quem precisa desenvolver específicamente para o o IE, é de fato uma mão na roda…aproveitem…segue o link para essas duas ferramentas e bom desenvolvimento!

IE Developer Tool
Firebug

Na foto, o monitor da esquerda está com o IE+IE Dev Tool e no da direita, Firefox+firebug…

Veja o exemplo do tutorial em funcionamento:  resultado final.

1ª parte:

Vamos criar o código html do nosso formulário. Repare que coloquei classes nos inputs e textarea, é indispensável para funcionamento correto no ie6.

<h1>Formulário exemplo</h1>
<form action="" id="form" name="form" method="post">

<label for="nome">Nome</label>
<input type="text" id="nome" name="nome" class="input" />

<label for="email">e-mail</label>
<input type="text" id="email" name="email" class="input"/>

<label for="telefone">Telefone</label>
<input type="text" id="telefone" name="telefone" class="input" />

<label for="msg">Mensagem</label>
<textarea name="msg" id="msg" cols="0" rows="0" class="textarea"></textarea>

<input type="submit" value="Enviar" class="botao"/>

</form>

2ª parte:

Vamos criar o código css do nosso formulário.

h1{
font-size:        20px;
font-family:      Verdana, Geneva, sans-serif;
}

#form{
width:            305px;
height:           300px;
background-color: #eee;
border:           #ccc 1px solid;
padding:          15px;
}

#form .input{
width:            300px;
color:            #666;
border:           #CCC 1px solid;
padding:          2px 1px;
}

#form .textarea{
width:            300px;
color:            #666;
height:           100px;
float:            left;
border:           #CCC 1px solid;
padding:          1px;
}

#form .botao{
background-color: #666;
border:           0;
color:            #FFF;
float:            left;
font-size:        15px;
margin:           18px 0;
padding:          3px;
width:            65px;
font-weight:      700;
clear:            both;

}

3ª parte:

Vamos criar o código jQuery para funcionamento do hover. Para isso, primeiro teremos de incluir primeiro o código js do jQuery, caso não tenha pegue aqui.

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>

depois de incluir o código do jQuery, criaremos o código que irá adicionar o hover.

$(document).ready(function() {
$('input[type=submit]').hover(function(){
$(this).css("background-color","#E0661C");
}, function(){
$(this).css("background-color","#666");
});

$('input[type=text], textarea').hover(function(){
$(this).css({border: "#E0661C 1px solid"});
}, function(){
$(this).css({border: "#CCC 1px solid"});
});
});

Depois é só salvar o arquivo, e adicioná-lo no seu html.

<script type="text/javascript" src="js/exemplo-hover-ie6.js"></script>

Concluindo:

Viu como foi simples. Se preferir, deixo os arquivos para download abaixo e o link para o resultado final (se precisar dê uma olhada no código fonte).

Veja o exemplo do tutorial em funcionamento:  resultado final.
jQuery:  jquery 1.2.6.js
Código hover:  exemplo-hover-ie6.js

Espero que ajude vocês pois antes desta solução hover no ie6 pramim era algo que não tinha como fazer. Dúvidas, é so postar seu comentário que respondo. Até a próxima!

Baixar livro Grátis

Fonte: Woork

Mas como saber o tamanho correto?
O site pxtoem.com, deixa isso bem fácil.

Após acessar, clique no tamanho desejado para ser padrão 100%(seta vermelha a esquerda), depois é so clicar em GET CSS, que ele já gera as configurações de tamanhos. Ele ainda te  possibilita calcular a conversão de px para em de forma customizada.

Deixo abaixo um código para que exemplificar a imagem:

#exemplo{
width:              100px;
height:             100px;
background-color:   #66F;
margin:             10px;
border:             #FFF 10px solid;
padding:            10px;
}