+- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de)
+-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62)
+--- Forum: CSS und Javascript (https://forum.juergens-workshops.de/forumdisplay.php?fid=86)
+--- Thema: auklappbares menü mit css/java-script (/showthread.php?tid=24713)
auklappbares menü mit css/java-script - crazylady - 13.01.2008
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
auklappbares menü mit css/java-script - Unkraut - 13.01.2008
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
auklappbares menü mit css/java-script - crazylady - 13.01.2008
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
auklappbares menü mit css/java-script - Unkraut - 14.01.2008
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
auklappbares menü mit css/java-script - crazylady - 14.01.2008
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
auklappbares menü mit css/java-script - Helmut - 14.01.2008
...
Zitat:das einzige problem, das ich noch habe ist, wenn ich auf eine der Unterseiten gehe, sich das menü wieder zuklappt!Hatten wir letztens, guckt Du
kennt dafür jemand eine lösung?
http://www.juergens-workshops.de/board/showthread.php?t=6193
Das speichert den Menüstatus per Cookie.
Cu Helmut