Herzlich Willkommen, lieber Gast!
  Sie befinden sich hier:

  Forum » HTML / XML / XHTML » CSS Menüs

Forum | Hilfe | Team | Links | Impressum | > Suche < | Mitglieder | Registrieren | Einloggen
  Quicklinks: MSDN-Online || STL || clib Reference Grundlagen || Literatur || E-Books || Zubehör || > F.A.Q. < || Downloads   

Autor Thread - Seiten: > 1 <
000
20.07.2011, 15:26 Uhr
Pablo
Supertux
(Operator)


Hallo

Ich habe schon Menüs mit CSS wie in http://meyerweb.com/eric/css/edge/menus/demo.html gemacht.

Ich will aber folgendes Layout haben:


Code:
| BANNER |
| menu1    menu2 menu3 |
  submenu1
  submenu2
| CONTENT |



wobei der Code (vereinfacht) so aussieht:


Code:
<div id="container">
  <div id="header">
   BANNER
  </div>

  <div id="menu">
    <ul>
       <li>Menu1</li>
       <li>Menu2</li>
       ...
    </ul>
  </div>
  <div id="content">
   CONTENT
  </div>
</div>



ich will bei menu2 Untermenüs hinzufügen.


Code:
<ul>
  <li>Menu2
    <ul>
      <li>submenu1</li>
      <li>submenu2</li>
      <li>submenu3</li>
    </ul>
  </li>
</ul>



Ich habe schon geschafft, dass die Untermenüs aus- und eingeblendet werden. Was ich nicht schaffe ist,
dass die Submenüs unterhalb der Menüs angezeigt werden. Das ist mir leider mein CSS Talent ausgegangen

Die toplevel Elemente der Menüs habe mit folgendem CSS:


Code:
#container #menu ul.toplevelUL {
    margin:      0px;
    padding:     0px;
    font-family: Arial, sans-serif;
}

#container #menu ul.toplevelUL li.toplevelLI {
    display:      inline;
    margin-right: 1em;
}



Wenn ich nur das mache, was http://meyerweb.com/eric/css/edge/menus/demo.html tut, dann vergrößert sich mein div#menu,
wenn man die Maus über die Menüs bewegt, was schlecht ist. Ich habe es geschafft, dass das nicht passiert, indem ich
das mache:


Code:
li.toplevelLI ul.secondlevelUL {display: none;}
li.toplevelLI:hover > ul.secondlevelUL {
    list-style-type: none;
    position: absolute;
    display:      inline;
    background-color: #494949;
}



da erscheinen die Untermenüs neben der Topmenüs, aber nicht drunter

ich bin irgendwie mit meinem Latein am Ende, hat jemand einen Tipp für mich? Ich will dass es ähnlich aussieht wie
hier: www.konzerthaus.freiburg.de

Danke
--
A! Elbereth Gilthoniel!
silivren penna míriel
o menel aglar elenath,
Gilthoniel, A! Elbereth!
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
001
21.07.2011, 03:56 Uhr
0xdeadbeef
Gott
(Operator)


Ich fände es einfacher, das Menu nicht in einer div aufzubauen, sondern als

C++:
<ul class="menu">
...
</ul>


...aber was soll's. Ich stelle mir das mit <div id="menu"> etwa so vor:

Code:
#menu ul {
    padding: 0;
    margin: 0;
    border-top: 1px solid silver;
}

/*
* float: left; bewirkt, dass das Hauptmenü horizontal aufgebaut wird
*/
#menu > ul > li {
    float: left;
    border-left: none;
}

#menu > ul > li:first-child {
    border-left: 1px solid silver;
}

/*
* Was immer danach kommt, muss dann links clearen.
*/
#menu + * {
    clear: left;
}

/*
* Bedeutsam hier ist, dass die li-Elemente position: relative haben. Die in
* ihnen enthaltenen ul-Elemente haben position: absolute, und auf diese
* Weise gilt diesen ul-Elementen das li-Element als absoluter
* Referenzrahmen - es ersetzt quasi die Webseite als ganze in Bezug auf
* Längen- und Positionsangaben. Damit findet die absolute Positionierung des
* ul-Elements relativ zum übergeordneten li-Element statt. Ich weiß. Ich hab
* mir die Bezeichnungen nicht ausgedacht.
*/
#menu li {
    position: relative;
    list-style-type: none;
    padding: 5px 7px;
    margin: 0;
    border: 1px solid silver;
    border-top: none;
    background-color: #FFFFE0;
}

#menu > ul > li > ul {
    margin: 5px 0 0 -8px; /* padding und border ausgleichen */
}

#menu li:hover {
    background-color: yellow;
}

#menu li > ul {
    display: none;
}

/*
* Hier absolute Positionierung. Siehe Kommentar oben.
*/
#menu li:hover > ul {
    display: block;
    position: absolute;
}

/*
* Das hier betrifft Unter-Untermenüs. Das übergeordnete Untermenü ist (s.o.)
* für Längen- und Positionsangaben der Referenzrahmen. top: 0 und left: 100%
* bedeutet also "auf gleicher Höhe und rechts daneben".
*/
#menu ul ul ul {
    top: 0;
    left: 100%;
    margin-top: -1px; /* border ausgleichen */
}


Näher komme ich jedenfalls auf die Schnelle nicht an das Verhalten der Webseite ran, auf die du verlinkst.

Etwas unglücklich ist, dass es in CSS keinen Selektor für Elemente gibt, die bestimmte Elemente als Kinder haben; wenn du also Einträge, die Untermenüs aufklappen, optisch anders darstellen willst, wirst du sie irgendwie kennzeichnen müssen.

In der Praxis ist es häufig so, dass Menüs dieser Form als Nodes einheitlich <a href="">-Elemente enthalten, während Untermenüs selbst keine Links sind. In so einem einfachen Fall kann man stumpf

Code:
#menu ul li {
    font-weight: bold;
}

#menu a {
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
}


schreiben. Wenn es bei dir komplizierter ist, hilft eine Untermenü-Klasse wie folgt:

Code:
#menu ul ul li.submenu {
  Styling für Untermenüs hier
}


...und HTML der Form

Code:
<div id="menu">
  <ul>
    <li>Menu1
      <ul>
        <li class="submenu">foo
          <ul>
            bar
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>


Aussehen soll das Ganze am Ende etwa so:

--
Einfachheit ist Voraussetzung für Zuverlässigkeit.
-- Edsger Wybe Dijkstra

Dieser Post wurde am 21.07.2011 um 05:07 Uhr von 0xdeadbeef editiert.
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
002
21.07.2011, 13:59 Uhr
Pablo
Supertux
(Operator)


wow beefy, echt genial, danke. Hab gestern einige andere Methoden mir angeguckt aber deine war bis jetzt die einfachste zu implemntieren.
--
A! Elbereth Gilthoniel!
silivren penna míriel
o menel aglar elenath,
Gilthoniel, A! Elbereth!
 
Profil || Private Message || Suche Download || Zitatantwort || Editieren || Löschen || IP
Seiten: > 1 <     [ HTML / XML / XHTML ]  


ThWBoard 2.73 FloSoft-Edition
© by Paul Baecher & Felix Gonschorek (www.thwboard.de)

Anpassungen des Forums
© by Flo-Soft (www.flo-soft.de)

Sie sind Besucher: