Comunidad de diseño web y desarrollo en internet online

tengo un problema con mi menu horizontal desplegable con jquery

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 07 Abr 2012 03:27 am
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 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 ayude y me explique a ver cual es mi error por favor.

ACA DEJO EL CODIGO:
Esto es el Codigo de mi index.php

Código :

<!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=utf-8" />
                    <title></title>
                        
                        <link type="text/css" href="css/estilo_general.css" rel="stylesheet" />
                     <script type="text/javascript" src="jquery/jquery.js"></script>
                            <script type="text/javascript" src="js/menu.js"></script>
                                               
                            <!--Eliminar el Mensaje No back link-->
                                <script type="text/javascript">
                                    $(document).ready
                                    (
                                        function()
                                            {
                                                $("body div:last").remove();
                                             }
                                    );
                                </script>
                            <!--Fin Mensaje No back link-->               
                </head>
                
                <body>
                <!--CONTENEDOR DE LA WEB GENERAL-->          
                    <div id="contenedor">
                         <div id="cabecera"><img src="imagen/fondo/header.jpg" width="1200px" height="210px" /></div>  
                        
                        <!--MENU HORIZONTAL DESPLEGABLE JQUERY ANIMADO-->
                            <div id="menu">        
                                <ul class="menu">  
                                    
                                        <li><a href="#"><span>Portada</span></a></li>
                                      <li><a href="#" class="parent"><span>GERENCIA</span></a>                   
                                           <div><ul>                                                              
                                                  <li><a href="#"><span>Bienvenidos      </span></a></li>
                                                    <li><a href="#"><span>Quienes Somos      </span></a></li>
                                                    <li><a href="#"><span>Misi&oacute;n      </span></a></li>
                                                    <li><a href="#"><span>Visi&oacute;n      </span></a></li>
                                                    <li><a href="#"><span>Objetivos         </span></a></li>                                    
                                                    <li><a href="#"><span>Organigrama      </span></a></li>
                                                   <li><a href="#" class="parent"><span>Equipo de Trabajo</span></a>
                                                       <div><ul>
                                                           <li><a href="#" title="Sub Gerencia de Desarrollo Social"><span>S.G.D.S.</span></a></li>
                                                            <li><a href="#" title="Sub Gerencia de Desarrollo Econ&oacute;mico"><span>S.G.D.E.</span></a></li>
                                                            <li><a href="#" title="Sub Gerencia de Desarrollo de Programas Sociales"><span>S.G.D.P.S.</span></a></li>
                                                        </ul></div>
                                                    </li>
                                            </ul></div>
                                          </li>  
                                          <li><a href="#" class="parent"><span>Sub Gerencia</span></a>
                                           <div><ul>
                                                  <li><a href="#" title="Sub Gerencia de Desarrollo Social"><span>S.G.D.S.</span></a></li>
                                                    <li><a href="#" title="Sub Gerencia de Desarrollo Econ&oacute;mico"><span>S.G.D.E.</span></a></li>
                                                    <li><a href="#" title="Sub Gerencia de Desarrollo de Programas Sociales"><span>S.G.D.P.S.</span></a></li>
                                            </ul></div>
                                        </li>  
                                         <li><a href="#"><span>Bancos de Proyectos</span></a></li>                                                                                             
                                         <li><a href="#"><span>Transparencia</span></a></li>                               
                                         <li><a href="#"><span>CAT&Aacute;LOGOS DE ACTIVIDADES</span></a></li>
                                         <li><a href="#"><span>T&Uacute;rismo</span></a></li>
                                         <li><a href="#"><span>Ultima Noticia</span></a></li>          
                                         <li><a href="#"><span>Bolsa de Empleos</span></a></li> 
                                        <!--<li><a href="#" class="parent"><span>M&aacute;s</span></a>
                                           <div><ul>                                     
                                                  <li><a href="#"><span>Sub Item 1</span></a></li>
                                                    <li><a href="#"><span>Sub Item 2</span></a></li>
                                                    <li><a href="#"><span>Sub Item 3</span></a></li>                       
                                            </ul></div>
                                        </li>      -->  
                                  </ul>
                                </div> 
                           <!--FIN DEL MENU DESPLEGBLE-->   
                                   <br />
                           <!--CONSTRUCCION DEL CUERPO PRINCIPAL-->
                                 <div id="cuerpo">
                                      <div id="lateral_left">
                                        </div>
                                            
                                        <div id="contenido_center">
                                        </div>
                                            
                                        <div id="lateral_right">
                                        </div>
                                </div>
                                     <br />                               
                        <!--CONSTRUCCION DEL PIE DE PAGINA -->
                               <div id="pie_pagina">
                                   <div class="bordes_pie">
                                    </div>
                                </div>
                        <!--FIN PIE PAGINA...-->
                    </div> 
                    <!--FIN CUERPO PRINCIPAL...-->
                    
                <!--FIN DE CONTENEDOR-->     
                 </body>                
        </html>


Este el estilo_general.css Creo que en el estilo se encuentra el error

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*/
}


y dejo la imagen

Código :

[img]http://l4c.me/fotos/marivera1256/menu-horizontal-jquery/sizes/o[/img]

Por macuñariver

0 de clabLevel



 

Envíale un mensaje privado    

firefox
Citar            
MensajeEscrito el 07 Abr 2012 03:49 am
habría que verla funcionando para encontrar el error, con el solo código es como buscar una aguja en un pajar.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado     Web

Front-end Developer

chrome
Citar            
MensajeEscrito el 08 Abr 2012 04:42 am
Si puedes sube el archivo menu.js

Por pepoflex

Claber

628 de clabLevel

7 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Ing. de Sistemas, Diseñador CAD 3D-, Modelador 3D Blender, Diseñador Web Gráfico, Desarrollador, etc

chrome
Citar            
MensajeEscrito el 08 Abr 2012 04:46 am
Cuando dices:

poner a la medida de mi cabecera de mi banner de mi pagina web...

Quieres decir que al hacer click en un item del menu no se mueva la pagina al principio y que se mantenga en el mismo lugar ?

Por pepoflex

Claber

628 de clabLevel

7 tutoriales

Genero:Masculino  

Envíale un mensaje privado     Web

Ing. de Sistemas, Diseñador CAD 3D-, Modelador 3D Blender, Diseñador Web Gráfico, Desarrollador, etc

chrome
Citar            
MensajeEscrito el 09 Abr 2012 01:26 pm
post movido

Por Mariux

BOFH

7756 de clabLevel

28 tutoriales
15 articulos

Genero:Femenino   Héroes Editores

Envíale un mensaje privado     Web

Diseñadora & ilustradora

chrome
Foros de discusión > Javascript y jQuery

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.