Pixel Fórum
Bem vindo ao Pixel Fórum. Se registre-se.
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Conectar-se

Esqueci minha senha

Últimos assuntos
» [Tutorial] Sing Animada
Ter Jan 08, 2013 5:32 pm por Dener

» [Tutorial] Efeito C4D
Ter Jan 08, 2013 5:29 pm por Dener

» [Abertura] - Pixel !
Ter Jan 08, 2013 4:56 pm por Dener

» Quebrando as Regras
Ter Jan 08, 2013 4:07 pm por Dener

» [Servidor] Mu - Walkman
Ter Jan 08, 2013 3:57 pm por Dener

» [Distração] O que gosta de fazer
Ter Jan 08, 2013 3:19 pm por VictorV.

» [Servidor] DDtank TB
Ter Jan 08, 2013 2:27 pm por Dener

» Fun.: We Are Young ft. Janelle Monáe
Ter Jan 08, 2013 2:25 pm por Dener

» Validação Inline De Formulário
Ter Jan 08, 2013 10:48 am por 

Top dos mais postadores
VictorV.
 
Dener
 
Kreitos
 
,Burn
 

Os membros mais ativos da semana

Os membros mais ativos do mês


Menu Drop Down Com CSS

Ir em baixo

Menu Drop Down Com CSS

Mensagem por  em Ter Jan 08, 2013 10:44 am

Como um entusiasta do CSS que sou, fico intrigado ao ver tantos plugins javascript para criação de menus drop down. Por mais que eles tenham a boa intenção de tornar os menus compatíveis com todos os navegadores, na maioria das vezes eles apenas complicam. Já que o único que não aceita totalmente os menus com subníveis é o Internet Explorer 6.

Neste tutorial vamos criar um menu drop down totalmente em CSS e acrescentar ao final um pequeno código javascript para dar suporte ao IE6.

Demo do Drop Down Menu Em CSS



Código HTML

Formamos o menu utilizando uma lista não ordenada

Código:
<ul class="menu">
  <li><a href="#" title="Inicial">Inicial</a></li>
  <li><a href="#" title="Sobre">Sobre</a></li>
  <li><a href="#" title="Serviços">Serviços</a>
        <ul>
                  <li><a href="#" title="Web design">Web Design</a></li>
                  <li><a href="#" title="Web master">Web Master</a></li>
                  <li><a href="#" title="SEO">SEO</a></li>
                  <li><a href="#" title="Design gráfico">Design Gráfico</a></li>                   
      </ul>
</li>
  <li><a href="#" title="Porftolio">Portfolio</a></li>
  <li  class="border0"><a href="#" title="Contato">Contato</a></li>               
</ul>

O detalhe fica por conta do terceiro menu, “serviços”. Note que antes de fechar o elemento da lista, é inserida outra lista entre as tags. É esta lista que será o menu drop down.

Estilizando O Menu


Iniciamos retirando os marcadores nativos dos itens da lista. Em seguida posicionamos o grupo, definimos uma borda e flutuamos à esquerda, caso contrário ele não aplica corretamente as bordas.

Código:
.menu{list-style:none; margin:20px 0 0 350px; border:1px solid #c0c0c0; float:left; }

Partimos para os itens do menu. O adicionamos position:relative para o item da lista, com isso criamos limites para, mais adiante posicionar o submenu.

Código:
.menu li{position:relative; float:left; border-right:1px solid #c0c0c0; }

Os links podem ser estilizados livremente, pois não exercem influência no resultado final. Se você utiliza o Firefox, Chrome ou Opera, poderá ver um efeito interessante ao passar o mouse sobre os links.

Utilizei a nova propriedade text-shadow do CSS3 para criar um efeito de brilho além da box-shadow para destacar o elemento

Código:
.menu li a{font-size:1.3em;  color:#333; text-decoration:none; padding:5px 10px; display:block;}

.menu li a:hover{background:#333; color:#fff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff; }

Submenu

Definimos a posição do submenu como absoluta por dois motivos. Primeiro para que sua posição fique limitada ao menu “serviços” que esta posicionado como relativo. Segundo, para que o submenu não interfira no fluxo dos elementos do menu.

Além de posicionar e definir a cor do plano de fundo, adicionamos o display:none, que esconde o submenu.

Código:
.menu li  ul{position:absolute; top:23px; left:-20px; background-color:#fff; display:none; }

Teste o código no navegador e veja que eles esta quase onde queremos. Só falta mostrar o submenu.

Quando o mouse passar sobre (:hover) um item do menu, a lista descendente será mostrada.

Código:
.menu li:hover ul, .menu li.over ul{display:block;}

Como aplicamos as relações de descendência dos elementos, é possível criar submenu para todos os links do menu principal e eles funcionarão perfeitamente sem necessidade de novas declarações CSS.

O efeito esta pronto!

Vamos adicionar mais alguns estilos para que tudo fique ajeitado.

Código:
.menu li ul li{border:1px solid #c0c0c0; display:block; width:110px;}

li.border0{border:0;}

Suporte Ao IE6


Nosso menu drop down esta funcionando perfeitamente nos browsers modernos. Mas o Internet Explorer 6, somente suporta o estado hover para links, não para elementos li, que é o que precisamos.

Para resolvermos o problema, basta copiar este código do Peter Nederlof (http://www.xs4all.nl/~peterned):

Código:
<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
/**
* Whatever:hover - V3.11
* http://www.xs4all.nl/~peterned/

* Copyright (c) 2009 Peter Nederlof
* Licensed under the LGPL license
* http://creativecommons.org/licenses/LGPL/2.1
*/
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\-]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
</script>

e adicionar a linha abaixo no arquivo CSS.

Código:
body {behavior:url(csshover.htc); }

Subníveis

Vamos agora expandir os horizontes e fazer um submenu para o submenu. O código HTML completo fica assim:

Código:
<ul class="menu">
  <li><a href="#" title="Inicial">Inicial</a></li>
  <li><a href="#" title="Sobre">Sobre</a></li>
  <li><a href="#" title="Serviços">Serviços</a>
   
      <ul>
            <li><a href="#" title="Web design">Web Design</a>
           
                <ul>
                    <li><a href="#" title="CSS">CSS</a></li>
                    <li><a href="#" title="XHTML">XHTML</a></li>                                        </ul>
               
        </li>
           
            <li><a href="#" title="Web master">Web Master</a></li>
            <li><a href="#" title="SEO">SEO</a></li>
            <li><a href="#" title="Design gráfico">Design Gráfico</a>
            </li>
        </ul>
       
    </li>
  <li><a href="#" title="Porftolio">Portfolio</a></li>
  <li  class="border0"><a href="#" title="Contato">Contato</a></li> 

Como você pode ver o submenu “Web Design” agora tem seu próprio submenu.

No código do arquivo CSS, são adicionadas as seguintes linhas:


Código:
.menu li:hover ul ul{display:none;}
.menu li ul li ul{z-index:900; top:0; left:110px; background:#eaeaea;}

Na primeira linha, declaramos que será escondida toda a lista aninhada em uma lista e esta for descendente de um elemento

° quando o mouse passar sobre este.

Na segunda linha, definimos um z-index alto para que o sub-submenu se sobreponha sobre todos os outros. Também o deslocamos 110px para a direita, que é a largura do submenu “Web Design”.

Alteramos a seguinte linha para suportar o novo submenu:

Código:
.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul{display:block;}

O CSS completo fica assim:

Código:
h1{font:bold 5em Arial, Helvetica, sans-serif; text-align:center; margin:30px 0 0 0; background:#333; color:#fff; padding:10px; letter-spacing:-0.07em; text-shadow:0px 0px 5px #eaeaea; }

.menu{list-style:none; margin:20px 0 0 350px; border:1px solid #c0c0c0; float:left; }

.menu li{position:relative; float:left; border-right:1px solid #c0c0c0;}

.menu li a{font-size:1.3em;  color:#333; text-decoration:none; padding:5px 10px; display:block;}

.menu li a:hover{background:#333; color:#fff; -moz-box-shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff; }

.menu li ul{position:absolute; top:23px; left:-20px; background-color:#fff; display:none; }

.menu li:hover ul ul{display:none;}

.menu li:hover ul, .menu li ul li:hover ul, .menu li.over ul, .menu li ul li.over ul{display:block;}

.menu li ul li{border:1px solid #c0c0c0; display:block; width:110px;}

li.border0{border:0;}

.menu li ul li ul{z-index:900; top:0; left:110px; background:#eaeaea;}

body {behavior:url(csshover.htc); }

/*Fix IE. Hide from IE Mac\*/
* html .menu {margin-left:175px; }
/*End*/

Conclusão

Em resumo, para criar um submenu você faz o seguinte:

  • – Posiciona relativamente (position:relative) e flutua à esquerda (float:left).

    • – Esconda (display:none) e posicione absolutamente (position:absolute).

      E quando o mouse passar sobre o

    • o submenu é mostrado (display:block).

      Entenda isso e você vai conseguir criar menus drop down com muita facilidade.

      Créditos WebMaster


      Pontos Pontos : 0
      Data de inscrição Data de inscrição : 01/01/1970

      Ver perfil do usuário

      Voltar ao Topo Ir em baixo

      Voltar ao Topo

      - Tópicos similares

       
      Permissão deste fórum:
      Você não pode responder aos tópicos neste fórum