La Tecnologia Webmaster Seba37

Arrow Green Blue Vertical Menu

Arrow Green/Blue Vertical Menu

El mismo menu con dos diferentes colores.

Copia del CSS el menu que quieres y luego copia el HTML.

CSS: Menu Verde

<style>
    / * Créditos: Dynamic Drive CSS Library * /
    / * URL: http://www.dynamicdrive.com/style/ * /
    . arrowgreen (
    width: 180px; / * anchura del menú * /
    border-style: none sólidos sólidos sólidos;
    border-color: # 94AA74;
    border-size: 1px;
    border-width: 1px;
    )
    . arrowgreen ul (
    list-style-type: none;
    margin: 0;
    padding: 0;
    )
    . arrowgreen li a (
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    display: block;
    background: transparent url (https://img.webme.com/pic/s/seba37/arrowgreen.gif) 100% 0;
    height: 24px; / * Poner a la altura de la imagen BG-relleno dentro de enlace (es decir: 32px - 4px - 4px) * /
    padding: 4px 0 4px 10px;
    line-height: 24px; / * Set line-height de BG imagen de relleno dentro de enlace (es decir: 32px - 4px - 4px) * /
    text-decoration: none;
    )
    . arrowgreen li a: link,. arrowgreen li a: visited (
    color: # 5E7830;
    )
    . arrowgreen li a: hover (
    color: # 26370A;
    background-position: 100%-32px;
    )
    . arrowgreen a.selected li (
    color: # 26370A;
    background-position: 100%-64px;
    )
    </ style>

CSS: Menu Azul

<style>
    / * Créditos: Dynamic Drive CSS Library * /
    / * URL: http://www.dynamicdrive.com/style/ * /
    . arrowgreen (
    width: 180px; / * anchura del menú * /
    border-style: none sólidos sólidos sólidos;
    border-color: # 94AA74;
    border-size: 1px;
    border-width: 1px;
    )
    . arrowgreen ul (
    list-style-type: none;
    margin: 0;
    padding: 0;
    )
    . arrowgreen li a (
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    display: block;
    background: transparent url (https://img.webme.com/pic/s/seba37/arrowblue.gif) 100% 0;
    height: 24px; / * Poner a la altura de la imagen BG-relleno dentro de enlace (es decir: 32px - 4px - 4px) * /
    padding: 4px 0 4px 10px;
    line-height: 24px; / * Set line-height de BG imagen de relleno dentro de enlace (es decir: 32px - 4px - 4px) * /
    text-decoration: none;
    )
    . arrowgreen li a: link,. arrowgreen li a: visited (
    color: # 5E7830;
    )
    . arrowgreen li a: hover (
    color: # 26370A;
    background-position: 100%-32px;
    )
    . arrowgreen a.selected li (
    color: # 26370A;
    background-position: 100%-64px;
    )
    </ style>

HTML: Para cualquiera de los dos menus

<div class="arrowgreen">
    <ul>
    <li> <a href="http://www.dynamicdrive.com" _fcksavedurl="http://www.dynamicdrive.com" title="Home"> Home </ a> </ li>
    <li> <a href="http://www.dynamicdrive.com/style/" _fcksavedurl="http://www.dynamicdrive.com/style/" class="selected" title="CSS"> Biblioteca CSS </ a> </ li>
    <li> <a href="http://www.ddwhois.com" _fcksavedurl="http://www.ddwhois.com" title="Whois"> DD Whois </ a> </ li>
    <li> <a href="http://www.dynamicdrive.com/forums/" _fcksavedurl="http://www.dynamicdrive.com/forums/" title="Forums"> Foros </ a> </ li>
    <li> <a href="http://tools.dynamicdrive.com/" _fcksavedurl="http://tools.dynamicdrive.com/" title="Tools"> Herramientas para webmasters </ a> </ li>
    <li> <a href="http://www.javascriptkit.com" _fcksavedurl="http://www.javascriptkit.com" title="JavaScript"> JavaScript </ a> </ li>
    </ ul>
    </ div>

Arrow Green Blue Vertical Menu

Más Contenido

Link De interes

Ingreso

Tu Foro Webmaster

Publicidades

Web Amigas

Herramientas Populares

Anadidos Recientemente

Nombre de usuario:
Contraseña: