Volver al Foro de Diseño de páginas Web

Moderno menús desplegables

  • templastorm
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 25, 2004
  • Mensajes: 173
  • Loc: Chicago
  • Status: Offline

Nota Julio 6th, 2010, 11:38 am

Hola Chicos,


He estado fuera de la escena del diseño para un poco y ahora estoy de vuelta y estoy tratando de crear un menú desplegable. Este menú desplegable será para una barra de navegación y estoy buscando algún tipo de código javascript que puede utilizar para hacer mis imágenes que están vinculadas tienen subcategorías. He buscado a lo largo de Ozzu y más allá y todo lo que puede encontrar son flash secuencia de comandos, scripts que cuestan dinero, o los menús desplegables que están fuertemente codificados. Alguien sabe de la mejor manera de crear un menú desplegable para el desarrollador intermedio?

Gracias!

Templa
Back in the game!
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Julio 6th, 2010, 11:38 am

  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de Usuario
  • Registrado: Mar 12, 2007
  • Mensajes: 6228
  • Loc: South-Africa
  • Status: Offline

Nota Julio 7th, 2010, 12:13 am

Usted no necesita realmente javascript para que, menús desplegables se pueden crear con CSS, como sigue:
* Nota: Este código es de mi cabeza por lo que puede ser que necesite ajustar algunos parámetros.

HTML Código: [ Select ]
<div id='menu'>
 <ul>
  <li><a href='#'>Home</a></li>
  <li>Services
   <ul>
    <li><a href='#'>Design</a></li>
    <li><a href='#'>Development</a></li>
   </ul>
  </li>
  <li><a href='#'>Contact</a></li>
 </ul>
</div>
  1. <div id='menu'>
  2.  <ul>
  3.   <li><a href='#'>Home</a></li>
  4.   <li>Services
  5.    <ul>
  6.     <li><a href='#'>Design</a></li>
  7.     <li><a href='#'>Development</a></li>
  8.    </ul>
  9.   </li>
  10.   <li><a href='#'>Contact</a></li>
  11.  </ul>
  12. </div>


CSS Código: [ Select ]
div#menu{
width:980px;
height:20px;
}
div#menu ul li{
list-style-type:none;
width:50px;
height:20px;
float:left;
position:relative;
}
div#menu ul li a{
display:block;
width:50px;
height:12px;
padding:8px 0px 0px 0px;
text-align:center;
}
div#menu ul li ul{
display:none;
position:absolute;
top:20px;
}
div#menu ul li:hover ul{
display:block;
}
div#menu ul li ul li{
float:none;
}
  1. div#menu{
  2. width:980px;
  3. height:20px;
  4. }
  5. div#menu ul li{
  6. list-style-type:none;
  7. width:50px;
  8. height:20px;
  9. float:left;
  10. position:relative;
  11. }
  12. div#menu ul li a{
  13. display:block;
  14. width:50px;
  15. height:12px;
  16. padding:8px 0px 0px 0px;
  17. text-align:center;
  18. }
  19. div#menu ul li ul{
  20. display:none;
  21. position:absolute;
  22. top:20px;
  23. }
  24. div#menu ul li:hover ul{
  25. display:block;
  26. }
  27. div#menu ul li ul li{
  28. float:none;
  29. }
Let's leave all our *plum* where it is and go live in the jungle ...
  • templastorm
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 25, 2004
  • Mensajes: 173
  • Loc: Chicago
  • Status: Offline

Nota Julio 28th, 2010, 12:42 pm

Gracias por su ayuda. Todo va bien, aunque estoy teniendo algunos problemas menores con mi navegación rollover se fusionó con el menú desplegable.

¿Hay que puedo hacer que las imágenes las principales conexiones de vuelco y la lista desplegable de imágenes y enlaces. ¿Qué parte del código cambiará si este es el caso?

Traté de cuidarse para arriba y agregar mi propio código, pero ahora las imágenes son todas Apretados....
Back in the game!
  • templastorm
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 25, 2004
  • Mensajes: 173
  • Loc: Chicago
  • Status: Offline

Nota Agosto 3rd, 2010, 10:26 am

¿hay alguna manera de mantener los menús desplegables para lo que ya se desvanecen? mi combo son bastante difíciles de hacer clic en atm
Back in the game!
  • righteous_trespasser
  • Scuffle
  • Genius
  • Avatar de Usuario
  • Registrado: Mar 12, 2007
  • Mensajes: 6228
  • Loc: South-Africa
  • Status: Offline

Nota Agosto 3rd, 2010, 11:55 pm

Esto no sucederá con CSS solo por desgracia. Por esta necesidad youd algunos Javascript (jQuery preferentemente)...Esto va a cambiar su código un poco, sin embargo, le gustaría ayudar con esto?
Let's leave all our *plum* where it is and go live in the jungle ...
  • templastorm
  • Graduate
  • Graduate
  • No Avatar
  • Registrado: Sep 25, 2004
  • Mensajes: 173
  • Loc: Chicago
  • Status: Offline

Nota Agosto 11th, 2010, 3:12 pm

Me di cuenta de una forma de combatir los vínculos difícil. Pero si nos fijamos en el IE, mi navegación mediante los menús desplegables es completamente destruido. Cualquier ayuda que usted puede ser capaz de ofrecer será tremendamente apreciada!
Back in the game!
  • Howdy_McGee
  • Novice
  • Novice
  • No Avatar
  • Registrado: Jun 22, 2010
  • Mensajes: 16
  • Status: Offline

Nota Agosto 16th, 2010, 8:29 am

Aunque, ¿no es más "fluida" si está presente theres Javascript?

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 7 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 90 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC