Menu desplegable en HTML

1 - Editar el código HTML

2 - Pulsar CTRL+F

3 - Buscamos la siguiente línea: <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

4 - Elimina class='tabs'

5 - Busca esta parte en la plantilla: /* Tabs

----------------------------------------------- */

6 - Eliminamos todo hasta /* Headings: /* Headings ----------------------------------------------- */

7 - Pegamos el siguiente código:

#crosscol ul {z-index: 200; padding:0 !important;}

#crosscol li:hover {position:relative;}

#crosscol ul li {padding:0 !important;}

.tabs-outer {z-index:1;}

8 - Buscamos ]]></b:skin>

9 - Encima de ]]></b:skin> pegamos:

/* Menu horizontal con buscador

----------------------------------------------- */

#menuWrapper {

width:100%; /* Ancho del menú */

height:35px;

padding-left:14px;

background:#333; /* Color de fondo */

border-radius:20px; /* Bordes redondeados de la barra principal */

}

.menu {

padding:0;

margin:0;

list-style:none;

height:35px;

position:relative;

z-index:5;

font-family:arial, verdana, sans-serif;

}

.menu li:hover li a {

background:none;

}

.menu li.top {display:block; float:left;}

.menu li a.top_link {

display:block;

float:left;

height:35px;

line-height:34px;

color:#ccc;

text-decoration:none;

font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;

font-size:13px; /* Tamaño de la fuente */

font-weight:bold;

padding:0 0 0 12px;

cursor:pointer;

}

.menu li a.top_link span {

float:left;

display:block;

padding:0 24px 0 12px;

height:35px;

}

.menu li a.top_link span.down {

float:left;

display:block;

padding:0 24px 0 12px;

height:35px;

}

.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }

.menu li:hover {position:relative; z-index:2;}

.menu ul,

.menu li:hover ul ul,

.menu li:hover ul li:hover ul ul,

.menu li:hover ul li:hover ul li:hover ul ul,

.menu li:hover ul li:hover ul li:hover ul li:hover ul ul

{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-

style:none;}

.menu li:hover ul.sub {

left:0;

top:35px;

background:#333; /* Color de fondo del submenú */

padding:3px;

white-space:nowrap;

width:200px;

height:auto;

z-index:3;

}

.menu li:hover ul.sub li {

display:block;

height:30px;

position:relative;

float:left;

width:200px;

font-weight:normal;

}

.menu li:hover ul.sub li a{

display:block;

height:30px;

width:200px;

line-height:30px;

text-indent:5px;

color:#ccc;

text-decoration:none;

}

.menu li ul.sub li a.fly {

/* Color de fondo del submenú */

background:#333

url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluz

AM/arrow_over.gif) 185px 10px no-repeat;}

.menu li:hover ul.sub li a:hover {

background:#2580a2; /* Color de fondo al pasar el cursor */

color:#fff;

}

.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {

/* Color de fondo al pasar el cursor */

background:#2580a2

url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluz

AM/arrow_over.gif) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,

.menu li:hover ul li:hover ul li:hover ul,

.menu li:hover ul li:hover ul li:hover ul li:hover ul,

.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {

left:200px;

top:-4px;

background: #333; /* Color de fondo del submenú */

padding:3px;

white-space:nowrap;

width:200px;

z-index:4;

height:auto;

}

#search {

width: 228px; /* Ancho del buscador */

height: 22px;

float: right;

text-align: center;

margin-top: 6px;

margin-right: 6px;

/* Imagen de fondo del buscador */

background:

url(http://4.bp.blogspot.com/_qgZA1ny_dAs/Szuhn02zO6I/AAAAAAAADdI/u2etpRWlwF8/s1600

/search-bar.png) no-repeat;

}

#search-box {

margin-top: 3px;

border:0px;

background: transparent;

text-align:center;

}

10 - En Diseño en un gadget HTML/Javascript pegar lo siguiente: <div id='menuWrapper'> <ul class='menu'> <li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li> <li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestaña 2.1</a><ul> <li><a href='URL del enlace'>Pestaña 2.1.1</a></li> <li><a href='URL del enlace'>Pestaña 2.1.2</a></li> <li><a href='URL del enlace'>Pestaña 2.1.3</a></li> </ul> </li> <li class='mid'><a class='fly' href='#'>Pestaña 2.2</a> <ul> <li><a href='URL del enlace'>Pestaña 2.2.1</a></li> <li><a href='URL del enlace'>Pestaña 2.2.2</a></li> <li><a href='URL del enlace'>Pestaña 2.2.3</a></li> <li><a class='fly' href='#'>Pestaña 2.2.4</a> <ul> <li><a href='URL del enlace'>Pestaña 2.2.4.1</a></li> <li><a href='URL del enlace'>Pestaña 2.2.4.2</a></li> <li><a href='URL del enlace'>Pestaña 2.2.4.3</a></li> </ul> </li> <li><a href='URL del enlace'>Pestaña 2.2.5</a></li> <li><a class='fly' href='#'>Pestaña 2.2.6</a> <ul> <li><a href='URL del enlace'>Pestaña 2.2.6.1</a></li> <li><a href='URL del enlace'>Pestaña 2.2.6.2</a></li> </ul> </li> </ul> </li> <li><a href='URL del enlace'>Pestaña 2.3</a></li> <li><a href='URL del enlace'>Pestaña 2.4</a></li> <li><a href='URL del enlace'>Pestaña 2.5</a></li> </ul> </li> <li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 3</span></a> <ul class='sub'> <li><a href='URL del enlace'>Pestaña 3.1</a></li> <li><a href='URL del enlace'>Pestaña 3.2</a></li> <li><a href='URL del enlace'>Pestaña 3.3</a></li> <li><a href='URL del enlace'>Pestaña 3.4</a></li> </ul> </li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 4</span></a> <ul class='sub'> <li><a href='URL del enlace'>Pestaña 4.1</a></li> <li><a class='fly' href='#'>Pestaña 4.2</a> <ul> <li><a href='URL del enlace'>Pestaña 4.2.1</a></li> <li><a href='URL del enlace'>Pestaña 4.2.2</a></li> <li><a href='URL del enlace'>Pestaña 4.2.3</a></li> <li><a href='URL del enlace'>Pestaña 4.2.4</a></li> <li><a href='URL del enlace'>Pestaña 4.2.5</a></li> <li><a href='URL del enlace'>Pestaña 4.2.6</a></li> </ul> </li> <li><a href='URL del enlace'>Pestaña 4.3</a></li> <li><a href='URL del enlace'>Pestaña 4.4</a></li> <li><a href='URL del enlace'>Pestaña 4.5</a></li> <li><a href='URL del enlace'>Pestaña 4.6</a></li> </ul> </li> <li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 5</span></a> <ul class='sub'> <li><a href='URL del enlace'>Pestaña 5.1</a></li> <li><a href='URL del enlace'>Pestaña 5.2</a></li> <li><a href='URL del enlace'>Pestaña 5.3</a></li> </ul> </li>  <li> <form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> <input id='search-box' name='q' onblur='if (this.value == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'/></form> </li> </ul> </div>

11 - Nota: Antes de  puedes agregar más pestañas si lo deseas. Si quisieras añadir otra pestaña simple, agrega una línea como esta:

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li> Si quisieras agregar una pestaña con subpestañas entonces agrega este código:

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>

<ul class="sub">

<li><a href="URL del enlace">Sub pestaña</a></li>

</ul>

</li> Y si quisieras que una de las subpestañas tuviera otras subpestañas entonces elimina una línea como la que está en color naranja y cámbiala por un código como este:

<li><a href="#" class="fly">Sub pestaña</a>

<ul>

<li><a href="URL del enlace">Otra Sub pestaña</a></li>



</ul>

</li> .

Menu desplegable en HTML

Software

Transcript of Menu desplegable en HTML