✔ Dynamisches Menü mit CSS

Status
Nicht offen für weitere Antworten.
StupidBoy

StupidBoy

Mitglied Gold
Hallo,
ich habe eine Frage zu den Möglichkeiten die es mit CSS für Menüs gibt.
Und zwar möchte ich gerne, das ein Submenü (ich bin mir noch nicht sicher ob Text oder Grafiken, es wird wohl aber auf Text hinauslaufen) auf meiner Seite angezeigt wird wenn der entsprechende Obermenüpunkt angeklickt wurde.
Ich bin mir ziemlich sicher, dass es dafür eine recht simple Lösung gibt, bloß stecke ich gedanklich gerade in einer ziemlichen Sackgasse. Es ist sicherlich keine Frage, dass ich einfach die komplette Seite neu laden könnte, dann eben nur mit dem entsprechenden Menü, aber diese möglichkeit erscheint mir nicht nur äußerst unelegant sondern gradezu dilettantisch.

Angehängt ist eine kleine Grafik die das ganze noch einmal verdeutlichen Soll, wenn nun z. Bsp. "News" angeklickt wird, möchte ich, dass dort, wo nun die Platzhalter sind, entsprechende Links, beispielsweise zu bestimmten News-Kategorien, angezeigt werden.
 

Anhänge

  • ansicht.jpg
    ansicht.jpg
    105,1 KB · Aufrufe: 184
Zuletzt bearbeitet:
Das sieht gar nicht schlecht aus:)

Jetzt muss ich mich nur noch den Code durchwurscteln und versuchen das alles zu verstehen.

Dankeschön :)
 
So, ich bin nun so weit, dass ich das Menü eingebunden hab, das klappt auch schon ganz gut, außer im IE.
Im IE ist unter dem Menü ein Abstand von 10px enstanden nachdem ich das Menü eingebaut hab.
Außerdem hätte ich gerne, dass sich die Untermenüs am linken Rand des Bodys oder am linken Rand von div.parent ausrichten, derzeit richten sie sich immer an der entsprechenden Grafik des Hauptmenüs aus.
Aber seht selbst: http://www.blogging-online.com/site/

Abgesehen davon bekomme ich die Grafik die eigentlich den unteren Abschluss bilden sollte nicht nach unten gedrückt, stattdessen schließt sie immer die Grafik über ihr an.

Und eine grundsätzliche Frage habe ich auch noch:
Um die Seite abhängig vom Content zu verlängern, reicht es da zwischen div.subm und div.bottom ein div einzufügen das eine Höhe von 100% hat sowie einen entsprechenden Abstatt nach oben und Unten den ich per margin-top und margin-bottom herstellen wollte?

Grüße SB


Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Testseite</title>
        <meta http-equiv="Content-Script-Type" content="text/javascript">
            <script type="text/javascript">
            <!--
            window.onload=montre;
            function montre(id) {
            var d = document.getElementById(id);
            	for (var i = 1; i<=10; i++) {
            		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
            	}
            if (d) {d.style.display='block';}
            }
            //-->
            </script>
        <style type="text/css">

                    body
                        {
                          background-color: #3e3e3e;
                          text-align: left;
                          height: 100%
                          
                        }
            /*menue beginnt*/
                    dt, dl, dd, ul, li
                        {
                          list-style-type: none;
                          margin: 0;
                          padding: 0;
                          
                          
                        }
                    #menu
                        {
                          position : absolute;
                          left: 100px;
                          top: 175px;
                          float: left;
                        }
                    #menu dl
                        {
                          float: left;
                        }
                    #menu li
                        {
                          float: left;
                          
                        }

                    #menu a
                        {
                          text-decoration: none;
                          color: #000;
                        }
                    #smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7
                        {
                          position: absolute;
                          margin-left: 10px;
                          top: 60px;
                          font: 0.8em Arial, sans-serif;
                          font-weight: bold;
                          
                          width: 400px;
                          
                        }
            /*menue endet*/
                    div.parent
                        {
                          visibility: visible;
                          position: absolute;
                          left: 50%;
                          margin-left: -500px; /* negative Hälfte von width:1000px (breite des Layouts) */
                          width: 1000px;
                          height: 100%;
                          text-align: center;
                          background-image: url(main715.jpg);
                          background-repeat: repeat-y;
                        }

                    div.banner
                        {
                          text-align: center;
                          width: 1000px;
                          height: 209px;
                          background-image: url(main7_01.gif);
                          background-repeat: no-repeat;
                        }
                     div.fueller
                        {
                          background-image: url(711.gif);
                          background-repeat: no-repeat;
                          height: 9px;
                          width: 1000px;
                        }
                     div.subm
                        {
                          background-image: url(main713.jpg);
                          background-repeat: no-repeat;
                          height: 87px;
                          width: 1000px;
                        }
                     div.bottom
                        {
                          background-image: url(717.jpg);
                          background-position: bottom;
                          height: 90px;
                          width: 1000px;
                        }

        </style>
    </head>

        <body>

            <div class="parent">
            
                    
                <div class="banner">
                    <div id="menu">
                        <dl>
                            <dt onmouseover="montre('smenu1');"><img alt="" src="main703.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu1">
                    				<ul>
                    					<li><a href="http://www.news.com">&raquo;News.com</a>&nbsp;</li>
                                        <li><a href="http://www.cnn.com">&raquo;Cnn.com</a>&nbsp;</li>
                                        <li><a href="http://www.tutorials.de">&raquo;tuturials.de</a></li>
                    				</ul>

                                </dd>
                        </dl>
                        
                        <dl>
                            <dt onmouseover="montre('smenu2');"><img alt="" src="main704.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu2">
				                    <ul>
                                        <li><a href="http://www.google.de">&raquo;VWar A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;Vwar B</a></li>
				                    </ul>
			                    </dd>
                        </dl>
                        
                        <dl>
                            <dt onmouseover="montre('smenu3');"><img alt="" src="main705.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu3">
				                    <ul>
                                        <li><a href="http://www.google.de">&raquo;Board A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;Board B</a></li>
				                    </ul>
			                    </dd>
                        </dl>
                        <dl>
                            <dt onmouseover="montre('smenu4');"><img alt="" src="main706.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu4">
				                    <ul>
                                        <li><a href="http://www.google.de">&raquo;GB A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;GB B</a></li>
				                    </ul>
			                    </dd>
                        </dl>
                        <dl>
                            <dt onmouseover="montre('smenu5');"><img alt="" src="main707.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu5">
				                    <ul>
                                        <li><a href="http://www.google.de">&raquo;Misc A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;Misc B</a></li>
				                    </ul>
			                    </dd>
                        </dl>
                        <dl>
                            <dt onmouseover="montre('smenu6');"><img alt="" src="main708.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu6">
				                    <ul>
                                        <li><a href="http://www.google.de">&raquo;Server A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;Server B</a></li>
				                    </ul>
			                    </dd>
                        </dl>
                        <dl>
                            <dt onmouseover="montre('smenu7');"><img alt="" src="main709.jpg"><a href="http://www.google.de"></a></dt>
                                <dd id="smenu7">
				                    <ul>
                                        <li><a href="http://www.google.de">&raquo;Join A</a>&nbsp;</li>
                                        <li><a href="http://www.google.de">&raquo;Join B</a></li>
				                    </ul>
			                    </dd>
                        </dl>
                    </div>
                 </div>
                    <div class="fueller">
                    </div>
                    <div class="subm">
                    </div>
                    <div class="bottom">
                    </div>
            </div>

        </body>

</html>
 
  • Lösung für den 10px-Abstand unterhalb des Menüs:
Code: 
div.fueller
{
background-image: url(711.gif);
background-repeat: no-repeat;
height: 9px;
width: 1000px;
font-size: 0;
}
  • Lösung für linksbündige Ausrichtung der Submenüs:
Code: 
#smenu1, #smenu2, #smenu3, #smenu4, #smenu5, #smenu6, #smenu7
{
position: absolute;
left: 0; /* wie im Original-Demo! */
top: 60px;
margin-left: 10px;
font: 0.8em Arial, sans-serif;
font-weight: bold;
width: 400px;
}
  • Für den Footer habe ich (noch) keine Lösung parat, da sich seine Position ja normalerweise aus dem Seiteninhalt ergibt.
 
Du bist mein Gott ;)

Hast recht, wegen dem Footer, da hab ich quer gedacht, wie so oft.
Hat sich also auch erledigt.

Danke für die schnelle Hilfe.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück