Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Hauptmenü offen lassen wenn hover über Untermenü“

S

sounddesigner

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?


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&uuml;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&uuml;r M&auml;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&uuml;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">&Uuml;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&auml;ne</a></li>
                  <li><a href="kontakt_fragen_antworten.html" target="_parent">    Fragen &amp; 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...
 

F

fexx

Aktives Mitglied

AW: Hauptmenü offen lassen wenn hover über Untermenü

leg denk :hover status vom a element auf das li element

Ist:
li a:hover { background: xxx; }

soll:
li:hover a { background: xxx; }


und mach das comic sans weg! ;-)
 
S

sounddesigner

Noch nicht viel geschrieben

AW: Hauptmenü offen lassen wenn hover über Untermenü

Hehe - das ist wohl nur etwas für Mac Jünger...aufm Pehzeh siets echt arm aus...

Danke. Ich beginne zu verstehen. Langsam.
Hast du noch was zum Thema "Ich hab druff geklickt und will jetzt das entsprechende Menü offen sehen"
Im günstigsten Fall nur einmal im Frame?
Meine bisherigen Ansätze brauchten mindestens 5 Menüseiten...

Wenn du mir das löst werde ich nie wieder Comic Sans benutzen. Ehrenwort;)
 
S

sounddesigner

Noch nicht viel geschrieben

AW: Hauptmenü offen lassen wenn hover über Untermenü

Ich hab das Menü bisher in einem iFrame um es nicht auf alle Unterseiten kopieren zu müssen, bin aber sehr dankbar für Alternativen. Nur ist es so dass wir noch nicht genau wissen ob und wann weitere Punkte hinzu kommen und wir würden es gerne einigermaßen easy aktualisieren können. Ist aber nicht sooo wichtig. Erstmal muss es gut aussehen und funktionieren.

Wo genau fängt der Bedarf für js an bzw wo genau hört es auf mit css zu funktionieren? Ist es die Anforderung, das Menü bei besuchten Seiten offen zu halten?

Vielen herzlichen Dank fürs Mitdenken, ich bin langsam echt an der Grenze nach drei Wochen völlig ahnungslosem Herumstochern...
 
F

fexx

Aktives Mitglied

AW: Hauptmenü offen lassen wenn hover über Untermenü

also frames würde ich auf keinen fall mehr verwenden! ;-) über eine alternative wurde schon diskutiert (dreamweaver masterpages o.ä. ;-)). Ansonsten besteht noch die möglichkeit ein CMS zuverwenden.

wenn sich das menü beim "drüberfahren" öffnen soll ist das mit css zu machen (und einem kleinen js für den ie6) ...

eine ändere möglichkeite wäre: du gehst auf einen menüüberpunkt (zb "reiseziele") -> *klick* -> seite läd neu und du landest auf einer reiseziel seite und hast dann noch ein untermenü mit den punkten "deutschland, schweiz, ..."
 
S

sounddesigner

Noch nicht viel geschrieben

AW: Hauptmenü offen lassen wenn hover über Untermenü

Was spricht gegen iFrames?
Die Diskussion über Alternativen habe ich verpasst. Wo finde ich die?

CMS scheidet aus, ich hab das Design der Seite ja bereits und die CMS die ich kenne sind mir zu wenig flexibel. Und das Menü hab ich ja letztlich auch, mir ist nur meine js Lösung zu holprig.
für ein klickbares menü musst du javascript verwenden
Zum Vergrößern anklicken....
Missverständnis. Nicht wie bei den Sexy drop downs.
Ich möchte es genau so:
Der Besucher soll das Untermenü zu dem die besuchte Seite gehört und das Hauptmenü sehen können. Wenn er mit der Maus wieder dorthin geht soll das Menü wieder normal funktionieren - geht er wieder weg, soll das entsprechende Untermenü wieder offen sein.

Habe ja wie gesagt schon alles per js hinbekommen (siehe oben zweiter Link) nur dass die Mouseover Bereiche, insbesondere über dem div welches das Menü beinhaltet nicht mehr zu definieren sind und es daher zu unerwünschten Effekten kommt (geht man links raus bleibt das letzte Menü stehen und nicht das aktuelle, geht man nach unten bzw. oben aus dem Untermenü ist alles aus, genau wie wenn man zu schnell nach rechts fährt...
Ich bin mir sicher dass das auch intelligenter geht, nur sieht man es heutzutage kaum noch da neuere Menüs fast immer über den Content gehen, was ich überhaupt nicht schick finde.
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 1.271 (Mitglieder: 4, Gäste: 1.267)
Robots: 237

Statistik des Forums

Themen
175.189
Beiträge
2.582.077
Mitglieder
67.259
Neuestes Mitglied
SaschMasch1312
Oben