REVISTA ONLINE UNIDAD EDUCATIVA TIA BLANQUITA: Contribuciones

PRIMER PASO

Para poner este menú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:

/* 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkj4ezaBV6JBitrlxc29wMRKH5qr31k6wtutBjV5O4pYGM2c32Kok3n_mc2XoBJWGw44SSEZJ-wGX0_vsEDiXDST7FnFsqJ78TAmwxcG_XaxxV-7X5z5Ib2EYLiLtGntmvsPB-9MrJFis/) 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEkj4ezaBV6JBitrlxc29wMRKH5qr31k6wtutBjV5O4pYGM2c32Kok3n_mc2XoBJWGw44SSEZJ-wGX0_vsEDiXDST7FnFsqJ78TAmwxcG_XaxxV-7X5z5Ib2EYLiLtGntmvsPB-9MrJFis/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3LP6HV0SjRNCkZxOmoxl_asnqU6RbTq8-rfBRp9OLpQqj525f62_1VAmvHM00vYfrVflqEvVvB1VT_9UoVF8RuNeenKorNIvAd3sGLx6orqXB6cBcEkecXhQyCyXJSBSRhTnwArqxhgQ/s1600/search-bar.png) no-repeat;

}

#search-box {

margin-top: 3px;

border:0px;

background: transparent;

text-align:center;

}

Luego entra en Diseño y en un gadget HTML/Javascript pega lo siguiente:

<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>

<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>

<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>

<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>

</li>

</ul>

</div>

Lo primero es entrar en Plantilla | Edición de HTML y SIN expandir los artilugios busca esta línea:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Elimina lo que está en color rojo.

Es posible que tengas muchas partes como la que está en rojo, elimina todas las que encuentres.

Luego busca esta parte en la plantilla:

/* Tabs

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

Y elimina todo lo que haya dentro de ello.HASTA

/* Headings

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

Ya eliminado, en su lugar agrega lo siguiente:

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

#crosscol li:hover {position:relative;}

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

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

Contribuciones

No hay comentarios:

Publicar un comentario