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
You are not allowed to view links.
You are not allowed to view links.
Register or Login or You are not allowed to view links.
Register or Login
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/