Fone : (19) 99218.1598 E-mail : contato@whestudio.com.br

Blog

Menu diagonal em CSS / The Impossible Slanted, Diagonal, Navigation Setup with CSS, jQuery & XHTML

30 maio, 2012
Renato
Dicas e Tutoriais
Nenhum comentário
79954 Views

Navegando pelas documentações e exemplos de aplicações que utilizam jQuery me deparei com um artigo sobre uma solução integrada a CSS cuja implementação seria supostamente impossível sem o uso de jQuery, porém já é possível criar um menu deste tipo usando CSS Puro e imagens transparentes em PNG.

index_1_11_interna_1a

A solução é bastante simples, se comparada à versão integrada (http://www.kevinleary.net/the-impossible-slanted-diagonal-navigation-setup-with-css-jquery-xhtml/). Se utiliza basicamente da propriedade CSS “margin-left” e “hover” para criar o efeito desejado.

Veja um exemplo em http://www.whestudio.com.br/blog-exemplos/Menu_diagonal_em_CSS_Puro/index.php

Código fonte HTML

<body>
<div id=”pagina”>
<div id=”menu_horizontal”>
<div id=”menu_horizontal_div”>
<a href=”#” id=”link_item_0″ target=”_self”></a>
<a href=”#” id=”link_item_1″ target=”_self”></a>
<a href=”#” id=”link_item_2″ target=”_self”></a>
<a href=”#” id=”link_item_3″ target=”_self”></a>
<a href=”#” id=”link_item_4″ target=”_self”></a>
<a href=”#” id=”link_item_5″ target=”_self”></a>
</div>
</div>
</div>
</body>

Código fonte CSS

@charset “utf-8″;
/* CSS Document */</code>
 
body {
margin:0;
padding:0;
}
 
#pagina {
width:980px;
position:absolute;
top:0;
left:50%;
margin-left:-490px;
}
 
#menu_horizontal {
position:absolute;
top:14px;
width:980px;
height:68px;
background:url(../images/index_1_11_MENUH_FUNDO.jpg) repeat-x;
}
 
#menu_horizontal_div {
top:0;
left:116px;
position:absolute;
}
 
a#link_item_0 {
width:132px;
height:68px;
background:url(../images/0_up.png) no-repeat;
display: table-cell;
top:0;
left:0;
position:absolute;
}
a#link_item_0:hover {
width:132px;
height:68px;
background:url(../images/0_hover.png) no-repeat;
top:0;
left:0;
position:absolute;
}
 
a#link_item_1 {
width:142px;
height:68px;
background:url(../images/1_up.png) no-repeat;
display:table-cell;
top:0;
left:113px;
position:absolute;
}
a#link_item_1:hover {
width:142px;
height:68px;
background:url(../images/1_hover.png) no-repeat;
top:0;
left:113px;
position:absolute;
}
 
a#link_item_2 {
width:138px;
height:68px;
background:url(../images/2_up.png) no-repeat;
display: table-cell;
top:0;
left:236px;
position:absolute;
}
a#link_item_2:hover {
width:138px;
height:68px;
background:url(../images/2_hover.png) no-repeat;
top:0;
left:236px;
position:absolute;
}
 
a#link_item_3 {
width:132px;
height:68px;
background:url(../images/3_up.png) no-repeat;
display: table-cell;
top:0;
left:349px;
position:absolute;
}
a#link_item_3:hover {
width:132px;
height:68px;
background:url(../images/3_hover.png) no-repeat;
top:0;
left:349px;
position:absolute;
}
 
a#link_item_4 {
width:160px;
height:68px;
background:url(../images/4_up.png) no-repeat;
display: table-cell;
top:0;
left:462px;
position:absolute;
}
a#link_item_4:hover {
width:160px;
height:68px;
background:url(../images/4_hover.png) no-repeat;
top:0;
left:462px;
position:absolute;
}
 
a#link_item_5 {
width:127px;
height:68px;
background:url(../images/5_up.png) no-repeat;
display: table-cell;
top:0;
left:603px;
position:absolute;
}
a#link_item_5:hover {
width:127px;
height:68px;
background:url(../images/5_hover.png) no-repeat;
top:0;
left:603px;
position:absolute;
}
:   Tags:
Adicionar Comentário

Posts recentes

Comentários

    Arquivos

    Categorias

    Meta