Un menú sencillo sin Javascript - FORO - www.unViciomas.com

Pertenece al Grupo " Visitante "     MP MP( )   
Elige un Tema y Crea tu Post!




  • Página 1 de 1
  • 1
FORO - www.unViciomas.com » TUTORIALES Y AYUDAS # » T. Para Internet o Webs » Un menú sencillo sin Javascript
Un menú sencillo sin Javascript
unViciomás
Fecha: Sábado, 02/10/2010, 1:57 PM | Link del Mensaje # 1

Oficial
STATUS: Offline
POSTS:
2215

PREMIOS:
0

REPUTACIÓN:
2

OBSERVACIONES:

RANGO:

Un menú sencillo sin Javascript

Un menú se compone de dos partes. Una parte en html, y una en css.

o Uno
o Dos
o Tres
o Cuatro

    es la etiqueta que señala una lista. Y
  • </li> es la etiqueta para cado elemento de esta lista. Es importante comprender como una lista está "construida" en html.

    ahora el mismo menu con los enlace hacia alguna pagina.

    o Uno
    o Dos
    o Tres
    o Cuatro

    La etiqueta <a></a> señala un enlace. Y target="_blank" señala que el enlace se abrirá en una nueva pestaña.

    Si queres poner varios menu en la misma pagina, tienes que darle un nombre a cada menu:

    <ul id="menu1">

  • <a href="http://alp2.clan.su" target="_blank">Uno</a></li>
  • <a href="http://file-sharing.clan.su" target="_blank">Dos</a></li>
  • <a href="http://google.com.ar" target="_blank">Tres</a></li>
  • <a href="http://youtube.com" target="_blank">Cuatro</a></li>

    SI PONES OTRO:

    <ul id="menu2">

  • <a href="http://alp2.clan.su" target="_blank">Uno</a></li>
  • <a href="http://file-sharing.clan.su" target="_blank">Dos</a></li>
  • <a href="http://google.com.ar" target="_blank">Tres</a></li>
  • <a href="http://youtube.com" target="_blank">Cuatro</a></li>

    Cuando pases el mouse por arriba el texto cambia de color, para cambiar el color de el texto esta puesto en color azul.

    <ul id="menu1">

  • <a href="http://file-sharing.clan.su" target="_blank">Dos</a></li>

    <style type="text/css"> <!--
    #menu1 {display:table; padding:0; margin:0px auto; list-style:none; white-space:nowrap;}
    #menu1 li {display:table-cell; margin:0; padding:0;}
    #menu1 li a {text-decoration:none; color:#ff530a; }
    #menu1 li a:hover { color:#000000;}
    --> </style>

    VER COMO QUEDA

    Este es el menu mas completo que tiene como una celda y adentro el texto, Cuando pases el mouse por arriba el texto y la celda pueden cambiar de color, para cambiar el color de la celda esta puesto en color rojo y de el texto en azul.

    <ul id="menu7">

  • <a href="http://alp2.clan.su" target="_blank">Uno</a></li>
  • <a href="http://file-sharing.clan.su" target="_blank">Dos</a></li>
  • <a href="http://google.com.ar" target="_blank">Tres</a></li>
  • <a href="http://youtube.com" target="_blank">Cuatro</a></li>

    <style type="text/css"> <!--
    #menu7 {display:table; padding:0; margin:0px auto; list-style:none; white-space:nowrap;}
    #menu7 li {display:table-cell; margin:0; padding:0;}
    #menu7 li a {float:left; font-size:100%; height:290%; line-height:290%; letter-spacing:1px; margin: 0; padding:0px 15px; text-decoration:none; color:#CD3333; background-color:#000000; border: 2px solid #FFFFFF; }
    #menu7 li a:hover { color:#000000; background-color: #CD3333;}
    --> </style>

    VER COMO QUEDA

    NOTA: Les recomiendo que practiquen con el bloc de notas, copien el codigo
    y lo pegan el bloc de notas luego lo guardan con un nombre.html




    AYUDA A LA PAGINA, REGISTRATE!!

    Un Vicio Mas - File Sharing


  • Compartir en:
     
    FORO - www.unViciomas.com » TUTORIALES Y AYUDAS # » T. Para Internet o Webs » Un menú sencillo sin Javascript
    • Página 1 de 1
    • 1
    Búscar:






    Registrate y sube tus Posts Gracias por Registrarte! Ya puedes Subir lo que mas te Guste!!



    Copyright UnVicioMás © 2024 Contáctenos