Foros del Web » Creando para Internet » CSS »

de vertical a horizontal

Estas en el tema de de vertical a horizontal en el foro de CSS en Foros del Web. Amigos tengo un menu que despliega vertical y necesitaria que desplegase horizontal, uno al lado del otro: item1 | item2 | item3 Esto necesito hacerlo ...
  #1 (permalink)  
Antiguo 20/08/2008, 10:28
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
de vertical a horizontal

Amigos tengo un menu que despliega vertical y necesitaria que desplegase horizontal, uno al lado del otro:

item1 | item2 | item3

Esto necesito hacerlo para explorer 6, ya que al desplega rel menu queda por debajo de los <select> y como aparentemente no hay solución para esto, me gustaría que si uno entra con explorer 6 el menu cambie el desplegable ¿me explico?

Mi código CSS:
Cita:
#contmenu{
background-color: #0667a0;
margin:0;
height:22px;
position:relative;
}
.menuppal ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.menuppal ul li{
position: relative;
display: inline;
float: left;
background-color: #0667a0;
font-family:Arial;
font-size:0.9em;
}
.menuppal ul li a{
display: block;
padding: 1px 3px;
border-left: 1px solid white;
border-right: 1px solid white;
border-left-width: 0;
text-decoration: none;
text-align: center;
line-height: 20px;
color: #fff;
}
.menuppal ul li ul{
left: 0;
position: absolute;
top: 1em;
display: block;
visibility: hidden;
}
.menuppal ul li ul li{
display: block;
float: none;
}
.menuppal ul li ul li ul{
left: 259px;
top: 0;
}
.menuppal ul li ul li a{
text-align: left;
display: block;
width: 160px; /*tamaño de la caja del subMenu*/
color: #fff;
text-decoration: none;
padding: 1px 5px;
border-top: 1px solid #fff;
line-height:2em;
}

.menuppal ul li a:hover{
background-color: #84b832;
color: #fff;
text-decoration: none;
}
* html .menuppal ul li {
float: left;
height: 1%;
}
* html .menuppal ul li a {
height: 1%;
width:70px;
padding:1px 2px;
}
*html #contmenu{
height: 1%;
}
.nobr {white-space: nowrap;}
.sombra_menu{
display:block;
background:#fff url(/imagenes/sombra-menu.png) repeat-x;
height:13px;
width:100%;
}
El script que utiliza:

Cita:
var menuids=["treemenu1"]

function buildsubmenus_vertical(){
for (var i=0; i<menuids.length; i++){
var menuid = document.getElementById(menuids[i]);
if(menuid!=null){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px"
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"

} else { //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}

ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_vertical, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_vertical)
y por último el HTML:

Código HTML:
<div class="menuppal" id="contmenu"> 
  <ul id="treemenu1">
    <li><a href="#" class="mainfoldericon"><span class="nobr">Facturación</span></a>
      <ul>
        <li><a href="#">Cambio de Domícilio</a></li>
        <li><a href="#">Cuenta</a></li>
        <li><a href="#">No me llegó la factura</a></li>
        <li><a href="#">Consumos</a></li>
        <li><a href="#">No entiendo la factura</a></li>
        <li><a href="#">Cambio de fecha de vencimiento</a></li>
      </ul>
      .......
  </ul>
</div> 
Mil gracias por la ayuda!
  #2 (permalink)  
Antiguo 20/08/2008, 16:16
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: de vertical a horizontal

bueno pero esto es bastante simplon dependiendo como lo quieras hacer
una salida rapida (lo q yo haria)
agregar en el head de la pagina
<!--[if IE 6]>
<link href="estilosie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

y en esta hoja extra que solo es ejecutada por ie6 modificas los estiilos para que se acomoden en horizontal

a ver si no me equivoco solo deberias agregar

.menuppal ul li ul{
margin-top:1em; /*o la altura del menu superior*/
position:static;
}
.menuppal ul li ul li {display:inline;}

aver como va por ahi
saludos
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 20/08/2008, 20:22
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: de vertical a horizontal

Cita:
Iniciado por emiliodeg Ver Mensaje
bueno pero esto es bastante simplon dependiendo como lo quieras hacer
una salida rapida (lo q yo haria)
agregar en el head de la pagina
<!--[if IE 6]>
<link href="estilosie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

y en esta hoja extra que solo es ejecutada por ie6 modificas los estiilos para que se acomoden en horizontal

a ver si no me equivoco solo deberias agregar

.menuppal ul li ul{
margin-top:1em; /*o la altura del menu superior*/
position:static;
}
.menuppal ul li ul li {display:inline;}

aver como va por ahi
saludos
Gracias por tomarte el tiempo de leer todo y contestar. Al final lo pude resolver, y mejor aún, pude resolver los del div y el select en ie6!

Muchas gracias!
  #4 (permalink)  
Antiguo 20/08/2008, 20:34
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: de vertical a horizontal

despues cuando tengas tiemo ve de dejar la solucion seria interesante de ver para aprender :)
__________________
Degiovanni Emilio
developtus.com
  #5 (permalink)  
Antiguo 21/08/2008, 07:39
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: de vertical a horizontal

estuve investigando muchisimo y logramos por medio de un iframe, que solo se activa si es Explorer 6.

Si les interesa más tarde cuelgo el código.
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 20:45.