La Tecnologia Webmaster Seba37

SuckerTree Horizontal Menu

SuckerTree Horizontal Menu

CSS/: El siguiente código debe ser añadido a la sección HEAD de la página:

<style>/ * Créditos: Dynamic Drive CSS Library * /
    / * URL: http://www.dynamicdrive.com/style/ * /
    . suckertreemenu ul (
    margin: 0;
    padding: 0;
    list-style-type: none;
    )
    / * Lista de artículos de alto nivel * /
    . suckertreemenu ul li (
    position: relative;
    display: inline;
    float: left;
    background-color: # f3f3f3; / * global de color de fondo del menú * /
    )
    / * Menu más alto nivel de enlace de artículos de estilo * /
    . suckertreemenu ul li a (
    display: block;
    width: 90px; / * Ancho de vínculos superior nivel de elementos de menú * /
    padding: 1px 8px;
    border: 1px negro sólido;
    border-left-width: 0;
    text-decoration: none;
    Color: azul marino;
    )
    / * 1 de menú de nivel sub * /
    . suckertreemenu ul ul li (
    left: 0;
    position: absolute;
    top: 1em; / * sin necesidad de cambiar, como verdadero valor fijado por el script * /
    display: block;
    visibility: hidden;
    )
    / * Menú de elementos de nivel Sub lista (deshacer estilo de Elementos de la lista de nivel superior) * /
    . suckertreemenu ul li ul li (
    display: list-item;
    float: none;
    )
    / * Todos los niveles sub menú subsiguiente desplazamiento a partir del 1 submenú nivel * /
    . suckertreemenu ul li ul li ul (
    left: 159px; / * sin necesidad de cambiar, como verdadero valor fijado por el script * /
    top: 0;
    )
    / * Sub menú de enlaces a nivel de estilo * /
    . suckertreemenu ul li ul li a (
    display: block;
    width: 160px; / * ancho de los niveles de sub-menú * /
    Color: azul marino;
    text-decoration: none;
    padding: 1px 5px;
    border: 1px solid # ccc;
    )
    . suckertreemenu ul li a: hover (
    background-color: negro;
    color: white;
    )
    / * Imagen de fondo de la lista de enlaces de nivel superior del menú * /
    . suckertreemenu. mainfoldericon (
    background: # f3f3f3 url (https://img.webme.com/pic/s/seba37/down.gif) no-repeat center right;
    )
    / * Imagen de fondo para la posterior lista de enlaces de nivel de menú * /
    . suckertreemenu. subfoldericon (
    background: # f3f3f3 url (https://img.webme.com/pic/s/seba37/right.gif) no-repeat center right;
    )
    * P html # iepara (/ * Para un párrafo (de haberlos) que sigue inmediatamente al menú suckertree, añadir 1em separación superior entre los dos en IE * /
    padding-top: 1em;
    )
    / * Holly Hack for IE  * /
    * Html. Suckertreemenu ul li (float: left; altura: 1%;)
    * Html. Suckertreemenu ul li a (height: 1%;)
    / * Fin * /
    </ style>
    <script type="text/javascript">
    / / SuckerTree Menú horizontal (14 de septiembre, 06)
    / / Por Dynamic Drive: http://www.dynamicdrive.com/style/
    menuids var = [ "treemenu1"] / / Enter ID (s) de los menús de SuckerTree UL, separados por comas
    función buildsubmenus_horizontal () (
    for (var i = 0; i <menuids.length; i + +) (
    ultags var = document.getElementById (menuids [i]). getElementsByTagName ( "ul")
    for (var t = 0, t <ultags.length; t + +) (
    if (ultags [t]. parentNode.parentNode.id == menuids [i]) (/ / si este es un primer nivel submenú
    ultags [t]. style.top = ultags [t]. parentNode.offsetHeight + "px" / / dinámicamente submenús posición de primer nivel a la altura de la opción del menú principal
    ultags [t]. parentNode.getElementsByTagName ( "a") [0]. className = "mainfoldericon"
    )
    else (/ / else si esto es un menú de nivel sub (UL)
    ultags [t]. style.left = ultags [t-1]. getElementsByTagName ( "a") [0]. offsetWidth + "px" / / menú de posición a la derecha del elemento de menú que se activa
    ultags [t]. parentNode.getElementsByTagName ( "a") [0]. className = "subfoldericon"
    )
    ultags [t]. parentNode.onmouseover = function () (
    this.getElementsByTagName ( "ul") [0]. style.visibility = "visible"
    )
    ultags [t]. parentNode.onmouseout = function () (
    this.getElementsByTagName ( "ul") [0]. style.visibility = "hidden"
    )
    )
    )
    )
    if (window.addEventListener)
    (window.addEventListener "carga", buildsubmenus_horizontal, false)
    else if (window.attachEvent)
    window.attachEvent ( "onload", buildsubmenus_horizontal)
    </ script>

HTML:

<div class="suckertreemenu">
    <ul id="treemenu1">
    <li> <a href="#" _fcksavedurl="#" style="border-left: 1px solid black"> Tema 1 </ a> </ li>
    <li> <a href="#" _fcksavedurl="#"> Tema 2 </ a> </ li>
    <li> <a href="#" _fcksavedurl="#"> Carpeta 1 </ a>
    <ul>
    <li> <a href="#" _fcksavedurl="#"> subtema 1.1 </ a> </ li>
    <li> <a href="#" _fcksavedurl="#"> subtema 1.2 </ a> </ li>
    <li> <a href="#" _fcksavedurl="#"> subtema 1.3 </ a> </ li>
    <li> <a href="#" _fcksavedurl="#"> subtema 1.4 </ a> </ li>
    </ ul>
    </ li>
    <li> <a href="#" _fcksavedurl="#"> Tema 3 </ a> </ li>
    <li> <a href="#" _fcksavedurl="#"> Carpeta 2 </ a>
    <ul>
    <li> <a href="#" _fcksavedurl="#"> subtema 2.1 </ a> </ li>
    <li> <a href="#" _fcksavedurl="#"> Folder 2.1 </ a>
    <ul>
    <li> <a href="#" _fcksavedurl="#"> Punto 2.1.1 </ a> </ li>
    <li> <a href="#" _fcksavedurl="#"> Punto 2.1.2 </ a> </ li>
    <li> <a href="#" _fcksavedurl="#"> Punto 2.1.3 </ a> </ li>
    <li> <a href="#" _fcksavedurl="#"> Punto 2.1.4 </ a> </ li>
    </ ul>
    </ li>
    </ ul>
    </ a>
    </ li>
    <li> <a href="#" _fcksavedurl="#"> Tema 4 </ a> </ li>
    </ ul>
    style="clear: left;" <br />
    </ div>
    <p id="iepara"> resto del contenido aquí </ p>

SuckerTree Horizontal Menu

Más Contenido

Link De interes

Ingreso

Tu Foro Webmaster

Publicidades

Web Amigas

Herramientas Populares

Anadidos Recientemente

Nombre de usuario:
Contraseña: