UN MENÚ HORIZONTAL SENCILLITO PARA TU WEB

UN MENÚ HORIZONTAL SENCILLITO PARA TU WEB

Este menu con Fondo Negro y letras blancas efecto 'tab' es simple, pero a la vez efectivo y elegante. Si quieres ponerlo en tu sitio, coloca este codigo en la parte CSS de tu web.

#menu {padding:0; margin:0; list-style:none;}<br /> #menu li {float:left; margin-left:1px; padding-top:2px;}<br /> #menu li a {display:block; height:38px; line-height:38px; padding:0 20px 0 0; float:left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZq3Qdc9p8bjRX_1A7k5y1jfuyA7wmZpMlLVQ9rdfDUCDpZnTLO_JVl7lm8A8NtNlkcF7mr0yLoMokBEEdCiv8QrUvJ93wg8jWovDv6hkuEyNkFe2AI6JEyjFX8S9bnyCIc9-7vQ9lBBma/s1600/tab_a.gif) no-repeat right top; color:#000; text-decoration:none;}<br /> #menu li a b {display:block; height:38px; float:left; padding:0 0 0 20px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj21N_5g41m0LPGyWhqjnYGgXmxEHAZKx9rViAvDhl50-AcKfw_fQxzYQCI8uako8hsQ1nYW5QpkhGlL9EL3NGjNonkKYnHuqFicBWmMW_JdHH1xA1X8g3ohop6Vp8H6_XWMNBQ5lQ09zcp/s1600/tab_b.gif) left top; cursor:pointer;}<br /> #menu li a:hover, <br /> .home #menu li#home a,<br /> .single #menu li#single a,<br /> .dropdown #menu li#dropdown a,<br /> .dropline #menu li#dropline a,<br /> .flyout #menu li#flyout a,<br /> .support #menu li#support a,<br /> .contact #menu li#contact a<br /> {background-position:right -51px; margin-top:-2px; height:40px;}<br /> #menu li a:hover b,<br /> .home #menu li#home a b,<br /> .single #menu li#single a b,<br /> .dropdown #menu li#dropdown a b,<br /> .dropline #menu li#dropline a b,<br /> .flyout #menu li#flyout a b,<br /> .support #menu li#support a b,<br /> .contact #menu li#contact a b<br /> {background-position:left -51px; height:40px;}

En Blogger, seria en la plantilla HTML antes de ]]></b:skin>



Pagina Demos :                             

Y ahora editamos un gadget HTML, lo ponemos donde queramos ubicarlo y en su interior añadimos:

1-Un clic en “Diseño” 

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo 

4-Coloca el siguiente codigo en el interior

<div id="menuContainer"><ul id="menu"><li class="first" id="Home"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="single"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="dropdown"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="dropline"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
<li id="flyout"><a href="URL"><b>NOMBRE ENLACE</b></a></li>
</ul></div>

Como veis facilísimo de configurar en NOMBRE ENLACE ponéis el nombre que os salga del alma en URL la dirección donde queráis que os lleve etc..

Fecha de la Publicación; 31-12-2018

 Fuente;

 Publicado por;