Autor Tema: Hacer un simple menú despegable con CSS: zanutmalware  (Leído 6649 veces)

Desconectado zanutmalware

  • Newbie
  • *
  • Mensajes: 2
  • Chico aficionado a la programación #HTML #PHP #SQL
    • proyectoZanutMalware
Hacer un simple menú despegable con CSS: zanutmalware
« en: 08 de Noviembre de 2013, 09:15:59 pm »
Hacer un simple menú despegable con CSS: zanutmalware

Este es un ejemplo sencillo para crear un menú desplegable que puede incluir submenús, que usa las posibilidades que nos brindan las nuevas propiedades del CSS3.

Como casi cualquier otro, el HTML se arma en una lista, utilizando etiquetas UL y LI que, se anidan si es que queremos crear un submenú. Esta sería una lista standard:

Citar
<ul class="mi-menu">
  <li><a href="#">zanutmalware1</a></li>
  <li><a href="#">zanutmalware2</a></li>
  <li><a href="#">zanutmalware3</a></li>
</ul>

y si quisiéramos que uno de esos enlaces fuera un submenú:

Citar
<ul class="mi-menu">
  <li><a href="#">zanutmalware</a></li>
  <li>
    <li><a href="#">zanutmalware6</a></li>
    <ul>
      <li><a href="#">zanutmalware1</a></li>
      <li><a href="#">zanutmalware1</a></li>
      <li><a href="#">zanutmalware1</a></li>
    </ul>
  </li>
<li><a href="#">zanutmalware7</a></li>
</ul>

Y ahora, el CSS que hará que esa lista se transforme en otra cosa

Citar
<style type="text/css">
  /* el menú en si mismo */
  .mi-menu  {
    border-radius: 5px;
    list-style-type: none;
    margin: 0 auto; /* si queremos centrarlo */
    padding: 0;
    /* la altura y su ancho dependerán de los textos */
    height: 40px;
    width: 510px;
    /* el color de fondo */
    background: #555;
    background: -moz-linear-gradient(#555,#222);
    background: -webkit-linear-gradient(#555,#222);
    background: -o-linear-gradient(#555,#222);
    background: -ms-linear-gradient(#555,#222);
    background: linear-gradient(#555,#222);
  }

 
  .mi-menu  br { display:none; }

  /* cada item del menu */
  .mi-menu  li {
    display: block;
    float: left; /* la lista se ve horizontal */
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .mi-menu li a {
    border-left: 1px solid #000;
    border-right: 1px solid #666;
    color: #EEE;
    display: block;
    font-family: Tahoma;
    font-size: 13px;
    font-weight: bold;
    line-height: 28px;
    padding: 0 14px;
    margin: 6px 0;
    text-decoration: none;
    /* animamos el cambio de color de los textos */
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
  }
  /* eliminamos los bordes del primer y el último */
  .mi-menu li:first-child a { border-left: none; }
  .mi-menu li:last-child a{ border-right: none; }
  /* efecto hover cambia el color */
  .mi-menu li:hover > a { color: Crimson; }

  /* los submenús */
  .mi-menu ul {
    border-radius: 0 0 5px 5px;
    left: 0;
    margin: 0;
    opacity: 0; /* no son visibles */
    position: absolute;
    top: 40px; /* se ubican debajo del enlace principal */
    /* el color de fondo */
    background: #222;
    background: -moz-linear-gradient(#222,#555);
    background: -webkit-linear-gradient(#22,#555);
    background: -o-linear-gradient(#222,#555);
    background: -ms-linear-gradient(#222,#555);
    background: linear-gradient(#222,#555);
    /* animamos su visibildiad */
    -moz-transition: opacity .25s ease .1s;
    -webkit-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
  }
  /* son visibes al poner el cursor encima */
  .mi-menu li:hover > ul { opacity: 1; }

   /* cada un ode los items de los submenús */
  .mi-menu ul li {
    height: 0; /* no son visibles */
    overflow: hidden;
    padding: 0;
    /* animamos su visibildiad */
    -moz-transition: height .25s ease .1s;
    -webkit-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
  }
  .mi-menu li:hover > ul li {
    height: 36px; /* los mostramos */
    overflow: visible;
    padding: 0;
  }
  .mi-menu ul li a {
    border: none;
    border-bottom: 1px solid #111;
    margin: 0;
    /* el ancho dependerá de los textos a utilizar */
    padding: 5px 20px;
    width: 100px;
  }
  /* el último n otiene un borde */
  .mi-menu ul li:last-child a { border: none; }

</style>

Bueno espero que os haya servido.
Saludos, zanutmalware!
Chico aficionado a la programación #HTML #PHP #SQL

Desconectado Dabo

  • Administrator
  • *
  • Mensajes: 15344
    • https://www.daboblog.com
Re:Hacer un simple menú despegable con CSS: zanutmalware
« Respuesta #1 en: 11 de Noviembre de 2013, 10:36:23 am »
Gracias por la aportación y bienvenido  ;-)
Hacking, computing, are in my blood, are a part of me, a part of my life...Debian GNU/Linux rules.

Twitter; https://twitter.com/daboblog
Instagram: @daboblog


www.daboblog.com | www.debianhackers.net | www.caborian.com | www.apachectl.com | www.davidhernandez

Desconectado zanutmalware

  • Newbie
  • *
  • Mensajes: 2
  • Chico aficionado a la programación #HTML #PHP #SQL
    • proyectoZanutMalware
Re:Hacer un simple menú despegable con CSS: zanutmalware
« Respuesta #2 en: 06 de Diciembre de 2013, 06:22:08 pm »
Gracias por la aportación y bienvenido  ;-)

Gracias, el próximo sera buenisimo
Saludos
Chico aficionado a la programación #HTML #PHP #SQL

 

Aviso Legal | Política de Privacidad | Política de Cookies

el contenido de la web se rige bajo licencia
Creative Commons License