[SOLUCIONADO] Alguien que sepa JQueryyy

Devilboy · Noviembre 21, 2013, 02:10:08 PM

POr favor, necesito que alguien que sepa javascript me ayude con un menu

alguien?

ANTRAX · Noviembre 21, 2013, 02:16:21 PM

Pon el codigo o lo que necesites para poder ayudarte. O mas informacion acerca de lo que necesitas

Devilboy · Noviembre 21, 2013, 02:25:08 PM

Hay un menu pero lo que quiero es agregarle otro nivel al menu

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

ANTRAX · Noviembre 21, 2013, 02:33:42 PM

Seria una especie de submenu?

> Home
>> Descargas
>>> Linux
>>> Windows

Algo asi?

Devilboy · Noviembre 21, 2013, 02:41:05 PM

si exacto, ahi el menu que está solo viene menu padre e hijo y yo quiero agregar otro nivel

abuelo
padre
hijo

Jimeno · Noviembre 21, 2013, 03:07:21 PM

Creo que te refieres a esto: 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

HTML:

Código: html5

<!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:

Código: javascript


<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:

Código: css

* {
    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;
}

Devilboy · Noviembre 21, 2013, 03:08:31 PM

lo que pasa es que el menu que yo necesito es vertical y no horizontal

Jimeno · Noviembre 21, 2013, 03:11:14 PM

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:

Código: html5


	
<!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&oacute;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: 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

[SOLUCIONADO] Alguien que sepa JQueryyy

Devilboy

Noviembre 21, 2013, 02:10:08 PM Ultima modificación: Agosto 20, 2014, 08:55:50 PM por Expermicid

ANTRAX

Noviembre 21, 2013, 02:16:21 PM #1

Devilboy

Noviembre 21, 2013, 02:25:08 PM #2

ANTRAX

Noviembre 21, 2013, 02:33:42 PM #3

Devilboy

Noviembre 21, 2013, 02:41:05 PM #4

Jimeno

Noviembre 21, 2013, 03:07:21 PM #5 Ultima modificación: Noviembre 21, 2013, 03:09:46 PM por Jimeno

Devilboy

Noviembre 21, 2013, 03:08:31 PM #6

Jimeno

Noviembre 21, 2013, 03:11:14 PM #7