Menu desplegable en HTML
-
Upload
comandpromt -
Category
Software
-
view
117 -
download
0
description
Transcript of Menu desplegable en HTML
![Page 1: Menu desplegable en HTML](https://reader036.fdocumentos.com/reader036/viewer/2022073017/55833385d8b42adb148b4e02/html5/thumbnails/1.jpg)
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;}
![Page 2: Menu desplegable en HTML](https://reader036.fdocumentos.com/reader036/viewer/2022073017/55833385d8b42adb148b4e02/html5/thumbnails/2.jpg)
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;
![Page 3: Menu desplegable en HTML](https://reader036.fdocumentos.com/reader036/viewer/2022073017/55833385d8b42adb148b4e02/html5/thumbnails/3.jpg)
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;
![Page 4: Menu desplegable en HTML](https://reader036.fdocumentos.com/reader036/viewer/2022073017/55833385d8b42adb148b4e02/html5/thumbnails/4.jpg)
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;
![Page 5: Menu desplegable en HTML](https://reader036.fdocumentos.com/reader036/viewer/2022073017/55833385d8b42adb148b4e02/html5/thumbnails/5.jpg)
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>
![Page 6: Menu desplegable en HTML](https://reader036.fdocumentos.com/reader036/viewer/2022073017/55833385d8b42adb148b4e02/html5/thumbnails/6.jpg)
<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> <!-- Buscador --> <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 <!-- Buscador --> 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>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
![Page 7: Menu desplegable en HTML](https://reader036.fdocumentos.com/reader036/viewer/2022073017/55833385d8b42adb148b4e02/html5/thumbnails/7.jpg)
</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>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li> .