Cómo crear un menú con subtítulo usando JavaScript

nicooo · 21 Abr 2015

Estoy armando un menu y quiero que cuando paso el mouse por una de las opciones (HOME) me aparezca un div debajo del menu... ya le di un hover al nav li, pero cuando quiero darle al li especifico del HOME no me aparece lo que quiero abajo... les dejo mi codigo por si alguno me puede ayudar! Gracias!

Insertar CODE, HTML o PHP:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Oswald:700,400,300' rel='stylesheet' type='text/css'>
<title>Documento sin título</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
body {
	margin:0;
	padding:0;
	font-size: 10px;
}

nav {
	float:left;
	width:100%;
	height: 70px;
	background-color: #333;
	color: white;
}

nav li {
	float: right;
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 1.4em;
	height: 50px;
	width: 6.5%;
	text-align:center;
	padding: 20px 0px 0px 0px;
	background-color: #333;
	transition: 1s;
	-webkit-transition: 1s;
}

nav li:hover {
	background-color: #09F;	
}

.menunav {
	width:100%;
	float:left;
	height: 300px;
	background-color:#CCC;
	display: none;
}

#menuhome:hover .menunav {
	display: block;
}

</style>
</head>

<body>
<div style="width:100%; height:3px; background-color:#09F; float:left; padding:0px;"></div>
<nav>
    <li> CONTACTO
    <li> PUBLICIDAD
    <li> ¿QUIENES SOMOS?
    <li> SORTEOS
    <li> BASE DE PELÍCULAS
    <li> SERIES
    <li> NOVEDADES
    <li> CRÍTICAS
    <li> ADELANTOS
    <li id="menuhome"> HOME
</nav>
<div class="menunav"></div>
</body>
</html>

- - - Actualizado - - -

Me di cuenta que solo puedo hacerlo con javascript, ya que el elemento se encuentra fuera del li... esto es lo que tengo ahora:

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Oswald:700,400,300' rel='stylesheet' type='text/css'>
<title>Documento sin título</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
body {
	margin:0;
	padding:0;
	font-size: 10px;
}

nav {
	float:left;
	width:100%;
	height: 70px;
	background-color: #333;
	color: white;
}

nav li {
	float: right;
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 1.4em;
	height: 50px;
	width: 6.5%;
	text-align:center;
	padding: 20px 0px 0px 0px;
	background-color: #333;
	transition: 1s;
	-webkit-transition: 1s;
}

nav li:hover {
	background-color: #09F;	
}

#menunav {
	width:100%;
	height: 300px;
	background-color:#CCC;
	visibility:hidden;
}
</style>
<script>
<script>
  function show(menunav) {
    document.getElementById(menunav).style.visibility = "visible";
  }
  function hide(menunav) {
    document.getElementById(menunav).style.visibility = "hidden";
  }
</script>
</head>

<body>
<div style="width:100%; height:3px; background-color:#09F; float:left; padding:0px;"></div>
<nav>
    <li> CONTACTO
    <li> PUBLICIDAD
    <li> ¿QUIENES SOMOS?
    <li> SORTEOS
    <li> BASE DE PELÍCULAS
    <li> SERIES
    <li> NOVEDADES
    <li> CRÍTICAS
    <li> ADELANTOS
    <li onMouseOver="show('menunav')" onMouseOut="hide('menunav')"> HOME  
</nav>
<div id="menunav"></div>
</body>
</html>

Tampoco funciona...

maximusk10 · 21 Abr 2015

Tendrías que poner tu "menunav" dentro del li de home para que esto pueda ocurrir.

Además de eso, Mira no recuerdo bien si algun selector de css te permite elegir el elemento .menunav donde está, sino tendrías que hacerlo con javascript

Prueba si esto es lo que quieres 🙂

Insertar CODE, HTML o PHP:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Oswald:700,400,300' rel='stylesheet' type='text/css'>
<title>Documento sin título</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
body {
	margin:0;
	padding:0;
	font-size: 10px;
}

nav {
	float:left;
	width:100%;
	height: 70px;
	background-color: #333;
	color: white;
}

nav li {
	float: right;
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 1.4em;
	height: 50px;
	width: 6.5%;
	text-align:center;
	padding: 20px 0px 0px 0px;
	background-color: #333;
	transition: 1s;
	-webkit-transition: 1s;
	position:relative ; /* aqui */
}

nav li:hover {
	background-color: #09F;	
}

.menunav {
	width:100%; /* puedes cambiar este valor para que sea más grande */
	float:left;
	height: 300px;
	background-color:#CCC;
	display: none;
	position: absolute; /* aqui*/
	top: 70px; /* aqui*/
}

#menuhome:hover .menunav {
	display: block;
}

</style>
</head>

<body>
<div style="width:100%; height:3px; background-color:#09F; float:left; padding:0px;"></div>
<nav>
  <li> CONTACTO </li>
    <li> PUBLICIDAD </li>
    <li> ¿QUIENES SOMOS? </li>
    <li> SORTEOS</li>
    <li> BASE DE PELÍCULAS</li>
    <li> SERIES</li>
    <li> NOVEDADES</li>
    <li> CRÍTICAS</li>
    <li> ADELANTOS</li>
    <li id="menuhome"> HOME 
		<div class="menunav">bloque</div>
    </li>
</nav>

</body>

PD: las partes que está comentado "aquí", es donde agregué css

nicooo · 21 Abr 2015

maximusk10 gracias por la respuesta!
Al final estaba muy cerca de poder hacer lo que queria...tenia repetida la etiqueta <script> y eso hacia que no funcione
por suerte ahora anda a la perfeccion! gracias

lombervid · 21 Abr 2015

Creo que lo más fácil sería meter el div dentro del li. Por qué no lo haces así?

Por cierto, li's sin ul? :topsy_turvy:

Saludos.

maximusk10 · 21 Abr 2015

Me alegro amigo, claro , te agregaste una etiqueta script, por eso no funcionaba.
Ahora si quieres hacer lo mismo que tienes con javascript sólo con css (para que fuera más liviano), prueba con este código además le agregamos unos efectos de transición 🙂

Lo otro, es que en tu tienes agregado jquery, pero en ningún momento lo usas, tienes js puro a no ser que lo vayas a usar más adelante, te estará usando recursos, y si lo vas a utilizar te recomiendo llamarlo al final del código antes de la etiqueta body por temas de carga de página 🙂

Insertar CODE, HTML o PHP:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Oswald:700,400,300' rel='stylesheet' type='text/css'>
<title>Documento sin título</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
* {

}
body {
	margin:0;
	padding:0;
	font-size: 10px;
}

nav {
	float:left;
	width:100%;
	height: 70px;
	background-color: #333;
	color: white;
}

nav li {
	float: right;
	display: inline-block;
	font-family: 'Oswald', sans-serif;
	font-size: 1.4em;
	height: 50px;
	width: 6.5%;
	text-align:center;
	padding: 20px 0px 0px 0px;
	background-color: #333;
	transition: 1s;
	-webkit-transition: 1s;

}

nav li:hover {
	background-color: #09F;	
}

.menunav {
	width:100%; /* puedes cambiar este valor para que sea más grande */
	float:left;
	height: 300px;
	background-color:#CCC;
	visibility: hidden;
	position: absolute; /* aqui*/
	top: 70px; /* aqui*/
	left: 0;
	opacity: 0;
	transition: .3s ease-in;
	-webkit-transition: .3s ease-in;
}

#menuhome:hover .menunav {
	visibility: visible;
	opacity: 1;
}

</style>
</head>

<body>
<div style="width:100%; height:3px; background-color:#09F; float:left; padding:0px;"></div>
<nav>
  <li> CONTACTO </li>
    <li> PUBLICIDAD </li>
    <li> ¿QUIENES SOMOS? </li>
    <li> SORTEOS</li>
    <li> BASE DE PELÍCULAS</li>
    <li> SERIES</li>
    <li> NOVEDADES</li>
    <li> CRÍTICAS</li>
    <li> ADELANTOS</li>
    <li id="menuhome"> HOME 
		<div class="menunav">bloque</div>
    </li>
</nav>

</body>

nicooo · 22 Abr 2015

gracias maximusk10, me vino muy bien! creo que voy a usarlo como me lo pasaste.. y voy a pensar en hacer algun curso de javascript y mejorar el css tmb!
Saludos!

Cómo crear un menú con subtítulo usando JavaScript

nicooo

maximusk10

nicooo

lombervid

maximusk10

nicooo

Temas similares