✔ aufklappende Menüpunkte per CSS ohne Navigation kompl. neu zu erstellen?

jhonnybravo · 26. April 2008

Guten Morgen!

Nachdem ich nun mit dem Layout meiner Seite nahezu fertig bin, kommen Wünsche seitens der Verantwortlichen auf, ob man die Untermenüpunkte im linken Menü, nicht erst beim Überfahren mit der Maus des Obermenüpunktes erscheinen lassen kann.

Ich weiß, dass es geht und es massenhaft Anleitungen zum erstellen solcher Menüs gibt.
Meine Frage ist jedoch, ob ich das mit der vorhandenen Navigation noch realisieren kann, ohne sie komplett neu zu schreiben. Wenn es gehen sollte, vielleicht eine kleine Hilfestellung, wie ich vorgehen soll..

Hier der HTML-Code der Navi:

Code:

<div class="nav3">
      <ul>
        <li class="title">navigation</li>
        <li class="group"><a href="#">Aktuelles</a></li>		
        <li class="group"><a href="#">Wir &uuml;ber uns </a></li>
        <li><a href="#">&bull; Historie</a></li>
        <li><a href="#">&bull; Der Vorstand</a></li>
		<li><a href="#">&bull; Die Satzung</a></li>
		<li><a href="#">&bull; Mitglied werden</a></li>
        <li class="group"><a href="#">Jugend</a></li>
		<li class="group"><a href="#">Fischspezial</a></li>
		<li><a href="#">&bull; Raubfisch</a></li>
		<li><a href="#">&bull; Friedfisch</a></li>
		<li><a href="#">&bull; &bdquo;Fliege&quot;</a></li>
		<li><a href="#">&bull; See</a></li>
		<li><a href="#">&bull; Rezepte</a></li>
		<li class="group"><a href="#">Natur &amp; Freizeit</a></li>
		<li class="group"><a href="#">Internes</a></li>
		<li class="group"><a href="#">Kooperationspartner</a></li>
		<li class="group"><a href="#">Galerie</a></li>
      </ul>

Hier der Teil des CSS zu der Navi:

Code:

.nav3 {overflow: hidden; clear: both; float: left; width: 160px; min-height: 500px; margin: 0px; padding: 0px; color: rgb(75,75,75); font-size: 1.0em;}
.nav3 ul {width: 160px; margin: 0px 0px 20px 0px; padding: 0px; border-bottom: solid 1px rgb(216,206,159); background-color: rgb((249,255,20));}	
.nav3 li {list-style: none; margin: 0px; padding: 0px;}
.nav3 li.title {margin: 0px 0px 0px 0px; padding: 3px 5px 2px 15px; background-color: rgb(46,77,132); color: rgb(255,255,255); text-transform: uppercase; font-weight: bold; font-size: 120%;}
.nav3 li.group a {display: block; min-height: 1.7em; height: auto !important; height: 1.7em; line-height: 1.7em; margin: 0px; padding: 0px 7px 0px 15px; border-top: solid 1px rgb(200,200,200); border-left: solid 7px rgb(46,77,132); color: rgb(75,75,75); font-weight: bold; font-size: 120%;}
.nav3 li a {display: block; min-height: 1.7em; height: auto !important; height: 1.7em; line-height: 1.7em; margin: 0px; padding: 0px 7px 0px 20px; border-left: solid 7px rgb(46,77,132); color: rgb(75,75,75); text-decoration: none; font-size: 120%;}
.nav3 li a:hover, .nav3 li a.selected {border-left: solid 7px rgb(247,210,28);  color: rgb(0,0,0); text-decoration: none;background-color: rgb(214,214,214);}

Vorab vielen Dank für eure Antworten!

Gruß Jhonny

Maik · 26. April 2008

Hi,

du wirst den HTML-Code des Listenmenüs dahingehend erweitern müssen, dass die Unterpunkte in einem weiteren ul-Element eingebettet sind, das dann zunächst mit display:none ausgeblendet wird.

Anhand des Menüpunktes "Wir über uns" würde das Markup dann so lauten:

Code:

<li class="group"><a href="#">Wir &uuml;ber uns </a>
    <ul>
        <li><a href="#">&bull; Historie</a></li>
        <li><a href="#">&bull; Der Vorstand</a></li>
        <li><a href="#">&bull; Die Satzung</a></li>
        <li><a href="#">&bull; Mitglied werden</a></li>
    </ul>
</li>

und das wären im Stylesheet die beiden erforderlichen Regeln, um das Submenü aus- und einzublenden:

Code:

.nav3 li ul { display:none; }
.nav3 li:hover ul { display:block; }

Für die Vorgängerversionen des IE7 musst du zu einem Workaround greifen, sofern sie berücksichtigt werden, da sie die :hover-Pseudoklasse neben dem a-Element für die übrigen HTML-Elemente nicht unterstützen, und somit das Submenü in ihnen nicht geöffnet wird.

jhonnybravo · 26. April 2008

Toll, das klappt ja hervorragend. Leider ist da dann wieder das Problem mit dem IE6. Wie ich schon in anderen Threads gelesen habe, unterstütz dieser wohl nicht die Pseudoclasse li:hover. Dann sind diese Untermenüpunkte für die Besucher mit <= IE6 ja nicht erreichbar.

Kannst du da genau so schnell eine Lösung aus dem Hut zaubern? Weil IE6 haben leider noch sehr viele Leute.

Tausend Dank schonmal für die bisherige Lösung!

Maik · 26. April 2008

Schau dir hierfür mal Stu Nicholls' Lösungsansätze http://www.cssplay.co.uk/menus/slide_definition.html und http://www.cssplay.co.uk/menus/vertical_slide.html an.

Oder du bedienst die älteren IEs mit Javascript -> http://www.htmldog.com/articles/suckerfish/dropdowns/

jhonnybravo · 26. April 2008

Vielen Dank für die Links. Ich habe jetzt eine geschlagene Stunde herumgetüftelt und versucht, es mit JavaSript dem IE verständlich zu machen. Dies hatte zur folge, dass es im FireFox ging. Jedoch hatte ich nun den versteckten Inhalt bei :hover über den folgenden Menüpunkten. Das Menü verschob sich nicht mehr so schön nach unten, wie bei deiner ersten Lösung. Im IE6 hingegen ging es weiterhin nicht. Ich denke aber, dass da der Fehler an mir liegt. Ich habe leider noch nicht ausreichende Kenntnisse in Java und CSS, um mir aus dem gezeigten Code, die richtigen Sachen rauszupicken und zu ändern und diese dann auch an richtiger Stelle einzubauen.

Wäre es zuviel verlangt, mir an dem Beispielmenüpunkt "Wir über uns" zu zeigen wie es geht Inklusive der entsprechenden Änderung des JavaScripts?

Ich weiß, dass diese Forum nicht dafür da ist, fertige Lösungen für die User zu schreiben, sondern nur Hilfestellung zu geben. In diesem Fall bedarf es seitens von mir jedoch einer etwas größeren Stütze. Also wenn jemand (Maik?) Zeit und Lust hat, wäre ich sehr froh, wenn man mir helfen könnte.

Gruß Jhonny

Maik · 26. April 2008

Dann wollen wir mal

Markup:

Code:

<div class="nav3">
     <ul id="nav">
         <li class="title">navigation</li>
         <li class="group"><a href="#">Aktuelles</a></li>
         <li class="group"><a href="#">Wir &uuml;ber uns </a>
             <ul>
                 <li><a href="#">&bull; Historie</a></li>
                 <li><a href="#">&bull; Der Vorstand</a></li>
                 <li><a href="#">&bull; Die Satzung</a></li>
                 <li><a href="#">&bull; Mitglied werden</a></li>
             </ul>
         </li>
         <li class="group"><a href="#">Jugend</a></li>
         <li class="group"><a href="#">Fischspezial</a>
             <ul>
                 <li><a href="#">&bull; Raubfisch</a></li>
                 <li><a href="#">&bull; Friedfisch</a></li>
                 <li><a href="#">&bull; &bdquo;Fliege&quot;</a></li>
                 <li><a href="#">&bull; See</a></li>
                 <li><a href="#">&bull; Rezepte</a></li>
             </ul>
         </li>
         <li class="group"><a href="#">Natur &amp; Freizeit</a></li>
         <li class="group"><a href="#">Internes</a></li>
         <li class="group"><a href="#">Kooperationspartner</a></li>
         <li class="group"><a href="#">Galerie</a></li>
     </ul>
</div>

Stylesheet:

Code:

.nav3 {overflow: hidden; clear: both; float: left; width: 160px; min-height: 500px; margin: 0px; padding: 0px; color: rgb(75,75,75); font-size: 1.0em;}
.nav3 #nav {width: 160px; margin: 0px 0px 20px 0px; padding: 0px; border-bottom: solid 1px rgb(216,206,159); background-color: rgb((249,255,20));}
.nav3 #nav li {list-style: none; margin: 0px; padding: 0px;}
.nav3 #nav li.title {margin: 0px 0px 0px 0px; padding: 3px 5px 2px 15px; background-color: rgb(46,77,132); color: rgb(255,255,255); text-transform: uppercase; font-weight: bold; font-size: 120%;}
.nav3 #nav li.group a {display: block; min-height: 1.7em; height: auto !important; height: 1.7em; line-height: 1.7em; margin: 0px; padding: 0px 7px 0px 15px; border-top: solid 1px rgb(200,200,200); border-left: solid 7px rgb(46,77,132); color: rgb(75,75,75); font-weight: bold; font-size: 120%;}
.nav3 #nav li a {display: block; min-height: 1.7em; height: auto !important; height: 1.7em; line-height: 1.7em; margin: 0px; padding: 0px 7px 0px 20px; border-left: solid 7px rgb(46,77,132); color: rgb(75,75,75); text-decoration: none; font-size: 120%;}
.nav3 #nav li a:hover, .nav3 #nav li a.selected {border-left: solid 7px rgb(247,210,28);  color: rgb(0,0,0); text-decoration: none;background-color: rgb(214,214,214);}
.nav3 #nav li ul { display:none; }
.nav3 #nav li:hover ul, .nav3 #nav li.sfhover ul { display:block; margin:0; padding:0; }

Am Script-Code muss nichts verändert werden:

Code:

<script type="text/javascript"><!--//--><![CDATA[//><!--

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);

//--><!]]></script>

jhonnybravo · 26. April 2008

...da bleibt mir ja glatt die Spucke weg! Hätte nicht gedacht, dass du dir tatsächlich diese Mühe machst! Ich ziehe meinen Hut und verbeuge mich. Die Angaben zu deiner Kontonummer hast du jedoch vergessen

Klappt jetzt alles wunderbar, auch im IE6. Kleine Schönheitskorrektur werd ich noch vornehmen, damit das Erscheinungsbild der Untermenüs wieder wie vorher aussieht. Jetzt sehen sie nämlich wie die Obermenüpunkte aus. Ich werd das Ergebniss gleich mal psoten und den Thread als erledigt kennzeichnen.

TAUSEND DANK für deine Hilfe

..und wenn ich mal was für dich tun kann, schreib mir.

Viele Grüße Jhonny

Maik · 26. April 2008

jhonnybravo hat gesagt.:
...da bleibt mir ja glatt die Spucke weg! Hätte nicht gedacht, dass du dir tatsächlich diese Mühe machst!

Dann schütt mal besser einen ordentlichen Schluck Wasser hinterher

Tja, so kann man sich in seinem Gegenüber täuschen

Zumal mich diese "Mühe" keine zwei Minuten gekostet hat

jhonnybravo · 26. April 2008

Ja ich hatte deine Hilfsbereitschaft ja schon in anderen Fällen in Anspruch genommen und habe daher nicht erwartet, dass du mir den nötigen Code jetzt auch noch auf dem Silbertablett servierst. Das es dich allerdings nicht einmal 2min gekostet hat, gibt mir doch schwer zu denken

Vielleicht sollte ich das mit den Webseiten erstellen doch lieber Leuten wie dir überlassen. Oder mir mal eine css/html/java/php/flash-Biebel unters Kopfkissen legen.

Produkt deiner "Mühen" ist übrigens unter: http://marc.messagemode.com/Laura/Sportfischer/index.html zu sehen.

Nochmals tausend Dank!

Gruß Jhonny

✔ aufklappende Menüpunkte per CSS ohne Navigation kompl. neu zu erstellen?

jhonnybravo

Mitglied

Maik

jhonnybravo

Mitglied

Maik

jhonnybravo

Mitglied

Maik

jhonnybravo

Mitglied

Maik

jhonnybravo

Mitglied

Neue Beiträge