¿Crear tablas de imagenes desplegables?

Estado
No está abierto para más respuestas.
Mensajes
348
Puntuación de reacción
0
Hola a los iniciados en html, a ver si me podéis echar una mano... en breves, empezaré un nuevo proyecto, no para ganar dinero con él, sino por placer.
El caso, es que me gustaría entretenerme creando la plantilla... y había pensado hacer un menú a base de imágenes.

Ya tengo alguno de ese estilo, como este:
Mundo Increible

Pero para este blog, me interesa que fuera desplegable, tipo este otro:
The smart Droid

Vamos, que quiero lo del segundo, pero usando imágenes como en el primero, no se si me explico, y ni siquiera se si es posible hacerlo. ¿hay opción de hacer eso sin recurrir a scripts y similares?

Gracias y un saludo.
 

Bleed

Diamante
Usuario de Bronce
Mensajes
2,408
Puntuación de reacción
1
¿Te refieres al menu superior? Reemplazas el enlace por tu imagen y listo.
 
Mensajes
348
Puntuación de reacción
0
¿Te refieres al menu superior? Reemplazas el enlace por tu imagen y listo.

Imagino que habra una solucion mas sencilla que montar todo el tinglado de ese menu que usa jquery para luego poner una imagen no?
 

Bleed

Diamante
Usuario de Bronce
Mensajes
2,408
Puntuación de reacción
1
Tienes que hacer una lista con <ul> y <li>, y para darle el efecto desplegable necesitaras javascript si o si. Si dentro del <li> pones un enlace o una imagen es indiferente.
 

Jota Marquez

Administrador
Miembro del equipo
Usuario de Piedra
Usuario de Bronce
Mensajes
4,255
Puntuación de reacción
161
Si no sabes maquetar, lo que te recomiendo es que cojas el código del menu de este (Smart Droid)
Que si no me equivoco, es este

/* Menu */
.menu-a {
height: 40px; /* alto del menu */
width: 100%; /* ancho del menu */
background: #FAFAFA; /* fondo del menu junto con lo que sigue */
background: -webkit-linear-gradient(top,#2E5177 0%,#2E5177 100%);
background: -moz-linear-gradient(top, #2E5177 0%,#2E5177 100%);
background: -o-linear-gradient(top, #2E5177 0%,#2E5177 100%);
background: -ms-linear-gradient(top, #2E5177 0%,#2E5177 100%);
background: linear-gradient(top, #2E5177 0%,#2E5177 100%);
-webkit-border-radius: 0px; /* radio del borde del menu opera, Chrome */
-moz-border-radius: 0px; /* radio del borde del menu Firefox */
border-radius: 0px; /* radio del borde del menu IE9, etc*/
}
.menu-a li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.menu-a li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #FFFFFF; /* borde izquierdo */
border-right: 1px solid #FFFFFF; /* borde derecho */
font-family: Helvetica, Arial, sans-serif; /* fuente de texto del menu */
font-weight: bold;
font-size: 14px; /* tamaño de texto */
color: #FFFFFF; /* color del enlace */
text-shadow: 0px 0px 0px rgba(0,0,0,.6);
-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;
}
.menu-a li:first-child a { border-left: none; }
.menu-a li:last-child a{ border-right: none; }
.menu-a li:hover > a { color: #FE9A2E; /* color del enlace al pasar el cursor */}
.menu-a ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #2E5177; /* fondo del submenu */
-webkit-border-radius: 0 0 0px 0px; /* radio del submenu opera, chrome */
-moz-border-radius: 0 0 0px 0px; /* radio del submenu firefox */
border-radius: 0 0 0px 0px; /* radio del submenu IE9, etc*/
-webkit-transition: opacity .25s ease .1s; /* opacidad opera, chrome */
-moz-transition: opacity .25s ease .1s; /* opacidad firefox */
-o-transition: opacity .25s ease .1s; /* opacidad */
-ms-transition: opacity .25s ease .1s; /* opacidad */
transition: opacity .25s ease .1s; /* opacidad */
}
.menu-a li:hover > ul { opacity: 1; }
.menu-a ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu-a li:hover > ul li {
height: 36px;
overflow: no visible;
padding: 0;
}
.menu-a ul li a {
width: 150px; /* ancho de la subpestaña */
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539; /* ancho y color del borde de abajo del submenu */
}
.menu-a ul li:last-child a { border: none; }
.menu-a a.obras { background: url(http://i.imgur.com/8rEsw.png) no-repeat 6px center; }
.menu-a a.noticias { background: url(http://i.imgur.com/sfFE8.png) no-repeat 6px center; }
.menu-a a.tutorialesbasicos { background: url(http://i.imgur.com/3AOg7.png) no-repeat 6px center; }
.menu-a a.tutorialesavanzados { background: url(http://i.imgur.com/UGZSa.png) no-repeat 6px center; }
.menu-a a.online { background: url(http://i.imgur.com/TkMvP.png) no-repeat 6px center; }
.menu-a a.descargas { background: url(http://i.imgur.com/mgO2i.png) no-repeat 6px center; }
.menu-a a.herramientas { background: url(http://i.imgur.com/Hzv3H.png) no-repeat 6px center; }
.menu-a a.otrosprogramas { background: url(http://i.imgur.com/WdTF6.png) no-repeat 6px center; }
.menu-a a.accesorios { background: url(http://i.imgur.com/ysEr7.png) no-repeat 6px center; }
.menu-a a.objetivos { background: url(http://i.imgur.com/0Gy22.png) no-repeat 6px center; }
.menu-a a.concursos { background: url(http://i.imgur.com/v7V25.png) no-repeat 6px center; }
.menu-a a.fotomes { background: url(http://i.imgur.com/WdTF6.png) no-repeat 6px center; }
.menu-a a.exposiciones { background: url(http://i.imgur.com/EOAIE.png) no-repeat 6px center; }
/* FIN MENU PRINCIPAL

Y como te han dicho, llamar a las secciones del menu como este div
<ul class="menu-a">
<li>Seccion</li>
</ul>
 
Mensajes
348
Puntuación de reacción
0
Si no sabes maquetar, lo que te recomiendo es que cojas el código del menu de este (Smart Droid)
Que si no me equivoco, es este



Y como te han dicho, llamar a las secciones del menu como este div
<ul class="menu-a">
<li>Seccion</li>
</ul>

muchas gracias, ire probando.

Ni siquiera sabia que podian ver mi plantilla!
 
Estado
No está abierto para más respuestas.
Arriba