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.
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; } |