auklappbares menü mit css/java-script

[crazylady]

Hallo!!

mache derzeit mein abschlussprojekt (eine homepage) für die schule und hänge bei der navigation!

mal generell zur Seite:
die gesamte page ist mit asp geschrieben (also eine dynamische website); css ist einer eigenen datei; navi ist auch eigene datei (mittels server-include eingebaut)

das ding sollte aufklappbare unterpunkte haben, was bei mir nicht so richtig funktioniert!! script hab ich von hier: http://webmatze.de/webdesign/javascript/showhidenav.htm

hier mal meine version:


java-script im head:

Code:

<script language="JavaScript">
    function showhide(sub1) {
        var e = document.getElementById(sub1);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }
  </script>

Navigation (wobei das zwischen den komentaren in einer eigenen datei steht

Code:

<div class="navi"><!--Navigation-->

  <a href="news.asp">News</a>
    <a href="about.asp">Wir über uns</a>
    <a href="chronik.asp">Chronik</a>
    <a href="referenzen.asp">Referenzen</a>
    <a href="#"OnClick="showhide('sub1');">Tätigkeitsbereiche</a>
     <div class="um" id="sub1" style="display:none;">
     <a href="floristik.asp">Florikstik</a>
     <a href="garten.asp">Gartengestaltung</a>
     <a href="innen.asp">Innenraumbegrünung</a>
     <a href="dienst.asp">Dienstleistungen</a>
       </div>
    <a href="galerie.asp">Galerie</a>
    <a href="kontakt.asp">Kontakt</a>
    <a href="anfahrt.asp">Anfahrt</a>
    <a href="impressum.asp">Impressum</a>
    
<!--Navigation ende--></div>

und ausschnitt aus der css-datei:

Code:

div.navi {
    float: left;
    width: 150px;
    height: auto;
    font-weight:bold;
    margin-top: 40px;
    margin-left: 15px;
    margin-bottom: 20px;
    }

div.navi a {
    display: block;
    background-image: url(../images/nav-normal.gif);
    padding-left: 3px;
    padding-bottom: 2px;
    padding-top: 2px;
    border: 1px;
    border-style: solid;
    border-color:#006600;
    margin-bottom: 1px;
    }
        
div.navi a:hover{
    display: block;
    background-image: url(../images/nav-hover.gif);
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 3px;
    border: 1px;
    border-style: solid;
    border-color:#006600;
    margin-bottom: 1px;
    vertical-align: middle;
    }
    
div.um {
    margin-left 10px;
    }

div.um a {
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 3px;
    background-image: none;
    
    }

wäre möglich, dass irgndwo ein "blöder" fehler drinn steckt den ich nicht finde...

hoffe, mir kann jemand helfen! danke schonmal!

lg

[Unkraut]

Hallo Crazylady,
Der Validation Service hat einen Fehler gefunden:
http://validator.w3.org

es fehlt ein Doppelpunkt bei:
div.um {margin-left 10px;}

Ich hoffe, das war es.
Freundlichen Grüße vom Wildkraut

[crazylady]

hi!

danke, aber das hilft mir auch nicht weiter... auklappen müsste eigentlich trotzdem gehen !

EDIT: auklappen und zuklappen funktioniert jetzt! allerdings sollte das gute menü noch offen bleiben, wenn man auf ne andere Seite wechselt!....

lg

[Unkraut]

Hallo Crazylady,
schmeisse die „div“ aus der CSS.

nur einfach .navi {....}
im Html sind die div richtig eingebunden.

Beim background-image fehlt das repat: repeat-x; oder background-repeat:no-repeat;
Da sich “ div.navi a“ und „div.navi a:hover“kaum unterscheiden, kannst Du sie auch zusammenfassen:
.navi a, .navi a:hover {……….}

weiter verkürzen kannst Du:
border:1px solid #006600;

Viele Grüße vom Unkraut

[crazylady]

vielen dank für die hinweise!

aber mittlerweile hat das submenü einen hover-effekt, bei dem das hintergrundbild gewechselt wird! deshalb hab ich die beiden nicht zusammengefasst!

das einzige problem, das ich noch habe ist, wenn ich auf eine der Unterseiten gehe, sich das menü wieder zuklappt!

kennt dafür jemand eine lösung?

lg

[Helmut]

...

das einzige problem, das ich noch habe ist, wenn ich auf eine der Unterseiten gehe, sich das menü wieder zuklappt!
kennt dafür jemand eine lösung?

Hatten wir letztens, guckt Du
http://www.juergens-workshops.de/board/s...php?t=6193

Das speichert den Menüstatus per Cookie.

Cu Helmut