Menu Css

freehackiroz · #1 (**permalink**) 25/06/2014, 14:18

IMAGEN CON MENU CON HTML5 Y CSS[code="html4strict"][/code]

Hola tengo tiempo intentando hacer una lista de una imagen con "menu" , no sabria como decirlo =D
aqui les dejo una imagen de lo que hice

esto es lo que he logrado, solo 1 imagen

esto es lo que quiero conseguir:

hacer mas de 1 "foto menu", tener mas "fotomenus"
aqui les dejo los codigos

el HTML

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Menus desplegable solo CSS ejemplo 9 - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre" />
<meta name="Description" content="Pagina dedicada a recursos de diseño web con CSS, en castellano" />
<meta name="Author" content="Mikel Morote Donazar - Praxis Iru&ntilde;ea SLL" />
<meta name="Subject" content="Recursos CSS" />
<meta name="Language" content="espa&ntilde;ol" />
<meta name="Robots" content="index, follow" />
<link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de contenidos" media="all" lang="es" />
<link rel="stylesheet" href="css/menu-9.css" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
  <li class="nivel1"><a href="#" class="nivel1"></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie"><table class="falsa"><tr><td><![endif]-->
	<ul>
        
		<li><a class="primera" href="#">Ver online</a></li>
		<li><a href="#">Descargar</a></li>
		<li><a href="">cancelar</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
</ul>
</div>
</body>
</html>

codigo CSS

Código:

* { margin: 0px;padding: 0px; outline: 0;}html, body { width: 100%;}body { background: #310;font-family: Verdana, Arial, Helvetica, sans-serif;}
                                                                    #menu {  width: 240px;height: 320px; background-image: url('../Erase_una_vez_Serie_de_TV-526092991-large.jpg');font-size: 0.7em;margin: 20px;position: relative;}
                                                                    #menu ul { list-style-type: none;}
                                                                    #menu ul li a.primera { border-top: solid 1px #FFF;}
                                                                    #menu ul li a.nivel1, 
                                                                    #menu ul li a.nivel1 { width: 24px;height: 23px;background-image: url('../img/flechita.png');}
                                                                    #menu ul li a {display: block;text-decoration: none;color: #fff;position: relative;text-align: center;}
                                                                    #menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;color: #000;position: relative;}
                                                                    #menu ul li a.nivel1 {display: block!important;display: none;position: relative;}
                                                                    #menu ul li ul {display: none;}
                                                                    #menu ul li a:hover ul, 
                                                                    #menu ul li:hover ul {display: block;position: absolute ;top:23px;left:0;}
                                                                    #menu ul li ul li a {width: 120px;background-color: #000;color: #fff;border: solid 1px #fff;border-top: none;padding: 8px;}
                                                                    #menu ul li ul li a:hover {position: relative;background-color: #399;color: #FFF;}table.falsa {border-collapse:collapse;border:0px;float: left;position: relative;}

ayudenme que no puedo proseguir con mi proyecto, se los agradeceria muchisimo

C2am · #2 (**permalink**) 26/06/2014, 00:49

Hola

Bueno, un poco de ayuda:

1º - El código que usa, de araudi.net, aunque muy bueno en su tiempo, como que ha quedado un poco desactualizado (fijate que aún tiene soporte para IE6). Además tiene cosas que no necesitas.

2º- te dejo un ejemplo de como podría ser, pero me parece que podría mejorarse mucho más.
Uso un contenedor "imagen" que contendrá la imagen y el menu respectivo:

Código HTML:

Ver original<div class="imagen">
<div class="menu">
    <span class="flecha">&darr;</span>
    <ul>
        <li>
            <a class="primera" href="#">Ver online</a></li>
        <li>
            <a href="#">Descargar</a></li>
        <li>
            <a href="">Cancelar</a></li>
    </ul>
</div>
    <img src="http://brandonqr.com/images/penny-dreadful-poster-2-2.jpg" width="300px"/>
</div>

Su css:

Código CSS:

Ver original*{margin:0; padding:0}
.imagen{
    display:inline-block;
}
.menu {
    width: 240px;
    height: 320px;
    background-image: url('../Erase_una_vez_Serie_de_TV-526092991-large.jpg');
    font-size: 0.7em;
    margin: 20px;
    position: absolute; top:0, left:0}
 
.flecha{display:inline-block; width: 24px;height: 23px;border-radius:24px; background:#000; color:#fff; text-align:center; font-size:18px;position:relative;cursor: pointer;
}
 
.menu ul {display:none;background:#000}
 
.flecha:hover + ul{display:block;}
 
.menu ul:hover{display:block;}
 
.menu ul { list-style-type: none; border:1px solid #fff}
.menu ul li, .menu ul li a{height:25px;}
.menu ul li a {display: block; text-decoration: none;color: #f5f5f5; position: relative; text-align: center;}
.menu ul li a:hover {background-color: #6CC;color: #000;position: relative;}

Y aquí el ejemplo:
http://jsfiddle.net/c2am/tKgLf/57/embedded/result/

freehackiroz · #3 (**permalink**) 10/07/2014, 15:29

Muchisimas gracias, disculpa el retraso de el agradecimiento, me sirve muchisimo