MENÚ 2 CON CSS3

ESPECTACULARES MENÚS HECHOS CON CSS3 PARA BLOGGER

Introducir en el contenido de un gadget hatml/java, lo siguiente[1]:

<style type="text/css">#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu ul{background:#333;height:35px;list-style:none;margin:0;padding:0}#cssmenu li{float:left;padding:0}#cssmenu li a{background:#333url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5j5NNEDjDzpb83TdzBT84K9qGIod4Z3S-7Cl8_jrzGjrhV8dbcXNNvwgPZeOrFduRgpFK3JZz6H6ZmzXIh6x4fWL3X6EuM2b4YaLOEdpt2HGaJ5NYE-_SSlx8Z1I419qWhU8QuQw5Gdpp/s1600/seperator.gif') bottom right no-repeat;display:block;font-weight:normal;line-height:35px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenu > ul > li > a{color:#ccc}#cssmenu ul ul a{color:#ccc}#cssmenu li > a:hover,#cssmenu ul li:hover > a{background:#2580a2url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0D3u6fCz_Ss7NSDVUqsD6bjh6_j5xoAa-d942yx9W3wVfKgOz-SHFzQZyYM6QAz7Xmy3cD-3sRCqbdmMZbv-EY-0REHYQMQs3WDNG1VhQzssRvFh7w2jpg62LMwpHwJUEYjyElqt6KDUk/s1600/hover.png') bottom center no-repeat;color:#FFF;text-decoration:none}#cssmenu li ul{background:#333;display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu li:hover ul{display:block}#cssmenu li li{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXenyjHZNv8u7X4CE-x4zPfENRkE1_g_LqrJlSOsTyw2a5QrDdXiY6EY8Zskmd3PG9AG2NS3Km0R3Epb2vAPoTF-JAvWQ4P56k9dkX0lc97XrsNic94jg62wBCYQJKxQqX2x66TfTZpEuF/s1600/sub_sep.gif') bottom left no-repeat;display:block;float:none;margin:0;padding:0;width:225px}#cssmenu li:hover li a{background:none}#cssmenu li ul a{display:block;height:35px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul li:hover > a{background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6VF09gy54uRhJnKHBrpB1T17L1yZDuVQy2pkRjZhLSiW4-bhW_mTVR5SPhtlrBWHiu7Z0pPCQgfFy9aPyF5RtJsTwgdVsT0DQCAyW92DpuTFWT3EbQZIfPHbUNePfvu91jhrNkOTf0db_/s1600/hover_sub.png') center left no-repeat;border:0;color:#fff;text-decoration:none}#cssmenu p{clear:left}</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this CSS Drop Down Menu code or it will not work -->



<!-- customize your menus Links -->

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

index.html à ahí hay que poner el url de la página a la que se quiere ir

Y allí buscar por ejemplo "Home", y etc., y reemplazarla por la palabra que quieras, y las partes que tengan # debes reemplazarlo por tu URL.

Inicio    final

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Menu1</span></a></li>
<li class="has-sub"><a href="#"><span>Menu2</span></a>
<ul>
<li><a href="#"><span>Submenu21</span></a></li>
<li><a href="#"><span>Submenu22</span></a></li>
<li class="last"><a href="#"><span>Submenu23</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Menu3</span></a>
<ul>
<li><a href="#"><span>Submenu31</span></a></li>    YYY
<li class="last"><a href="#"><span>Submenu32</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Menu4</span></a></li>   XXX
</ul>
</div>

DESCRIPCION MENÚ COMPLETO

Para añadir una pestaña nueva copiar la línea XXX (pero sin las X)

Para añadir submenús copiar la línea YYY (pero sin las Y)

---

[1] Cambios de color:

-        #333 à (cssmenu ul ) número del color que se puede cambiar (este es el color de la caja que contiene los menús) (ffffff à esto es igual a blanco

-        Left àsituation ¿?

-        333 à (cssmenu li a ) color caja de los menús principales

-        #ccc à color del texto del menú (cssmenu > ul > li > a)

-        #ccc à color del texto submenus (cssmenu ul ul a)

-        #2580a2 à cambia color cuando pasa el ratón por encima del menú (cssmenu ul li:hover > a)

-        bottom center no-repeat;color:#FFF; al pasar el ratón por las pestañas del menú, cambia el color del texto

-        text-decoration:none}#cssmenu li ul{background:#333: color de la caja de los submenus

-        #cssmenu li ul a:hover,#cssmenu li ul li:hover > a{background:#2580a2: cambia color cuando pasas ratón por encima desubmenús

Tamaños:

-        width:225px;z-index:200: ancho de las pestañas de los submenus

CAMBIA LAS PESTAÑAS POR UN MENÚ PERSONALIZADO

Lo bueno de ésta opción es que podemos diseñar los botones que funcionarán como menú, y así tenerlo todo unificado.

Aquí os enseño tres ejemplos de menús que he hecho con fuentes, recortes de fondos e imágenes: