Foros del Web » Creando para Internet » CSS »

menu horizontal desplegable

 Estas en el tema de menu horizontal desplegable en el foro de CSS en Foros del Web. Hola buenos dias.. quisiera saber si me podrian ayudar a armar el menu desplegable horizontal.. nose si esta es la seccion adecuada o si hay ...
  #1 (permalink)  
Antiguo 01/12/2012, 08:45
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 4 meses
Puntos: 0
menu horizontal desplegable
Hola buenos dias.. quisiera saber si me podrian ayudar a armar el menu desplegable horizontal.. nose si esta es la seccion adecuada o si hay una.. lo publico aca porque creo que es la correcta.. no quiero que lo tomen a mal ni nada por el estilo.. pero si alguno me pudiera ayudar a armar este menu para este template se lo voy a agradecer ya que intente y intente pero si no se me deforma, no se queda alineado y no queda como quiero..

aca esta el html:

Código PHP:
<!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> - Lan Project Comunidad -</title>
<meta name="keywords" content="Lan Project, Lan Project Comunidad, Lan Project Games, Comunidad Lan Project, Servidores de counter-strike 1.6, servidor publico, servidor mix,servidor zombie plague, servidor de cs 1.6,Tutoriales de Counter-strike,descargas de counter-strike,mapas de cs 1.6, mapper,guias de counter,Counter-Strike,team de lan project,lan project team,team de cs,lanprojectgames,lanprojectcomunidad,lanprojectcs,Descargar cs 1.6 full,sxe injected,gametracker,game monitor,plugins,video tutoriales," />
<meta name="description" content="Comunidad de Counter-Strike 1.6,Tutoriales,descargas y Mucho mas!" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Estilo7 {font-size: 15px}
.Estilo10 {font-size: 18px}
-->
</style>
</head>
<body>
<div id="templatemo_wrapper_outer">
<div id="templatemo_wrapper_inner">
    
    <div id="templatemo_banner"></div> <!-- end of banner -->
    
    <div id="templatemo_menu">
        <ul>
            <li><a href="index.html" class="current">Inicio</a></li>
            <li><a href="#">Descargas</a></li>
            <li><a href="#">Tutoriales</a></li>
            <li><a href="#">Nuestros Servidores</a></li>
            <li><a href="#">Contactame</a></li>
        </ul>
    </div> <!-- end of menu -->
    
    <div id="templatemo_content_wrapper">
      <!-- end of left side bar -->
        
  <div class="contenido2">
        
       <div class="content_section">
                 <div class="header_02">Descargas:
                   <div class="margin_bottom_20 horizontal_divider"></div>
                 </div>
              <p><br />
          </p>
              <div class="margin_bottom_20"></div>
                <div class="cleaner"></div>
        </div>
            
            <div class="margin_bottom_20 horizontal_divider"></div> 
            <div class="margin_bottom_20"></div>
            
        <div class="content_section">Publicado por: <a href="http://www.facebook.com/profile.php?id=100003504646620&">Emah.-</a></div>
            
           <div class="margin_bottom_40"></div>
        </div> <!-- end of content -->
      <!-- end of right side bar -->
        
      <div class="cleaner"></div>    
    </div> <!-- end of content wrapper -->
    
</div>
</div>

 <div id="templatemo_footer">
        Copyright © 2012 <a href="www.facebook.com/lanprojectcomunidad">Lan Project Comunidad</a><a href="#"></a> | Derechos Reservados</div> 
<!-- end of footer -->
    <div class="margin_bottom_10"></div>
    
    <div class="content_section">
        <center>
         </center>
        <div class="margin_bottom_10"></div>
    </div>
</body>
</html> 
Código PHP:
body {
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color:#C1C1C1;
    background: #272525 url(images/templatemo_top_bg.jpg) repeat-x;
}

a:link, a:visited { color: #FFFFFF; text-decoration: none; font-weight: normal; } 
a:active, a:hover { color: #99FF00; text-decoration: underline; }

p {
    margin: 0px;
    padding: 0px;
    text-align: justify;
}

img {
    margin: 0px;
    padding: 0px;
    border: none;
}

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }

.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px;    }
.margin_bottom_20 { clear: both; width: 100%; height: 20px; font-size: 1px;    }
.margin_bottom_30 { clear: both; width: 100%; height: 30px; font-size: 1px;    }
.margin_bottom_40 { clear: both; width: 100%; height: 40px; font-size: 1px;    }
.margin_bottom_50 { clear: both; width: 100%; height: 50px; font-size: 1px;    }
.margin_bottom_60 { clear: both; width: 100%; height: 60px; font-size: 1px;    }

.margin_right_10 { margin-right: 10px; }
.margin_right_60 { margin-right: 60px; }

.horizontal_divider {
    background: url(images/templatemo_horizontal_divider.jpg) bottom repeat-x;
}

.border_bottom {
    border-bottom: 1px dashed #000;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.rc_btn_01 a {
    clear: both;
    display: block;
    width: 120px;
    height: 25px;
    padding: 5px 0 0 0;
    font-size: 12px;
    text-align: center;
    color: #000000;
    text-decoration: none;
    border: none; 
    background: url(images/templatemo_button_01.png) no-repeat;
}

#templatemo_wrapper_outer {
    width: 100%;
    margin: 0 auto;
}

#templatemo_wrapper_inner {
    width: 980px;
    margin: 0 auto;
    padding: 0 5px;
    background: url(images/templatemo_wrapper_bg.png) repeat-y;
}

#templatemo_banner {
    width: 980px;
    height: 200px;
    background: url(images/cabezal.jpg) no-repeat;
}

/* menu */

#templatemo_menu {
    clear: both;
    width: 500px;
    height: 59px;
    padding: 0 240px;
    background: url(images/templatemo_menu_bg.jpg) no-repeat;
}

#templatemo_menu ul {
    width: 500px;
    margin: 0px;
    padding: 20px 0 0 15px;
    list-style: none;
}

#templatemo_menu ul li {
    display: inline;
}

#templatemo_menu ul li a {
    float: left;
    padding: 0 10px;
    text-align: center;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    color: #999999;
    font-weight: bold;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
    color: #ffffff;
}
/* end of menu*/

#templatemo_content_wrapper {
    clear: both;
    width: 960px;
    padding: 10px;
}

.templatemo_content {
    float: left;
    width: 670px;
    padding: 20px 19px 0 19px;
    background: #1b1919;
    border: 1px solid #363434;
}

.header_01 {
    padding: 0 0 5px 0;
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    /*color: #e40b0b;*/
}


.header_02 {
    padding: 0 0 5px 0;
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    /*color: #e40b0b;*/
}

.header_03 {
    padding: 0 0 5px 0;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    /*color: #99be29;*/    
}

.header_03 a { color: #ffffff; text-decoration: none; }
.header_03 a:hover { color: #99FF00; }

.templatemo_side_bar {
float:right;
    width: 200px;
    background: #1b1919;
    border: 1px solid #363434;
    padding-top: 20px;
    padding-right: 19px;
    padding-bottom: 0;
    padding-left: 19px;
}

.templatemo_side_bar ul {
    margin: 0px;
    padding: 0px;
}

.templatemo_side_bar ul li {
    margin: 0px;
    padding: 0 0 0 0;
    margin-bottom: 5px;
    border-left: 5px solid #000;
    list-style: none;
}

.templatemo_side_bar ul li a {
    display: block;
    background: #242224;
    padding: 5px 0 5px 10px;
    color: #b5b1b1;
    text-decoration: none;
}

.templatemo_side_bar ul li a:hover {
    color: #ffffff;
    background: #000;
}

.templatemo_side_bar form {
    margin: 0px;
    padding: 0px;
}

#search_field {
    padding: 5px 0 0 0;
    height: 20px;
    width: 175px;
    margin-bottom: 10px;
}

#search_button {
    float: right;
    width: 120px;
     height: 30px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    white-space: pre;
    background: url(images/templatemo_button_02.png) no-repeat; 
    color: #000000;
    border: none;
}

.content_section {
    clear: both;
    padding: 0 0 0 0;
}

.content_section p span {
    color: #ffffff;
}

.image_wrapper_01 {
    float: left;
    position: relative;
    margin: 3px 20px 0 0;
    background: #131212;
    padding: 4px;
}

.image_wrapper_01 img {
    border: 1px solid #363434;
}

.image_wrapper_02 {
    position: relative;
    margin: 0 0 10px 0;
    background: #131212;
    padding: 4px;
}

.image_wrapper_02 span {
    position: absolute;
    width: 20px;
    height: 20px;
    bottom: 10px;
    right: 10px;
    background: url(images/templatemo_play_icon.jpg) no-repeat;
}

.image_wrapper_02:hover span {
    background: url(images/templatemo_play_icon_hover.jpg) no-repeat;
}

.image_wrapper_02 img {
    border: 1px solid #363434;
}

.image_wrapper img {
    border: 1px solid #363434;
}

.latest_news {
    clear: both;
    padding-bottom: 5px;
}

#templatemo_footer {
    clear: both;
    width: 990px;
    height: 40px;
    margin: 0 auto;
    padding: 20px 0 0 0;
    text-align: center;
    background: url(images/templatemo_footer.jpg) no-repeat;
}

.centrar {
text-align:center;
}

.contenido2 {
margin:0 auto;
} 
necesito poder desplegar de descargas,tutoriales y nuestros servidores, unos sub menus.. sin que se desforme la pagina ni que pierda el estilo que ya tiene..

alguien me podria ayudar?..

saludos.
  #2 (permalink)  
Antiguo 01/12/2012, 11:22
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: menu horizontal desplegable
para un menu desplegable horizontal yo siempre suelo usar este tipo de CSS

Código CSS: 
Ver original
  1. .menu,.menu ul{margin:0;padding:0;}
  2. .menu li{display:block;float:left;margin:0 1px;}
  3. .menu li>a,.menu li>span{display:block;font:12px/28px arial,verdana,tahoma;color:#333;text-decoration:none;background:#fe0;padding:0 8px;}
  4. .menu li ul{position:absolute;display:none;}
  5. .menu li:hover ul,.menu li ul:hover{display:block;}
  6. .menu li li{float:none;}

Código HTML: 
Ver original
  1. <ul class="menu">
  2.     <li><a href="#">link</a></li>

yo te doy la idea tu modificalo y adaptalo a tus necesidades
  #3 (permalink)  
Antiguo 01/12/2012, 11:44
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: menu horizontal desplegable
muchas gracias por responder! :D necesito saber algo mas, como puedo hacer para esconder los submenus, porque lo puse como yo queria pero.. los sub menus se ven y se me desforma todo el menu T_T.. me podrias ayudar en eso?
  #4 (permalink)  
Antiguo 01/12/2012, 11:46
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: menu horizontal desplegable
Has probado el código que te mostré? contemple la posibilidad de un sub-menú y te facilite el código para ocultarlo y que se muestre al pasar el mouse sobre el elemento padre...

va quizas te haga falta un html de ejemplo... aqui te pongo el html correspondiente al CSS que te habia mostrado, este incluye un submenu en el segundo elemento
Código HTML: 
Ver original
  1. <ul class="menu">
  2.     <li><a href="#">link</a></li>
  3.     <li><a href="#">link</a>
  4.         <ul>
  5.             <li><a href="#">link</a></li>
  6.             <li><a href="#">link</a></li>
  7.             <li><a href="#">link</a></li>
  8.         </ul>
  9.     </li>
  10.     <li><a href="#">link</a></li>
  11.     <li><a href="#">link</a></li>
  12. </ul>
  #5 (permalink)  
Antiguo 01/12/2012, 11:55
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: menu horizontal desplegable
Bien ahora si aparece pero se ve de costado el sub menu y creo que es por algo de aca:


este es el menu que ya esta por defecto en la pagina o si saco algo de aca si queda pero se ve sin estilo el menu y aparte de eso no se ve centrado.. :S
Cita:
/* menu */

#templatemo_menu {
clear: both;
width: 500px;
height: 59px;
padding: 0 240px;
background: url(images/templatemo_menu_bg.jpg) no-repeat;
}

#templatemo_menu ul {
width: 500px;
margin: 0px;
padding: 20px 0 0 15px;
list-style: none;
}

#templatemo_menu ul li {
display: inline;
}

#templatemo_menu ul li a {
float: left;
padding: 0 10px;
text-align: center;
font-size: 13px;
text-align: center;
text-decoration: none;
color: #999999;
font-weight: bold;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #ffffff;
}
/* end of menu*/
este es el menu que puse ahora:

Cita:
<div id="templatemo_banner"></div> <!-- end of banner -->
<div id="templatemo_menu">
<ul class="menu">
<ul class="menu">
<li><a href="#">link</a></li>
<li><a href="#">link</a>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div> <!-- end of menu -->
si me podes ayudar a descubrir el error te lo agradeceria sino, no te hagas problema.. gracias por responde igualmente.
  #6 (permalink)  
Antiguo 01/12/2012, 12:04
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: menu horizontal desplegable
cuando colocas codigo aqui, en el editor puedes ver la palabra Highlight utiliza el adecuado para el codigo que vas a mostrar de esa forma facilitas la lectura

tus problemas radican en
Cita:
<div id="templatemo_menu">
<ul class="menu">
<ul class="menu">
<li><a href="#">link</a></li>
y declaras display:inline este afecta a todos los elementos del menu, si no quieres que afecte al submenu tienes que declarar display:block en los elementos del sub menu
Código CSS: 
Ver original
  1. #templatemo_menu ul li {
  2. display: inline;
  3. }
  4. #templatemo_menu li li {
  5. display: block;
  6. }
  #7 (permalink)  
Antiguo 01/12/2012, 12:13
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: menu horizontal desplegable
Me sigue pasando esto mira:




Cita:
/* menu */

#templatemo_menu {
clear: both;
width: 500px;
height: 59px;
padding: 0 240px;
background: url(images/templatemo_menu_bg.jpg) no-repeat;
}

#templatemo_menu ul {
width: 500px;
margin: 0px;
padding: 20px 0 0 15px;
list-style: none;
}

#templatemo_menu ul li {
display: inline;
}
#templatemo_menu li li {
display: block;
}

#templatemo_menu ul li a {
float: left;
padding: 0 10px;
text-align: center;
font-size: 13px;
text-align: center;
text-decoration: none;
color: #999999;
font-weight: bold;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
color: #ffffff;
}
/* end of menu*/
Cita:
<div id="templatemo_banner"></div> <!-- end of banner -->
<div id="templatemo_menu">
<ul class="menu">
<li><a href="#">link</a></li>
<li><a href="#">link</a>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
y ademas de eso no esta centrado.. :S
  #8 (permalink)  
Antiguo 01/12/2012, 14:05
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: menu horizontal desplegable
prueba con esto
Código CSS: 
Ver original
  1. .menu{text-align:center;}
  2. .menu,.menu ul{margin:0;padding:0;}
  3. .menu li{list-style:none;display:inline;position:relative;}
  4. .menu li ul{display:none;position:absolute;left:0;}
  5. .menu li:hover ul,.menu ul:hover{display:block;}
  6. .menu li li{display:list-item;}

Como siempre este es código de ejemplo y funciona con el html que te puse, te toca adaptarlo a tu menú.
  #9 (permalink)  
Antiguo 01/12/2012, 18:39
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: menu horizontal desplegable
se sigue viendo de la misma manera..


pero si yo saco esto:

Cita:
#templatemo_menu ul li a {
float: left;
padding: 0 10px;
text-align: center;
font-size: 13px;
text-align: center;
text-decoration: none;
color: #999999;
font-weight: bold;
}
se ve asi:



la verdad no entiendo porque hace asi.. que dice que puede ser que este pasando?
  #10 (permalink)  
Antiguo 01/12/2012, 18:51
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: menu horizontal desplegable
valla men, elimina todo el código CSS del menú y ve agregándolo por pasos con el código que yo te di, si no das una con el código que tienes mas vale empezar de ceros con un código que sabes funciona, si te es necesario también borra el HTML y utiliza la estructura del que te di.

vamos, solo tienes que empezar de nuevo con el menú que no es gran cosa.
  #11 (permalink)  
Antiguo 01/12/2012, 19:00
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: menu horizontal desplegable
lo que me pasastes funciona bien, pero en el template que tengo es el problema, entendes? osea cuando lo pongo en el template no funciona... recien acabo de probar eso que me dijistes y si funciona pero en donde yo lo quiero poner no.. porque le pasa eso que te mostre en imagenes anteriores, no te enojes pero es asi.. eso es lo que quiero solucionar.. saludos..
  #12 (permalink)  
Antiguo 01/12/2012, 19:11
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: menu horizontal desplegable
no me enojo, ni mucho menos.... aquí el de la bronca y el afectado eres tu, yo te di un consejo es tu decisión tomarlo o no.

Yo en tu lugar eliminaría todo CSS que afecte al menú he iría agregando por pasos, utiliza firefox con el plugin firebug para examinar cada regla CSS que afecta al menú.
  #13 (permalink)  
Antiguo 01/12/2012, 19:16
 
Fecha de Ingreso: noviembre-2012
Mensajes: 10
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: menu horizontal desplegable
muchas gracias, ahora me voy a fijar y lo voy a hacer :)

Etiquetas: contenido, desplegable, horizontal, hover, html, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:22.