POr favor, necesito que alguien que sepa javascript me ayude con un menu
alguien????????????????????????????????????????
Pon el codigo o lo que necesites para poder ayudarte. O mas informacion acerca de lo que necesitas
Hay un menu pero lo que quiero es agregarle otro nivel al menu
http://vanfree.s3.amazonaws.com/jquery-accordion-nav-code.zip
Seria una especie de submenu?
> Home
>> Descargas
>>> Linux
>>> Windows
Algo asi?
si exacto, ahi el menu que está solo viene menu padre e hijo y yo quiero agregar otro nivel
abuelo
padre
hijo
Creo que te refieres a esto: http://inauditas.com/menu-horizontal/
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 profile="http://gmpg.org/xfn/11">
<title>Menu Horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
Script:
<script type="text/javascript">
var ulmenuitem;
// Función para asignar la class "current" a la página en la que nos encontramos
jQuery(function() {
// Aplicamos la función a todos los elementos <a> de nuestro menú
jQuery('#menu-principal a').each(function() {
//Comprobamos que la url coincida
if (jQuery(this).attr('href') === window.location.pathname ) {
// Si coincide aplicamos la class "current" al elemento <a>
jQuery(this).addClass('current');
// Y también mostramos su submenú aplicando la class "active" a su correspondiente <ul>
ulmenuitem = jQuery(this).parent().find('ul').addClass('active');
}
});
});
// Función para aplicar la class "active" a los submenus (<ul>)
function ulmenu_open(){
// Cerramos los posibles submenus que pudieran encontrarse abiertos
ulmenu_close();
//Abrimos el submenú aplicando la class "active" al elemento "ul"
ulmenuitem = jQuery(this).find('ul').addClass('active');
}
// Función para cerrar el submenú. Sacando la class "active" el submenú vuelve
// a estar escondido ya que en el CSS hemos definido visibility: hidden
function ulmenu_close(){
if(ulmenuitem) ulmenuitem.removeClass('active');
}
//LLamamos a la función ulmenu_open cuando pasamos con el mouse por encima de
//los elementos de nuestro menú.
$(document).ready(function(){
$('#menu-principal > li').bind('mouseover', ulmenu_open)
});
</script>
CSS simple aplicado:
* {
border:none;
margin:0;
padding:0;
}
body {
background:#fff;
color: #000;
font:12px Arial, Verdana, sans-serif;
}
h1 {
font-size:20px;
margin-bottom:20px;
margin-left: 13px;
}
#wrap {
margin:10px 10px auto;
}
#header {
margin-bottom:20px;
}
/*Menu Styles*/
#primary-menu {
background: url("images/bg-primary-menu.png") repeat-x scroll 0 0 transparent;
height: 66px;
margin: 0 auto;
width: 100%;
}
#menu-principal{
margin: 0;
padding: 0;
height:33px;
}
#menu-principal li {
float: left;
list-style: none;
border-right: 1px solid #FFFFFF;
}
#menu-principal li a {
display: block;
padding: 8px 12px;
text-decoration: none;
color: #fff;
text-transform:uppercase;
text-align:center;
font-weight: bold;
}
#menu-principal a:hover {
background: #000;
}
#menu-principal li ul {
position: absolute;
visibility: hidden;
height: 36px;
}
#menu-principal li ul li {
border-right: 1px solid #FFFFFF;
}
#menu-principal li ul li a {
padding: 10.5px 12px;
}
#menu-principal li ul li a:hover {
background: #000;
}
#menu-principal a.current {
background: #000;
}
#menu-principal li ul.active {
margin: 0 0 0 10px;
visibility: visible;
left: 0;
}
lo que pasa es que el menu que yo necesito es vertical y no horizontal
No tienes permitido ver enlaces.
Registrate o Entra a tu cuenta
lo que pasa es que el menu que yo necesito es vertical y no horizontal
Creo que te refieres a esto:
<!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" lang="es" xml:lang="es">
<head>
<title>Emenia Demo - Menú vertical desplegable con jQuery</title>
<link rel="stylesheet" type="text/css" href="css/default.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ // Script del Navegador
$("ul.subnavegador").hide();
$("a.desplegable").toggle(
function() {
$(this).parent().find("ul.subnavegador").slideDown('fast');
},
function() {
$(this).parent().find("ul.subnavegador").slideUp('fast');
}
);
});
</script>
</head>
<body>
<div id="contenido-demo">
<h2>Menú vertical desplegable con jQuery</h2>
<ul class="navegador">
<li><a href="#" title="Opción 1">Opción 1</a></li>
<li><a href="#" title="Opción 2">Opción 2</a></li>
<li><a href="#" class="desplegable" title="Opción 3">Opción 3</a>
<ul class="subnavegador">
<li><a href="http://www.google.es" title="Ir a Sub-Opción 3-1">Sub-Opción 3-1</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-2">Sub-Opción 3-2</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-3">Sub-Opción 3-3</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-4">Sub-Opción 3-4</a></li>
</ul>
</li>
<li><a href="#" class="desplegable" title="Opción 4">Opción 4</a>
<ul class="subnavegador">
<li><a href="#" title="Ir a Sub-Opción 3-1">Sub-Opción 3-1</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-2">Sub-Opción 3-2</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-3">Sub-Opción 3-3</a></li>
<li><a href="#" title="Ir a Sub-Opción 3-4">Sub-Opción 3-4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>Fuente: http://www.emenia.es/creando-un-menu-vertical-desplegable-con-jquery/