Menu CSS com jQuery Round Corners

Alexandre Mattos — Wed, 09 Dec 2009 18:02:42 +0000

Olá amigos, estou adicionando agora um menu que é super legal e bem simples de fazer. O que terá de novidade é que o menu terá bordas arredondadas através do jQuery e usará a propriedade text-shadow, que é uma propriedade do CSS para fazer a sobreposição. O menu será baseado no menu do site jQuery.com, aquele azul. Vamos fazer ele no modo horizontal e no modo vertical para atender a demanda para qualquer tipo de aplicação.

Veja os menus em funcionamento.

Menu com jQuery

O menu é bem simples de fazer. Siga os passos seguintes para criação.

Vamos ao que interessa. No passo 1, crie o arquivo html, que é a estrutura do menu. Vamos primeiro fazer o menu horizontal. Você precisa baixar o plugin jQuery Corner, e a Biblioteca jQuery. Feito isso vamos a estrutura do html.





Alexandre Mattos | Menu com jQuery




    
        Download
        Documentation
        Tutorials
        Bug Tracker
        Discussion

Agora vamos ao CSS, crie o arquivo menu.css. Note que ele já foi referenciado no código acima com este nome.

menu.css

* {
 margin: 0;
 padding: 0;
 font-family: arial;
 font-size: 12px;
}

a{
 outline: none;
}

/* menu horizontal */

body{
 background: #0F1923;
}

#menu-h {
 float: right;
 margin: 30px;
 background: #0f67a1;
}

#menu-h ul {
 float: left;
 margin: 0;
 background: none;
 padding: 0 2px 0 2px;
}

#menu-h ul li {
 float: left;
 list-style: none;
 border-right: 1px solid #0d5995;
 border-left: 1px solid #1175ae;
 height: 34px;
 background: none;
}

#menu-h li a {
 float: left;
 padding: 0 12px;
 color: #eee;
 text-decoration: none;
 line-height: 34px;
 position: relative;
 background: none;
}

#menu-h li:first-child {
 background: none;
 border-left: none;
}

#menu-h li:last-child {
 background: none;
 border-right: none;
}

#menu-h li a:hover {
 color: #fff;
 text-shadow: 1px 1px 1px #000000; /* sombra */
}

Repare que na última linha tem o código text-shadow, que faz a sombra do link. Tudo pronto, mas ainda não está com as bordas arredondadas. O que fazer?
Simples! Agora faremos as referencias do jQuery Round e criaremos os scripts. Eu usarei ele refereciado nos sites listados acima.
Inclua dentro da tag head do seu html, logo abaixo da tag title o seguinte código.




Como vocês podem ver, somente inclui o js do jQuery, o js do plugin corner e abaixo fiz uma função para arredondar a borda da div que criamos, que no caso é menu-h. Com essa função você pode arredondar qualquer elemento que possui uma borda.
Muito simples não? Então agora vamos fazer o outro exemplo que é o menu vertical. Como já definimos que o menu horizontal, feito ainda pouco, se chamou menu-h, o vertical será chamado de menu-m. Este já será criado com o jQuery embutido, para posteriormente não ter que adicionar os scripts.




Alexandre Mattos | Menu com jQuery









        Download
        Documentation
        Tutorials
        Bug Tracker
        Discussion
    




Agora vamos fazer o arquivo css, note que o nome do arquivo css é menu2.css.
menu2.css
* {
	margin: 0;
	padding: 0;
	font-family: arial;
	font-size: 12px;
}

a{
	outline: none;
}

/* menu horizontal */

body{
	background: #0F1923;
}
#menu-m {
	background: #fff;
	float: right;
	margin: 30px;
	background: #0f67a1;
}

#menu-m ul li {
	list-style: none;
	border-top: 1px solid #0D5995;
	border-bottom: 1px solid #1175AE;
}

#menu-m li a:link, #menu-m li a:visited {
	color:#ffffff;
	text-decoration:none;
	display: block;
	text-align: left;
	padding: 8px 10px 8px 10px;
}

#menu-m li:first-child {
	border-top: none;
}

#menu-m li:last-child {
	border-bottom: none;
}

#menu-m li a:hover {
	color: #fffffe;
	text-shadow: 1px 1px 1px #000000; /* sombra */
}

Repare que a última linha tem o código da sombra. Agora sim está pronto seus menus.
O que foi feito neste menu é que, em vez de colocar para cada link o float left, eu mantive o inline, não citando a propriedade float.
E é isso, qualquer dúvida só perguntar. Abaixo tem o arquivo para download.
Download: Menu com jQuery.
Abraços!

Menu simples com CSS

Alexandre Mattos — Sun, 06 Dec 2009 07:29:43 +0000

Vou explicar como criar um menu bem legal com HTML e CSS. Abaixo tem uma imagem de como ele ficará.

Menu 1

Menu 1

Primeira mente vamos escrever o código da seguinte forma.

Criaremos uma div com a id “menu” com os links que você quer para seu menu.


Link 1 | Link 1 | Link 1 | Link 1

Perfeito, agora como faremos nosso menu com CSS? O CSS é a melhor maneira para dar visual a páginas web, com ela você pode inserir cores dos links, colocar imagens de fundo para cada elemento, uma série de coisas podem ser feitas pelo CSS.

Agora temos que colocar o visual. O menu poderá ser ajustado para ficar do lado esquerdo ou direito, basta alterar o float para left (esquerda) ou right (direita).

#menu {
margin: 15px;
padding: 10px;
background:#333333;
color: #ffffff;
float: left;
}

#menu a:link, #menu a:visited {
color: #ffffff;
text-decoration: none;
}

#menu a:hover {
color: #0099FF;
text-decoration: underline;
}

Este menu é bem simples. a id #menu define as características para o elemento que tem a id menu, no nosso caso a divisória. Demos 15px de margem, 10px de padding, que é a distância do texto, imagem, ou qualquer outro tipo de conteúdo para a borda, definimos uma cor (cinza escuro) para o fundo, que é a propriedade background, a propriedade color define a cor do texto, dizemos que será branco e por último usamos float, que significa que o texto irá flutuar a esquerda.

Menu 2

Primeiramente digitaremos o código html, que é nossa estrutura. Abaixo segue a imagem de como ele ficará.

Menu 2

Vamos ao código. Insira uma divisória com id “menu2″. Agora vamos fazer de um modo diferente, usando lista para formar-mos nosso menu.


    
    	Link 1
        Link 2
        Link 3
        Link 4
        Link 5
        Link 6

A tag “ul” é usada para listas que não possuem uma ordem, em inglês unordered list. A tag “li” é utilizada para definir um item da lista, do inglês list item.
Agora vamos implementar o CSS.

#menu2 {
margin: 0px;
float: right;
margin: 15px;
}

#menu2 ul {
background:#0099FF;
color: #ffffff;
list-style: none;
padding: 4px;
float: left;
}

#menu2 li {
float: left;
}

#menu2 li a:link, #menu2 li a:visited{
background: #0099FF;
display: block;
padding: 8px;
background: #8DCDEF;
text-decoration: none;
color: #ffffff;
}

#menu2 li a:hover{
background: #0099ff;
color: #ffffff;
}

Eu aconselho que sempre use para links a Pseudo classe :link e :visited e não deixar somente como a. Estes 2 códigos auxiliam o estado do nosso link. Se no caso você já visitou o link e não tiver formatado ele com CSS, ele ficará da cor padrão do navegador, que é roxo se eu não me engano.

As 4 pseudo classes usadas pela tag “a” são:

a:link -> Para o link normal
a:visited -> para links que o usuário já tenha acessado.
a:hover -> para quando o usuário passar o mouse em cima ele dar o estilo
a:active -> para quando o usuário clicar no link ele dar o estilo

Abaixo segue o código dos 2 menus juntos. Espero que tenham gostado.

“Copy aeee”




Alexandre Mattos Blog - Menu




	Link 1 | Link 1 | Link 1 | Link 1



    
    	Link 1
        Link 2
        Link 3
        Link 4
        Link 5
        Link 6

Um abraço!

Alexandre Mattos Blog » menu

Menu CSS com jQuery Round Corners

Menu simples com CSS