Comunidad de diseño web y desarrollo en internet online

[Problema] Menu con javascript y Css

Citar            
MensajeEscrito el 06 Nov 2007 11:06 pm
Bueno el otro día haciendo un menu vertical en Css y con javascript para solventar algunas cosas que la css no lo podía solucionar o no lo sabía.


Al principio, me quede con lo que había realizado, para tener un ejemplo me servía, pero claro, me apeteció las ganas de mejorarlo, pero no encontraba solución por eso os escribo a ver si podeis ayudarme.


Este es el Html del menu

Html:



Código :


<div id="navigation">
      <dl id="menu">
              <dt><a  href=""><span>Lorem ipsum</span></a></dt>
              <dt class="open" onclick="javascript:montre('smenu2',this); title=""><a><span>Nullam id mauris</span></a></dt>
                <dd id="semu2">
                    <ul>
                          <li><a href=""><span>Donec elit</span></li>
                          <li><a href=""><span>Donec elit</span></li>
                          <li><a href=""><span>Donec elit</span></li>
                          <li><a href=""><span>Donec elit</span></li>
                          <li><a href=""><span>Donec elit</span></li>
                   </ul>
               </dd>
              
              <dt><a  href=""><span>Lorem ipsum</span></a></dt>
              <dt><a  href=""><span>Lorem ipsum</span></a></dt>
<dt class="open" onclick="javascript:montre('smenu3',this); title=""><a><span>Nullam id mauris</span></a></dt>
                <dd id="semu3">
                    <ul>
                          <li><a href=""><span>Donec elit</span></li>
                          <li><a href=""><span>Donec elit</span></li>
                          <li><a href=""><span>Donec elit</span></li>
                          <li><a href=""><span>Donec elit</span></li>
                          <li><a href=""><span>Donec elit</span></li>
                   </ul>
               </dd>
              
              <dt><a  href=""><span>Lorem ipsum</span></a></dt>
              <dt><a  href=""><span>Lorem ipsum</span></a></dt>
           <dt onclick="javascript:montre();"><a  href=""><span>Integer non nunc</span></a></dt



Css

Código :

#navigation
{
   height:auto;
   margin:0 0 0 1px;
   
}

dl, dt, dd, ul, li 
{
   margin: 0;
   padding: 0;
   list-style-type: none;
}


#menu
{
   margin:0;
   width: 220px;
   height:auto;
   font:bold 11px Arial;
   margin:-3px 0 0 0;
   list-style-type: none;
}

dl#menu dt
{
   cursor: pointer;
   margin:0;
   padding:0 0 4px 0px;
   
   border-bottom:1px solid #CCCCCC;
   background:#fff;
   height:15px;
   
}

dl#menu dt span
{
   
   position:relative;
   top:3px;
   
}

dl#menu li span
{
   
   position:relative;
   
   top:3px;
   
}

dl#menu li
{

   background: #c9c9c9;
   border-bottom:1px solid #CCCCCC;
   height:13px;
   padding:0 0 4px 0;
   margin:0 0 1px 0;
}



dl#menu dt.open a
{
   color: #3a3a3a;
   margin:0;
   background: #fff url(../img/arrow.gif) 200px 5px no-repeat scroll;
   text-decoration: none;
   height:15px;
   
}



dl#menu dt.close a
{
   color:#3a3a3a;
   margin:0;
   background: #ffffff url(../img/arrow_select.gif) 197px 8px no-repeat scroll;
   text-decoration: none;
   height:15px;
   display:block;
   visibility:visible;
}


dl#menu dt.open a:hover
{
   color: #3a3a3a;
   margin:0;
   background:#fdffda url(../img/arrow.gif) 200px 5px no-repeat scroll;
   text-decoration: none;
   padding:0px 0px 4px 5px;
   
   
}

dl#menu dt.close a:hover
{
   color: #3a3a3a;
   margin:0;
   background: #fdffda url(../img/arrow_select.gif) 197px 8px no-repeat scroll;
   text-decoration: none;
   display:block;
   
   
}

dl#menu li a, dl#menu dt a 
{
   color: #3a3a3a;
   text-decoration: none;
   display: block;
   border: 0 none;
   height: 100%;
   list-style-type:none;
   padding:0px 0px 4px 5px;
}


dl#menu li a:hover, dl#menu dt a:hover
{
   background: #fdffda;
   display:block;
   height: 100%;
   padding:0px 0px 4px 5px;
}



El javascript

Código :


window.onload=montre;

function montre(id,ref)
{
var d = document.getElementById(id);
   for (var i = 1; i<=10; i++) {
      if (document.getElementById('smenu'+i))
       {
         document.getElementById('smenu'+i).style.display='none';
               
       }
       
   }
      
      
      
   if (d)
   {
         
         d.style.display='block';
         ref.className='close';
   }
   
}




Bueno lo qe hace más o menos es buscar la clase smenu cambie el estilo y pueda aparecer lo que contiene el smenu, bueno también lo hago para una listado más grande en un futuro próximo.

Aqui viene mis problemas:

1- Tal como esta se ve bien en Firefox, Opera, pero el hover no me funciona cuando tengo la imagen en Ie7/Ie6

Mi intención es hacer:

1- Cuando pulsara la opción de desplegar del hijo se quedará con el color del hover y que desapareciera al pulsar.

2-Que la opción padre, al pulsar se plegará

En la primer opción

Pensé en hacer una búsqueda de la lista poneniendo un id, pero no sé si será lo mñas acertado.

Y la otra opción todavía no lo se.

Por eso os pido ayuda, si teneis un ejemplo o algo para solucionar este problema.


Gracias por leer y esperar vuestra respuesta impacientemente.

Por Suriv

131 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Nov 2007 11:08 am
[Resuelto] Una parte

La intención 2 ya esta elaborado, si hice lo que estaba pensando ponerle un id a la lista y recorrerlo..... más tarde lo pondré.

Por Suriv

131 de clabLevel



 

firefox

 

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