Pesquisar

Mostrando postagens com marcador dicas blogger. Mostrar todas as postagens
Mostrando postagens com marcador dicas blogger. Mostrar todas as postagens

"Dropdown menu com CSS3 "..."menu dropdown que usa os recursos CSS3"...


fonte:          
vagabundia

"Menú desplegable con CSS3"


Este es un menú desplegable que usa las características del CSS3 y que sólo requiere de una imagen. Lo interesante es que funcionará tambien en navegadores como Internet Explorer, aún cuando estos no soporten las nuevas propiedades; la única diferencia es que no se verán ni sombra ni bordes redondeados ni sombras.

Como siempre, el estilo hay que ponerlo antes de <
/head> y allí, podremos cambiar los detalles.





El HTML es una serie de listas anidadas y alli, sólo debemos tener cuidado para que las etiquetas queden correctamente cerradas. El código del ejemplo es el siguiente:
 
 
 
<ul id="nav">
  <li class="current"><a href="javascript:void(0);">Inicio</a></li>
  <li>
    <a href="javascript:void(0);">Menu 1</a>
    <ul>
      <li>
        <a href="javascript:void(0);">Sub Menu 1.1</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 1.1.1</a></li>
          <li><a href="javascript:void(0);">Sub Menu 1.1.2</a></li>
          <li><a href="javascript:void(0);">Sub Menu 1.1.3</a></li>
          <li><a href="javascript:void(0);">Sub Menu 1.1.4</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:void(0);">Sub Menu 1.2</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 1.2.1</a></li>
        </ul>
      </li>
      <li><a href="javascript:void(0);">Sub Menu 1.3</a></li>
      <li><a href="javascript:void(0);">Sub Menu 1.4</a></li>
    </ul>
  </li>
  <li>
    <a href="javascript:void(0);">Menu 2</a>
    <ul>
      <li>
        <a href="javascript:void(0);">Sub Menu 2.1</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 2.1.1</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.1.2</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.1.3</a></li>
        </ul>
      </li>
      <li><a href="javascript:void(0);">Sub Menu 2.2</a></li>
      <li><a href="javascript:void(0);">Sub Menu 2.3</a></li>
      <li>
        <a href="javascript:void(0);">Sub Menu 2.4</a>
        <ul>
          <li><a href="javascript:void(0);">Sub Menu 2.4.1</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.4.2</a></li>
          <li><a href="javascript:void(0);">Sub Menu 2.4.3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="javascript:void(0);">Menu 3</a></li>
  <li><a href="javascript:void(0);">Menu 4</a></li>
</ul>
 
REFERENCIAS:webdesignerwall.com


traduzindo:                                                                              


 "Menu drop-down com CSS3"
 

Este é um menu dropdown usando CSS3 características e requer apenas uma imagem. Curiosamente, também funciona em navegadores como o Internet Explorer, mesmo que eles não suportam as novas propriedades, a única diferença é que não haverá nenhuma sombra ou sombras ou bordas arredondadas.

Como sempre, o estilo deve ser colocada antes de 

</ head> e lá, nós podemos mudar os detalhes.

ver código:






HTML é uma série de listas aninhadas e ali, só temos de ter cuidado para que as marcas estão devidamente fechadas
 O código é o seguinte:
 
<ul id="nav">
<li class="current"><a href="javascript:void(0);">Inicio</a></li>
<li>
<a href="javascript:void(0);">Menu 1</a>
<ul>
<li>
<a href="javascript:void(0);">Sub Menu 1.1</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 1.1.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.3</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.1.4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Sub Menu 1.2</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 1.2.1</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Sub Menu 1.3</a></li>
<li><a href="javascript:void(0);">Sub Menu 1.4</a></li>
</ul>
</li>
<li>
<a href="javascript:void(0);">Menu 2</a>
<ul>
<li>
<a href="javascript:void(0);">Sub Menu 2.1</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 2.1.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.1.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.1.3</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">Sub Menu 2.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.3</a></li>
<li>
<a href="javascript:void(0);">Sub Menu 2.4</a>
<ul>
<li><a href="javascript:void(0);">Sub Menu 2.4.1</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.4.2</a></li>
<li><a href="javascript:void(0);">Sub Menu 2.4.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">Menu 3</a></li>
<li><a href="javascript:void(0);">Menu 4</a></li>
</ul>


REFERÊNCIAS:webdesignerwall.com
fonte e créditos:http://vagabundia.blogspot.com/

Share:

Page Header (Do Not Edit Here)

.

Popular Posts

Arquivados

Recent Posts


o ooO►Adicione sua URL no Google, e apareça nas buscas◄ || Пост!Featured on Hometalk.com