Como crear un menu desplegable con CSS3 en tu pagina web!

Mensajes: 87

Reputación: 4

Mensaje Nº 1 | 2:35 AM 2012-08-13

Que tal amigos!.

En esta ocasión, les traigo un vídeo tutorial, echo por mi, en donde aprenderemos a crear un menu desplegable con la nueva tecnologia de CSS3!:

Primer Codigo:

Code

/* CSS3 Menu Desplegable por Dazepol */
#nav {
  float: left;
  font: bold 12px Arial, Helvetica, Sans-serif;
  border: 1px solid #121314;
  border-top: 1px solid #2b2e30;
  overflow: hidden;
  width: 100%;
  background: #3C4042;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
  background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
  background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
}

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav ul li {
  float: left;
}

#nav ul li a {
  float: left;
  color: #d4d4d4;
  padding: 10px 20px;
  text-decoration: none;
  background: #3C4042;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
  background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
  background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(0,0,0,0.2);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
/* CSS3 Drop Down Menu By RealcomBiz.com */
#nav ul li a:hover,
#nav ul li:hover > a {
  color: #252525;
  background: #3C4042;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
  background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
  background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover,
#nav ul li li:hover > a {
  color: #2c2c2c;
  background: #5C9ACD;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
  background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
  background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
  border-bottom: 1px solid rgba(0,0,0,0.6);
  border-top: 1px solid #7BAED9;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
/* CSS3 Drop Down Menu By RealcomBiz.com */
#nav li ul {
  background: #3C4042;
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
  background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
  background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
  left: -999em;
  margin: 35px 0 0;
  position: absolute;
  width: 160px;
  z-index: 9999;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li:hover ul {
  left: auto;
}

#nav li ul a {
  background: none;
  border: 0 none;
  margin-right: 0;
  width: 120px;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
}

.nav ul li ul {
     position: absolute;
     left: 0;
     display: none;
     visibility: hidden;
}

.nav ul li ul li {
     display: list-item;
     float: none;
}

.nav ul li ul li ul {
     top: 0;
}

.nav ul li ul li a {
     font: normal 13px Verdana;
     width: 160px;
     padding: 5px;
     margin: 0;
     border-top-width: 0;
     border-bottom: 1px solid gray;
}

#nav li li ul {
  margin: -1px 0 0 160px;
  visibility: hidden;
}

#nav li li:hover ul {
  visibility: visible;
}
/* CSS3 Menu Desplegable por Dazepol */

Segundo Codigo:

Code

<div id="nav">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Contact Us</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Tutorials</a></li>
   <li><a href="#">Sitemap</a></li>
   <li><a href="#">Services</a>
   <ul>
    <li><a href="#">Sub Page #1</a></li>
    <li><a href="#">Sub Page #2</a></li>
    <li><a href="#">Sub Page #3</a></li>
    <li><a href="#">Sub Page #4</a></li>
    <li><a href="#">Sub Page #5</a></li>
   </ul>
   </li>
   <li><a href="#">Create This</a></li>
  </ul>
</div>

Espero que sea de su agrado!.

Plantillasw

Mensajes: 277

Reputación: 6

Mensaje Nº 2 | 5:57 AM 2012-08-13

hola amigo Daze, bienvenido de nuevo al foro.

Después de mi larga ausencia. Aquí estoy.

Daze

Mensajes: 87

Reputación: 4

Mensaje Nº 3 | 7:13 AM 2012-08-13

Quote (Plantillasw)

hola amigo Daze, bienvenido de nuevo al foro.

Gracias!, Es bueno estar de vuelta y pues ayudare en todo lo que pueda :D.

sebas13510

Mensajes: 2

Reputación: 0

Mensaje Nº 4 | 6:45 AM 2012-12-26

Hey me podrias decir como hacer para cuando le de click me mande a la pagina nombrada por favor

therealnowhereman

Mensajes: 3

Reputación: 0

Mensaje Nº 5 | 6:12 AM 2013-02-02

ya estuvo, gracias mi plantilla no tenía parte superior
pero gracias a plantillasW al fin lo pude hacer y ya no te tuve que pasar a molestar
acá es donde dijo eso: http://foro.ucoz.es/forum/5-1172-1
y yo creo que lo que se refiere el Sebas es que al final pues ya queda todo bien no?
pero luego para agregarle los enlaces lo que debe hacer uno es en el edito visual modificarle yo le puse como vínculo externo porque en los internos nada, no sé dónde se deba modificar, pero bueno el caso es que te pido a hora ayuda porque mi plantilla tenía el menú a la izquierda pero s lo quité para poner arriba el desplegable, pero como que se ve feo todo pegado a la izquierda, si me pudieras ayudar para agregar una columna a la izq donde pueda acomodar más bloques e lo agradecería, sino luego hago el tema en el foro
saludos, visítala y haber si te descargas por ahí algo,
Por cierto tengo el link de los Ost del DMC4 en iTunes Plus, pero no han desbloqueado el enlace, es un problema de host, pero en cuanto los tenga los subiría, claro que tengo todos los Osts en mp3, pero el AAC es especial, bueno saludos y gracias que me han ayudado tus tutoriales

http://doorwaytoheaven.ucoz.ru/

Agregado (2013-02-02, 6:12 AM)
---------------------------------------------
oye, también instalé disqus en el blog y al quitar "habilitar comentarios"
se quitan los dos, los de la página y los de disqus smile
la forma de quitarlos es en cada entrada quitarle permitir comentarios, saludos y gracias

http://doorwaytoheaven.ucoz.ru/

ninjaextremo_nt

Mensajes: 25

Reputación: 0

Mensaje Nº 6 | 7:29 PM 2013-02-02

buen tutorial

http://uncannyultimate.do.am/

Post editado por ninjaextremo_nt - Sábado, 2013-02-02, 7:30 PM

therealnowhereman

Mensajes: 3

Reputación: 0

Mensaje Nº 7 | 0:47 AM 2013-02-09

ya solucioné, cambié de plantilla, se borraron las cosas que había puesto en el diseño como el botón y disqus, pero ya instalé todo de nuevo y gracias a tí ya hasta me acostumbré al código
le puse botones a mi web y además en la barra desplegable le puse el buscador, lo malo es que yo quiero que se pegue a la derecha pero no se puede, bueno creo que está bien así, chécalo en mi web, está super fácil ponerlo

Code

el CSS para que se vea oscuro

Code

#search {

}

#search input[type="text"] {
     background: url(search-dark.png) no-repeat 10px 6px #444;
     border: 0 none;
     font: bold 12px Arial,Helvetica,Sans-serif;
     color: #777;
     width: 150px;
     padding: 6px 15px 6px 35px;
     -webkit-border-radius: 20px;
     -moz-border-radius: 20px;
     border-radius: 20px;
     text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
     -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
     -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
     box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
     -webkit-transition: all 0.7s ease 0s;
     -moz-transition: all 0.7s ease 0s;
     -o-transition: all 0.7s ease 0s;
     transition: all 0.7s ease 0s;
     }

#search input[type="text"]:focus {
     width: 200px;
     }

fondo luminoso

Quote

#search {

}

#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search input[type="text"]:focus {
width: 200px;
}

Híbrido que es el que tengo

Quote

#search {

}

#search input[type="text"] {
background: url(search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}

#search input[type="text"]:focus {
background: url(search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

el demo lo pueden ver en mi sitio, saludos
http://doorwaytoheaven.ucoz.ru/

http://doorwaytoheaven.ucoz.ru/

jonatankpo19

Mensajes: 35

Reputación: 0

Mensaje Nº 8 | 2:42 AM 2013-02-10

therealnowhereman, pues con respecto a lo q tu dice debe de ser porq pusiste el disquz muy abajo, proba ponerlo antes de donde salen los comentarios a mi me paso y mira como quedo http://www.unicomparte.com.ar

Últimos temas

Temas populares

Página 1 de 1 1
Moderador del foro: ZorG