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

CSS imagen menú desplegable

  • buzzby
  • Novice
  • Novice
  • No Avatar
  • Registrado: Ago 15, 2008
  • Mensajes: 16
  • Status: Offline

Nota Agosto 26th, 2008, 1:32 am

Hola

i han sido la búsqueda y la búsqueda pero no puede encontrar un digno menú desplegable sistema. Tenía la esperanza de que alguien por aquí o bien tener un buen comienzo para una solución o ser capaz de punto a mí el derecho página / tutorial así que puede conseguir este hecho.

i am después de un menú desplegable donde el menú de pestañas están las imágenes y el menú desplegable es el texto. He visto la imagen menús, donde las imágenes son a la vez el menú desplegable y atributos, o cuando el texto es a la vez. pero no la imagen de las fichas de contenido y texto de los menús. puede alguien que me ayude aquí por favor.

muy apreciada
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Agosto 26th, 2008, 1:32 am

  • digitalMedia
  • a.k.a. dM
  • Genius
  • Avatar de Usuario
  • Registrado: Dic 29, 2003
  • Mensajes: 5169
  • Loc: SC-USA
  • Status: Offline

Nota Agosto 26th, 2008, 5:20 am

En función de lo establecido navegador tiene la intención de apoyar, esto debería ser muy fácil. Una simple búsqueda en Google producirá una tonelada de resultados. Si bien los tutoriales y demostraciones que la mayoría tienen el texto como botones, creo que su muy evidente ver cómo insertar una imagen.

Como nota personal, menús desplegables son una de las más sobre-abusado de "características" puede poner en una página web. Ellos tendrán errores y algunos problemas en el navegador, donde algunos. Ellos más bien confunde a menudo la entrega de información.

Id sugieren que pensar muy críticamente sobre la conveniencia o no de su contenido requiere.
- dM
  • buzzby
  • Novice
  • Novice
  • No Avatar
  • Registrado: Ago 15, 2008
  • Mensajes: 16
  • Status: Offline

Nota Agosto 26th, 2008, 6:11 am

así que no sólo una imagen estática. u vuelco cuando la imagen, la imagen de cambios (típico rollover código) como el código de renovación se lleva a cabo también lo hace el menú desplegable. he buscado pero no obtener los resultados que quiero. si usted sabe de un tuto que hace exactamente qué dice en este entonces estaño grande. por favor me ilumine.

¡salud!
  • digitalMedia
  • a.k.a. dM
  • Genius
  • Avatar de Usuario
  • Registrado: Dic 29, 2003
  • Mensajes: 5169
  • Loc: SC-USA
  • Status: Offline

Nota Agosto 26th, 2008, 6:21 am

Heres una idea muy simplificada, de forma rápida lanzados juntos,...
Código: [ Select ]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#menu ul li.item{display:none;}
#menu ul li.top{background:url(up.gif);width:100px;height:25px;}
#menu ul li.top:hover{background:url(over.gif);}
#menu ul:hover .item{display:block;}
#menu{position:absolute;}
</style>
</head>
 
<body>
<div id="menu">
    <ul id="item1">
        <li class="top"> &nbsp; </li>
        <li class="item"><a href="#">Item 1</a></li>
        <li class="item"><a href="#">Item 2</a></li>
        <li class="item"><a href="#">Item 3</a></li></ul></div>
</body>
</html>
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <style>
  8. #menu ul li.item{display:none;}
  9. #menu ul li.top{background:url(up.gif);width:100px;height:25px;}
  10. #menu ul li.top:hover{background:url(over.gif);}
  11. #menu ul:hover .item{display:block;}
  12. #menu{position:absolute;}
  13. </style>
  14. </head>
  15.  
  16. <body>
  17. <div id="menu">
  18.     <ul id="item1">
  19.         <li class="top"> &nbsp; </li>
  20.         <li class="item"><a href="#">Item 1</a></li>
  21.         <li class="item"><a href="#">Item 2</a></li>
  22.         <li class="item"><a href="#">Item 3</a></li></ul></div>
  23. </body>
  24. </html>
- dM
  • buzzby
  • Novice
  • Novice
  • No Avatar
  • Registrado: Ago 15, 2008
  • Mensajes: 16
  • Status: Offline

Nota Agosto 26th, 2008, 6:47 am

ul id = "Item1"

puede usted explicar qué es Item1? es decir, ¿cuál es la diferencia entre "tema" y "Item1" como Item1 no aparece en la lista dentro de la <style> </ style> parámetro. (es una cosa como secuencial en Item2, item3, item4 etc)
  • digitalMedia
  • a.k.a. dM
  • Genius
  • Avatar de Usuario
  • Registrado: Dic 29, 2003
  • Mensajes: 5169
  • Loc: SC-USA
  • Status: Offline

Nota Agosto 26th, 2008, 7:27 am

Toma, prueba este marcado. Yo creo que puede ser lo que quieras...

Código: [ Select ]
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#menu ul#item1{position:absolute;top:0;left:0;}
#menu ul#item2{position:absolute;top:0;left:101px;}
#menu ul li.item{display:none;}
#menu ul li.item a{display:block;width:160px;height:25px;background:#CCC;}
#menu ul li.item a:hover{background:#ECECEC;}
#menu ul li.top{background:url(up.gif);width:100px;height:25px;}
#menu ul li.top:hover{background:url(over.gif);}
#menu ul:hover .item{display:block;}
#menu{position:absolute;}
</style>
</head>

<body>
<div id="menu">
    <ul id="item1">
        <li class="top"> &nbsp; </li>
        <li class="item"><a href="#">menu item 1menu item</a></li>
        <li class="item"><a href="#">menu item 2</a></li>
        <li class="item"><a href="#">menu item 3</a></li></ul>
    <ul id="item2">
        <li class="top"> &nbsp; </li>
        <li class="item"><a href="#">menu item 1</a></li>
        <li class="item"><a href="#">menu item 2</a></li>
        <li class="item"><a href="#">menu item 3</a></li></ul></div>
</body>
</html>
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>Untitled Document</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <style>
  8. #menu ul#item1{position:absolute;top:0;left:0;}
  9. #menu ul#item2{position:absolute;top:0;left:101px;}
  10. #menu ul li.item{display:none;}
  11. #menu ul li.item a{display:block;width:160px;height:25px;background:#CCC;}
  12. #menu ul li.item a:hover{background:#ECECEC;}
  13. #menu ul li.top{background:url(up.gif);width:100px;height:25px;}
  14. #menu ul li.top:hover{background:url(over.gif);}
  15. #menu ul:hover .item{display:block;}
  16. #menu{position:absolute;}
  17. </style>
  18. </head>
  20. <body>
  21. <div id="menu">
  22.     <ul id="item1">
  23.         <li class="top"> &nbsp; </li>
  24.         <li class="item"><a href="#">menu item 1menu item</a></li>
  25.         <li class="item"><a href="#">menu item 2</a></li>
  26.         <li class="item"><a href="#">menu item 3</a></li></ul>
  27.     <ul id="item2">
  28.         <li class="top"> &nbsp; </li>
  29.         <li class="item"><a href="#">menu item 1</a></li>
  30.         <li class="item"><a href="#">menu item 2</a></li>
  31.         <li class="item"><a href="#">menu item 3</a></li></ul></div>
  32. </body>
  33. </html>
- dM
  • neksus
  • Mastermind
  • Mastermind
  • Avatar de Usuario
  • Registrado: Sep 10, 2004
  • Mensajes: 2194
  • Loc: Canada
  • Status: Offline

Nota Agosto 26th, 2008, 7:40 am

Una ul es una lista desordenada marcador - li la lista son las clases de artículos.
  • maresrjm
  • Born
  • Born
  • No Avatar
  • Registrado: Ene 08, 2012
  • Mensajes: 1
  • Status: Offline

Nota Enero 8th, 2012, 10:18 pm

¿alguna idea de cómo hacer un menú desplegable, pero comienza en la parte inferior y infla hacia arriba?

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 8 mensajes
  • Usuarios navegando por este Foro: roelof y 200 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