Foros del Web » Programando para Internet » Jquery »

Menu Horizontal Animado con Jquery

Estas en el tema de Menu Horizontal Animado con Jquery en el foro de Jquery en Foros del Web. Hola a todos, saludos me gustaria por favor si alguien me explique como elaborar un menu horizontal desplegable con jquery estoy haciendo mi primer proyecto ...
  #1 (permalink)  
Antiguo 06/04/2012, 23:51
 
Fecha de Ingreso: abril-2012
Ubicación: Peru-Pucallpa
Mensajes: 1
Antigüedad: 12 años
Puntos: 0
Menu Horizontal Animado con Jquery

Hola a todos, saludos me gustaria por favor si alguien me explique como elaborar un menu horizontal desplegable con jquery estoy haciendo mi primer proyecto de pagina web en php, ahora estoy entrando en el mundo pagina web dinamicas mas se lo basico pero no entiendo bien el css..antes les agradeceria bastante....bueno quiero explicarle; el menu que estoy haciendo es un menu animado en jquery y quiero poner a la medida de mi cabecera de mi banner de mi pagina web que estoy haciendo, cuando le pongo a la medida de mi cabecera no se quiere igualar a la medida de mi cabecera de mi pagina creo que el estilo de mi css...esta mal creo bueno les agradesco a la persona que me ayude y me explique a ver cual es mi error por favor.

Esto es el Codigo de mi estilo_general.css
body {
background:url(../imagen/fondo/caramaya.jpg) fixed center no-repeat;/*azul de fondo*/
margin:2px;
padding:2px;
}
#contenedor {
width:1200px;
margin:auto;
border:#000000 2px solid;
background:url(../imagen/fondo/body.png);
}
#cabecera {
width:1200px;
margin:auto;
clear:both;
}
/*MENU HORIZONTAL DESPLEGABLE JQUERY ANIMADO*/
/* menu::base */
#menu {
height: 52px;
padding-left: 6px;/*tamaño de la Isquierda*/
background:url(../imagen/img_menu/left.png) no-repeat;
_background:url(../imagen/img_menu/left.gif) no-repeat;
width:auto;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
#menu ul.menu {
padding-right: 6px;/*tamaño de la Derecha*/
background:url(../imagen/img_menu/right.png) no-repeat right 0;
_background:url(../imagen/img_menu/right.gif) no-repeat right 0;
}
#menu li {
position: relative;
margin: 0;
padding: 0 0px 0 0;
display: block;
float: left;
z-index: 9;
width: auto;
}
#menu ul ul li {
z-index: 9;
}
#menu li div {
list-style: none;
float: left;
position: absolute;
z-index: 11;
top: 52px;
left: 0;
visibility: hidden;
width: 180px;
margin: 0px 0 0 -4px;
padding: 0;
background:url(../imagen/img_menu/subsubmenu-top.png) no-repeat 0px 0;
_background:url(../imagen/img_menu/subsubmenu-top.gif) no-repeat 0px 0;
}
#menu ul ul {
z-index: 12;
padding: 0px 4px 10px 4px;
background:url(../imagen/img_menu/submenu-bottom.png) no-repeat 0px bottom;
_background:url(../imagen/img_menu/submenu-bottom.gif) no-repeat 0px bottom;
margin: 10px 0 0 0;
}
#menu li:hover>div {
visibility: visible;
}
#menu a {
position: relative;
z-index: 10;
height: 50px;
display: block;
float: left;
line-height: 50px;
text-decoration: none;
margin-top: 1px;
white-space: nowrap;
width: auto;
padding-right:5px;
text-align:center;
}
#menu span {
margin-top: 2px;
padding-left: 15px;
color: #fff;
font: normal 11px verdana,Arial, Tahoma,Century gothic, sans-serif;
background: none;
line-height: 50px;
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
text-align: center;
}
/*Fin...*/

/* menu::level1 */
#menu a {
padding: 0 10px 0 0;
line-height: 50px;
height: 52px;
margin-right: 5px;
_margin-right: 1px;
background: none;
text-transform: uppercase;
}
#menu a:hover {
background:url(../imagen/img_menu/selected-right-sub.png) no-repeat right -1px;
}
#menu a:hover span {
background:url(../imagen/img_menu/selected-left-sub.png) no-repeat 0 -3px;
}
#menu li.current a,
#menu ul.menu>li:hover>a{
background:url(../imagen/img_menu/selected-right-sub.png) no-repeat right -1px;
}
#menu li.current a span,
#menu
ul.menu>li:hover>a span {
background:url(../imagen/img_menu/selected-left-sub.png) no-repeat 0 -3px;
}
#menu ul.menu>li:hover>a
span {
color: #258B03;
}
/*#menu li { }
#menu li.last { background: none; }*/
/*Fin...*/

/* menu::level2 */
#menu ul ul li {
background: none;
padding: 0;
}
#menu ul ul a {
padding: 0px;
height: auto;
float: none;
display: block;
line-height: 25px;
font-size: 11px;
color: #fff;
z-index: -1;
padding-left: 5px;
white-space: normal;
width: 152px;
margin: 0 8px;
text-transform: none;
}
#menu ul ul a span {
padding: 0 5px;
line-height: 25px;
font-size: 11px;
}
#menu li.current ul a,
#menu li.current ul a
span {
background:none;
}
#menu ul ul a:hover {
background:none;
background-color: #092909;
}
#menu ul ul a:hover
span {
background:none;
color: #258B03;
}
#menu ul ul a.parent {
background:url(../imagen/img_menu/submenu-pointer.png) no-repeat right bottom;
_background-image:url(../imagen/img_menu/submenu-pointer-hover.gif);
}
#menu ul ul a.parent
span {
background:none;
}
#menu ul ul
a.parent:hover {
background:url(../imagen/img_menu/submenu-pointer.png) no-repeat right bottom;
_background:url(../imagen/img_menu/submenu-pointer-hover.gif) no-repeat right bottom;
background-color: #092909;
}
#menu ul ul
a.parent:hover span {
background:none;
}
#menu ul ul span {
margin-top: 0;
text-align: left;
}
#menu ul ul li.last { background: none; }
#menu ul ul li {
width: 100%;
}
/*FIN...*/

/* menu::level3 */
#menu ul ul div {
width: 180px;
padding: 0;
margin: -62px 0 0 165px !important;
}
#menu ul ul ul {
padding: 10px 4px 0 4px;
}
#menu ul ul div li {
position:relative;
top:-10px;
}
/*FIN...*/

/* lava lamp */
#menu li.back {
background:url(../imagen/img_menu/selected-left-sub.png) no-repeat 0 0;
background:
width: 5px;
height: 52px;
z-index: 8;
position: absolute;
padding: 0;
margin: 0px 0 0 0;
}

#menu li.back .left {
padding:0;
width:auto;
background:url(../imagen/img_menu/selected-right-sub.png) no-repeat right 0;
height: 52px;
margin: 0 0 0 5px;
float: none;
position: relative;
top: 0;
left: 0;
visibility: visible;
}
/*FIN...*/
/*FIN MENU HORIZONTAL DESPLEGABLE JQUERY ANIMADO*/



#cuerpo {
width:1200px;
overflow:hidden;
height:auto;
}
#lateral_left {
width:250px;
background-color:#9933FF;/*Color Violeta Lateral Isquierdo*/
height:300px;
float:left;
}
#contenido_center {
width:700px;
background-color:#FFFFFF;/*Color blanco Centro*/
height:300px;
float:left;
}
#lateral_right {
width:250px;
background-color:#CC3300;/*Color naranja Lateral derecho*/
height:300px;
float:right;
}
#pie_pagina {

height:50px;
background-color:#330000;/*Color Violeta Oscuro pie de pagina*/
}

Este es el Codigo de mi Jquery

y les dejo el lins de la imagen:

Código PHP:
Ver original
  1. [IMG]http://l4c.me/fotos/marivera1256/menu-horizontal-jquery/sizes/o[/IMG]

porfavor les agradesco a las personas que son solidario bueno gracias y muchas benciones para todos cudts

Última edición por marivera1256; 06/04/2012 a las 23:57

Etiquetas: contenido, css, horizontal, php, animados
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 16:32.