Noch nicht viel geschrieben
Mahlzeit.
Ich experimentiere immer noch mit meinen Menüs herum, nachdem ich mit Spry und fürchterlichen IE6 Abbildungen sowie offenen Fragen zum Status eines Menüs bei offenen Seiten hängen geblieben bin möchte ich es jetzt noch mal ausschließlich mit css versuchen...
Was mich interessiert ist
1. Wie bekomme ich es hin dass die Auswahl im Hauptmenü bestehen bleibt wenn ich ins zugehörige Untermenü fahre.
2. Was habe ich für Optionen wenn nach Klick und Öffnen entsprechender Unterseiten die Menüs offen bleiben sollen?
Was ist denn nun der geradeste Weg zu einem funktionierenden Menü, welches so funktioniert wie ich mir das wünsche?
Hier ein Versuch mit Javascript show/hide Divs - war schon vielversprechend, sieht aber krank aus wenns darum geht dass es bei einer besuchten Seite stehen bleiben soll. Hier habe ich mit zwei Hauptmenüs herum gepfuscht um eins zu verstecken und das andere noch am Funktionieren zu haben. Fühlt sich für mich wie eine Sackgasse an aber wenn hier noch jamand etzwas schlaues weiß bin ich auch nicht abgeneigt...
Ich experimentiere immer noch mit meinen Menüs herum, nachdem ich mit Spry und fürchterlichen IE6 Abbildungen sowie offenen Fragen zum Status eines Menüs bei offenen Seiten hängen geblieben bin möchte ich es jetzt noch mal ausschließlich mit css versuchen...
Was mich interessiert ist
1. Wie bekomme ich es hin dass die Auswahl im Hauptmenü bestehen bleibt wenn ich ins zugehörige Untermenü fahre.
2. Was habe ich für Optionen wenn nach Klick und Öffnen entsprechender Unterseiten die Menüs offen bleiben sollen?
Was ist denn nun der geradeste Weg zu einem funktionierenden Menü, welches so funktioniert wie ich mir das wünsche?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
.sdpro #container {
width: 966px;
top: 90px;
position: relative;
height: 690px;
right: 0px;
z-index: 1;
color: #FFF;
margin-right: auto;
margin-left: auto;
}
li ul {display: none;}
li:hover ul {display: block;}
#apmen {
position:absolute;
width:321px;
height:309px;
z-index:5;
left: 4px;
top: 242px;
font-family: "Comic Sans MS", cursive;
right: 0px;
bottom: 0px;
margin: 0px;
padding: 0px;
}
#menu {
width:305px;
height:308px;
margin: 0px;
padding: 0px;
}
ul.men {
list-style-type: none;
font-size: 18px;
line-height: 45px;
left: 14px;
bottom: 0px;
top: 0px;
right: 0px;
position: absolute;
}
ul.men a {
font-family: "Comic Sans MS", cursive;
color: #FFF;
font-style: italic;
font-weight: normal;
list-style-type: none;
text-decoration: none;
}
ul.men a:hover {
color: #9FF;
}
ul.men a:active {
color: #FF7F55;
}
ul.men ul li {
list-style-type: none;
line-height: 18px;
font-size: 14px;
padding-left: 0px;
}
ul.men ul {
}
ul.men a.erlebnis {
padding-top: 7px;
padding-right: 40px;
padding-bottom: 8px;
width: 120px;
padding-left: 18px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
ul.men a.erlebnis:hover {
background-image: url(images/hg/hg_erl.jpg);
background-repeat: no-repeat;
background-position: left top;
}
ul.men a.angebot {
padding-top: 7px;
padding-right: 40px;
padding-bottom: 8px;
width: 120px;
padding-left: 18px;
margin: 0px;
}
ul.men a.angebot:hover {
background-image: url(images/hg/hg_ang.jpg);
background-repeat: no-repeat;
background-position: left top;
}
ul.men a.coaching {
padding-top: 7px;
padding-right: 40px;
padding-bottom: 8px;
width: 120px;
padding-left: 18px;
margin: 0px;
}
ul.men a.coaching:hover {
background-image: url(images/hg/hg_coa.jpg);
background-repeat: no-repeat;
background-position: left top;
}
ul.men a.ueberuns {
padding-top: 7px;
padding-right: 40px;
padding-bottom: 8px;
width: 120px;
padding-left: 18px;
margin: 0px;
}
ul.men a.ueberuns:hover {
background-image: url(images/hg/hg_uns.jpg);
background-repeat: no-repeat;
background-position: left top;
}
ul.men a.kontakt{
padding-top: 7px;
padding-right: 40px;
padding-bottom: 8px;
width: 100px;
padding-left: 18px;
margin: 0px;
}
ul.men a.kontakt:hover {
background-image: url(images/hg/hg_kon.jpg);
background-repeat: no-repeat;
background-position: left top;
}
ul.men ul.erl {
background-image: url(images/ka/ka_erl.jpg);
background-repeat: no-repeat;
background-position: left top;
left: 118px;
top: 3px;
width: 172px;
font-size: 14px;
height: 106px;
position: absolute;
text-align: left;
right: 0px;
bottom: 0px;
z-index: 10;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
overflow: visible;
}
ul.men ul.ang {
background-repeat: no-repeat;
background-position: left top;
left: 118px;
top: 48px;
width: 172px;
font-size: 14px;
height: 230px;
position: absolute;
text-align: left;
margin: 0px;
right: 0px;
bottom: 0px;
z-index: 10;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
background-image: url(images/ka/ka_ang.jpg);
}
ul.men ul.coa {
background-image: url(images/ka/ka_coa.jpg);
background-repeat: no-repeat;
background-position: left top;
left: 118px;
top: 93px;
width: 172px;
font-size: 14px;
height: 83px;
position: absolute;
text-align: left;
margin: 0px;
right: 0px;
bottom: 0px;
z-index: 10;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
ul.men ul.uns {
background-image: url(images/ka/ka_uns.jpg);
background-repeat: no-repeat;
background-position: left top;
left: 118px;
top: 138px;
width: 172px;
font-size: 14px;
height: 102px;
position: absolute;
text-align: left;
margin: 0px;
right: 0px;
bottom: 0px;
z-index: 10;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
ul.men ul.kon {
background-image: url(images/ka/ka_kon.jpg);
background-repeat: no-repeat;
background-position: left top;
left: 118px;
top: 183px;
width: 172px;
font-size: 14px;
height: 119px;
position: absolute;
text-align: left;
right: 0px;
bottom: 0px;
z-index: 10;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
margin: 0px;
}
</style>
</head>
<body bgcolor="#000000"
onload=
"">
<div id="apmen">
<ul id="menu" class="men">
<li id="er"><a
class="erlebnis"
href="erlebnis_tantramassage.html" target="_parent">Erlebnis</a>
<ul class="erl">
<li><a href="erlebnis_tantramassage.html" target="_parent"> Tantramassage</a></li>
<li><a href="erlebnis_wellnessmassage.html" target="_parent"> Wellnessmassage</a></li>
<li><a href="erlebnis_taomassage.html" target="_parent"> Taomassage</a></li>
<li><a href="erlebnis_lomi_lomi_massage.html" target="_parent"> Lomi Lomi Massage</a></li>
<li><a href="erlebnis_feedbacks.html" target="_parent"> Feedbacks</a></li>
</ul>
</li>
<li id="an"><a
class="angebot"
href="angebot_tantrische_massagen_fuer_frauen.html" target="_parent">Angebot</a>
<ul class="ang">
<li><a href=" angebot_wellnessmassagen_fuer_frauen.html" target="_parent">Für Frauen</a></li>
<li><a href=" angebot_tantrische_massagen_fuer_frauen.html" target="_parent"> Tantrische Massagen</a></li>
<li><a href=" angebot_wellnessmassagen_fuer_frauen.html" target="_parent"> Wellnessmassagen</a></li>
<li><a href=" angebot_rubensmassagen.html" target="_parent" > Rubensmassagen</a></li>
<li><a href=" angebot_lomi_lomi_massagen_fuer_frauen.html" target="_parent" > Lomi Lomi Massagen</a></li>
<li><a href=" angebot_tantrische_massagen_fuer_maenner.html" target="_parent" >Für Männer</a></li>
<li><a href=" angebot_tantrische_massagen_fuer_maenner.html" target="_parent" > Tantrische Massagen</a></li>
<li><a href=" angebot_wellnessmassagen_fuer_maenner.html" target="_parent" > Wellnessmassagen</a></li>
<li><a href=" angebot_lomi_lomi_massagen_fuer_maenner.html" target="_parent" > Lomi Lomi Massagen</a></li>
<li><a href=" angebot_tantrische_massagen_fuer_paare.html" target="_parent" >Für Paare</a></li>
<li><a href=" angebot_tantrische_massagen_fuer_paare.html" target="_parent" > Tantrische Massagen</a></li>
<li><a href=" angebot_wellnessmassagen_fuer_paare.html" target="_parent" > Wellnessmassagen</a></li>
</ul>
</li>
<li id="co"><a
class="coaching"
href="coaching_tantra_experience.html" target="_parent">Coaching</a>
<ul class="coa">
<li><a href="coaching_tantra_experience.html" target="_parent">...and more</a></li>
<li><a href="coaching_tantra_experience.html" target="_parent" > Tantra Experience</a></li>
<li><a href="coaching_rubensmassage.html" target="_parent"> Rubensmassage</a></li>
<li><a href="coaching_einzelsessions.html" target="_parent"> Einzelsessions</a></li>
</ul>
</li>
<li id="uu"><a
class="ueberuns"
href="unser_team.html" target="_parent">Über Uns</a>
<ul class="uns">
<li><a href="unser_team.html" target="_parent"> Team</a></li>
<li><a href="unser_ambiente.html" target="_parent"> Ambiente</a></li>
<li><a href="unsere_historie.html" target="_parent"> Historie</a></li>
<li><a href="unsere_vision.html" target="_parent"> Vision</a></li>
<li><a href="uns_mitarbeit.html" target="_parent"> Mitarbeit</a></li>
</ul>
</li>
<li id="kt"><a
class="kontakt"
href="kontakt_termine.html" target="_parent" >Kontakt</a>
<ul class="kon">
<li><a href="kontakt_termine.html" target="_parent"> Terminvereinbarung</a></li>
<li><a href="kontakt_blume.html" target="_parent"> Die Blume</a></li>
<li><a href="kontakt_*********html" target="_parent"> Anfahrtspläne</a></li>
<li><a href="kontakt_fragen_antworten.html" target="_parent"> Fragen & Antworten</a></li>
<li><a href="kontakt_empfehlungen.html" target="_parent"> Empfehlungen</a></li>
<li><a href="impressum.html" target="_parent" > Impressum</a></li>
</ul>
</li>
</ul>
</div>
<!--Klickmenü-->
</body>
</html>
Hier ein Versuch mit Javascript show/hide Divs - war schon vielversprechend, sieht aber krank aus wenns darum geht dass es bei einer besuchten Seite stehen bleiben soll. Hier habe ich mit zwei Hauptmenüs herum gepfuscht um eins zu verstecken und das andere noch am Funktionieren zu haben. Fühlt sich für mich wie eine Sackgasse an aber wenn hier noch jamand etzwas schlaues weiß bin ich auch nicht abgeneigt...