[HTML][CSS] Rozwijane menu Opcje

[grzehotnik]

Witam
chcę zrobić menu po kliknięciu na którym rozwinie się podmenu,
ale nie wiem jak.
Proszę o pomoc

[Savage.Mephisto]

Żeby poszczególne elementy były obok siebie trzeba odpowiednio zmodyfikować kod CSS.

Podam Ci gotowe rozwiązanie, ale oparte o listę <ul>,<li>.
Kiedyś zrobiłem takie menu dla potrzeb jednego z projektów.
Oto kod:

- CSS:

Kod

#nav, #nav ul {
       padding: 0;
       margin: 0;
       list-style: none;
       line-height: 1;
       text-align: left;
       z-index: 1;
   }
  
   #nav a {
       display: block;
       width: 8em !important;
       width: 9em;
   }
  
   #nav li {
       float: left;
       width: 10em !important;
       width: 9em;
   }
  
   #nav li ul {
       position: absolute;
       background: #000;
       width: 17em;
       left: -999em;
   }
  
   #nav li ul a {
       display: block;
       width: 16em !important;
       width: 17em;
   }
  
   #nav li ul ul {
       margin: -1em 0 0 10em;
   }
  
   #nav li:hover ul ul, #nav li.sfhover ul ul {
       left: -999em;
   }
  
   #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
       left: auto;
   }

- HTML:

Kod

        <ul id="nav">
  
               <li><a href="admin.php">Galeria zdjęć</a>
                   <ul>
                       <li><a href="?galeria=1">Referencje</a></li>
                   </ul>
               </li>
  
               <li><a href="admin.php">Podstrony</a>
                   <ul>
                       <li><a href="?go=menulist">Pokaż podstrony</a></li>
                       <li><a href="?go=textadd">Dodaj podstronę</a></li>
                   </ul>
               </li>
  
               <li><a href="admin.php">Kategorie / podkategorie</a>
                   <ul>
                       <li><a href="?go=katlist">Pokaż kategorie</a></li>
                       <li><a href="?go=addkatform">Dodaj kategorię</a></li>
                   </ul>
               </li>
  
           </ul>

- JS (dla starszych przeglądarek typu mIsiE):

Kod

sfHover = function() {
       var sfEls = document.getElementById("nav").getElementsByTagName("LI");
       for (var i=0; i<sfEls.length; i++) {
           sfEls[i].onmouseover=function() {
               this.className+=" sfhover";
           }
           sfEls[i].onmouseout=function() {
               this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
           }
       }
   }
   if (window.attachEvent) window.attachEvent("onload", sfHover);

Ten post edytował Savage.Mephisto 28.04.2009, 22:17:10