Foros del Web » Creando para Internet » CSS »

Menu Horizontal Drop Down Ayuda con Submenus

Estas en el tema de Menu Horizontal Drop Down Ayuda con Submenus en el foro de CSS en Foros del Web. Que tal a todos soy nuevo por aqui, tengo un problema con un menu que estaba haciendo donde utilizan css y jquery la verdad no ...
  #1 (permalink)  
Antiguo 26/03/2010, 00:58
 
Fecha de Ingreso: marzo-2010
Mensajes: 1
Antigüedad: 7 años, 8 meses
Puntos: 0
Menu Horizontal Drop Down Ayuda con Submenus

Que tal a todos soy nuevo por aqui, tengo un problema con un menu que estaba haciendo donde utilizan css y jquery la verdad no tengo conocimiento de eso y pues ee querido aprender, alguien me podria ayudar a saber como lograr colocar submenus?? tengo el menu principal y en la seccion de diplomados se despliega un listado de 4 submenus y cada uno de ellos tiene otros submenus me gustaria que aparecieran a la derecha al sobreponer el puntero del mouse en cada uno de ellos como logro esto??? mi codigo que por cierto lo encontre en una web en un tutorial es el siguiente con algunas modificaciones diminutas que hize espero su apoyo!! me urge tener este menu terminado

<!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=iso-8859-1" />
<title>CONDHUCE, S.C.</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("ul.submenu").parent().append("<span></span>");

$("ul.menu li span").hover(function() { //Al pasar mouse se ejecuta...

//Con este codigo aplicamos el movimiento de arriva y abajo para el submenu
$(this).parent().find("ul.submenu").slideDown('fas t').show(); //Menu desplegable al hacer click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.submenu").slideUp('slow' ); //Ocultamos el submenu cuando el raton sale fuera del submenu
});

}).hover(function() {
$(this).addClass("subhover"); //Agregamos la clase subhover
}, function(){ //Cunado sale el cursor, sacamos la clase
$(this).removeClass("subhover");
});

});
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 12px normal Arial, Helvetica, sans-serif;
background: #FFF url(body_bg.gif) repeat-x;
background-image: url(../../CONDHUCE_Site/images/bg.png);
background-repeat: no-repeat;
background-position:center;
}
.container {
width: 800px;
margin: 0 auto;
position: relative;
}
#header {
background: url(header_bg.gif) no-repeat center top;
padding-top: 30px;
}
#header .disclaimer {
color:#666;
padding: 10px 0 7px 0;
text-align:left;
display: block;
position: absolute;
top: 0; right: 0;
}
#header .disclaimer a { color:#003399;}
ul.menu {
list-style: none;
padding: 1px;
margin: 0;
float: left;
width: 800px;
background: #222;
font-size: 1.2em;
background: url(topnav_bg.gif) repeat-x;
}
ul.menu li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.menu li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.menu li a:hover{
background: url(topnav_hover.gif) no-repeat center top;
}
ul.menu li span {
width: 17px;
height: 35px;
float: left;
background: url(subnav_btn.gif) no-repeat center top;
}
ul.menu li span.subhover {background-position: center bottom; cursor: pointer;}
ul.menu li ul.submenu {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.menu li ul.submenu li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.menu li ul.submenu li a {
float: left;
width: 145px;
background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.menu li ul.submenu li a:hover {
background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>

</head>

<body>
<div class="container">
<div id="header">
<ul class="menu">
<li><a href="#">Principal</a></li>
<li>
<a href="#">Con&oacute;zcanos</a>

</li>
<li>
<a href="#">Diplomados</a>
<ul class="submenu">
<li><a href="#">Tópicos Selectos de Ing. Petrolera</a></li>
<li><a href="#">Tópicos Selectos Ambientales</a></li>
<li><a href="#">Tópicos Selectos de Seguridad Industrial</a></li>
<li><a href="#">Tópicos Selectos de Administración</a></li>

</ul>
</li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Nuestras Pol&iacute;ticas</a></li>
<li><a href="#">Clientes </a></li>
<li><a href="#">Cont&aacute;ctenos</a></li>
</ul>
</div>
</div>
<ul>
<h3>&nbsp;</h3>
</ul>


</body>
</html>
  #2 (permalink)  
Antiguo 26/03/2010, 07:45
 
Fecha de Ingreso: marzo-2009
Ubicación: Santo André - São Paulo - Brasil
Mensajes: 91
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Menu Horizontal Drop Down Ayuda con Submenus

www.arudi.net

Yo creo que va ayudar-lo
__________________
Exitem 11 tipos de personas. Las personas que comprendem binario. Y las personas que no comprende.

Tudo en la vida és sencillo o muy sencillo.
  #3 (permalink)  
Antiguo 26/03/2010, 08:59
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Menu Horizontal Drop Down Ayuda con Submenus

Cita:
Iniciado por flpms Ver Mensaje
www.arudi.net

Yo creo que va ayudar-lo
La dirección correcta es www.araudi.net

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #4 (permalink)  
Antiguo 27/03/2010, 17:53
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Menu Horizontal Drop Down Ayuda con Submenus

Hola:

También aquí, en las FAQ's, hay ejemplos.

Saludos.


Etiquetas: drop, horizontal
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:02.