✔ CSS Menu aufklappen (Beispiel)

Status
Nicht offen für weitere Antworten.
Z

Zank

Hallo Leute,

ein paar Freunde und ich arbeiten momentan an einem Webprojekt. Das Design haben wir in Auftrag gegeben und es sieht wie folgt aus:

http://www.fidb.de/develop

Wenn man links auf "Filmcenter" klickt, öffnet sich ein Submenu. Das ist auch schön so. Aber wir wollten es eigentlich anders haben. Das Submenu soll sich nicht öffnen, wenn man auf "Filmcenter" klickt, sondern wenn man mit der Maus drüberfährt! Leider ist unser Webdesigner nun für 2 Wochen in Urlaub und ich bin daher auf mich alleine gestellt. Wie kann ich es also schaffen, dass das Menu per Mousehover ausfährt?

Hier der Inhalt der CSS-Datei:

PHP: 
@charset "utf-8";

body { margin: 0; padding: 0; height: 100%; font-family: verdana, sans-serif; text-decoration: none; /*background: url(../images/bg.gif) repeat-y;*/ background-color: #fff; }
p { margin: 0 0 1em 0; padding: 0; font-size: 0.7em; line-height: 1.5em; text-align: justify; color: #303030; }
h1 { margin: 0; padding: 0 0 20px 0; font-size: 0.8em; font-weight: bold; color: #303030; }
h2 { margin: 0; padding: 10px 10px 10px 30px; font-size: 11px; font-weight: normal; color: #fff; background-color: #969696; }
h3 { margin: 0; padding: 10px 10px 5px 10px; font-size: 10px; font-weight: bold; color: #303030; }
a { text-decoration: none; color: #fff; }
a:hover { text-decoration: underline; }
.mainnav a:hover, .mainnavhead a:hover, .trenner_head a:hover, .trenner a:hover { text-decoration: none; }

#logo { position: absolute; top: 30px; left: 0; margin: 0; padding: 0; width: 1009px; height: 120px; overflow: hidden; background: url(../images/logo_ie.gif) no-repeat; border: none; z-index: 1; }
  *html #logo { width: 1004px; background: url(../images/logo_ie.gif) no-repeat; }

#conavbox { position: absolute; top: 170px; left: 775px; margin: 0; padding: 0; height: 20px; z-index: 5; }
  ul.conav { margin: 0; padding: 0; }
  ul.conav li { list-style: none; margin-bottom: 15px; padding: 0; } *html ul.conav li { margin-bottom: -3px; }
  ul.conav a { display: block; margin: 0; padding: 0; }
  ul.conav a:hover, ul.conav li.active3 a { text-decoration: none; }

#imagebox { position: absolute; top: 150px; left: 0; margin: padding: 0; width: 812px; height: 200px; z-index: 3; } *html #imagebox { width: 807px; }
  #imglft { float: left; margin: 0; padding: 0; width: 23px; height: 200px; background: url(../images/imglft.gif) no-repeat; }
  #imgctr { float: left; margin: 0; padding: 20px 0 0 0; width: 732px; height: 200px; overflow: hidden; background: url(../images/imgctr.gif) repeat-x; } *html #imgctr { width: 727px; }
  #imgrgt { float: left; margin: 0; padding: 0; width: 56px; height: 200px; background: url(../images/imgrgt.gif) no-repeat; }

#formularbox { position: absolute; top: 305px; left: 20px; margin: 0; padding: 0; width: 830px; overflow: hidden; z-index: 4; }
  .loginformular { float: left; margin: 0; padding: 0; width: 370px; height: 20px; border: none; }
  .searchformular { float: left; margin: 0; padding: 0; width: 460px; height: 20px; border: none; }
  	.fieldset { float: left; padding: 0; width: 100%; border: none; }
      .forminput { float: left; margin: 0; padding: 0; width: 70px; font-size: 11px; background-color: #fff; border-top: 2px solid #909090; border-right: 2px solid #909090; border-bottom: 2px solid #eee; border-left: 2px solid #eee; }
     	.searchinput { float: left; margin: 0; padding: 0; width: 205px; font-size: 11px; background-color: #fff; border-top: 2px solid #909090; border-right: 2px solid #909090; border-bottom: 2px solid #eee; border-left: 2px solid #eee; }
        label { float: left; padding: 3px 5px 5px 7px; font-size: 10px; color: #505050; color: #eee; }
      	input { float: left; height: 16px; background-color: transparent; } *html input { height: 18px; }
        .button { float: left; margin: 0 5px; padding: 0; font-size: 16px; color: #eee; border: none; cursor: pointer; }
        .formimg { float: left; margin: 0; padding: 3px 5px 0 0; }

#leftbox { position: absolute; top: 350px; left: 0; margin: 0; padding: 0; width: 209px; background: url(../images/leftbg.gif) repeat-y; z-index: 4; }
    .maintrenner { position: relative; top: -22px; margin: 0 0 -42px 0; padding: 0; width: 100%; height: 42px; background: url(../images/maintrenner.gif) no-repeat; z-index: 4; }

    ul.mainnav { position: relative; top: 0; margin: 0; padding: 0; width: 209px; height: 40px; background: url(../images/trenner_blank.gif) no-repeat; z-index: 5; }
    ul.mainnav li { list-style: none; margin: 0; padding: 0; overflow: hidden; }
    ul.mainnav a { display: block; padding: 12px 0 0 30px; width: 179px; height: 28px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; } *html ul.mainnav a { width: 209px; height: 40px; }
    ul.mainnav a:hover { text-decoration: none; color: #303030; background: url(../images/hover.gif) no-repeat; }
    ul.mainnav li.active a { text-decoration: none; color: #303030; background: url(../images/active.gif) no-repeat; }

    ul.mainnavbot { position: relative; margin: 0; padding: 0; width: 209px; height: 40px; background: url(../images/trennerbot.gif) no-repeat; z-index: 5; }
    ul.mainnavbot li { list-style: none; margin: 0; padding-top: 5px; overflow: hidden; }
    ul.mainnavbot a { display: block; padding: 12px 0 0 30px; width: 179px; height: 28px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; } *html ul.mainnavbot a { width: 209px; height: 40px; }
    ul.mainnavbot a:hover { text-decoration: none; color: #303030; background: url(../images/hover.gif) no-repeat; }

      ul.subnav { position: relative; top: 0; left: 20px; margin: 0; padding: 0; width: 169px; background-color: #fff; }
      ul.subnav li { list-style: none; margin: 0; padding: 0; background-color: #fff; } 
      ul.subnav a { display: block; margin: 0; padding: 5px 10px; width: 149px; font-size: 11px; font-weight: normal; text-transform: none; color: #303030; } *html ul.subnav a { width: 169px; }
      ul.subnav a:hover {  text-decoration: none; background-color: #969696; color: #eee; }
      ul.subnav li.active1 a {  text-decoration: none; background-color: #969696; color: #eee; }
          
    #leftfootblank { margin: 0; padding: 0; width: 209px; height: 300px; background: url(../images/leftfoot.gif) no-repeat; z-index: 2; }
    #leftfoot { margin: 0; padding: 0; width: 209px; height: 70px; background: url(../images/leftfoot.gif) no-repeat; z-index: 2; } 
    #credits { margin: -40px 0 0 0; padding: 0 0 0 30px; width: 209px; height: 12px; font-size: 10px; color: #eee; z-index: 3; }

#contentbox { position: absolute; top: 360px; left: 230px; margin: 0; padding: 0; width: 545px; z-index: 3; /*border: 1px solid #969696;*/ }
  #textbox { margin: 0; padding: 0 40px; background-color: #fff; } 
    .bodytext { margin: 0; padding: 20px 0 20px 0; }
  ul.letternav { margin: 20px 0 0 0; padding: 0; }
  ul.letternav li { list-style: url(../images/list.gif); margin: 0 0 20px 0; padding: 0; }
  ul.letternav a { display: block;  margin: 0; padding: 0; font-size: 11px; color: #303030; }
  ul.letternav li a:hover { color: #969696; text-decoration: none; }
  ul.letternav li.active3 { color: #969696; text-decoration: none; list-style: url(../images/listactive.gif); }
    ul.letternav ul { margin: 20px 0 0 10px; padding: 0; }
    ul.letternav ul li { list-style: url(../images/listsub.gif); margin: 0 0 10px 0; padding: 0; }
    ul.letternav ul a { display: block;  margin: 0; padding: 0; font-size: 11px; color: #303030; }
    ul.letternav ul li a:hover { color: #969696; text-decoration: none; }
    ul.letternav ul li.active3 { color: #969696; text-decoration: none; list-style: url(../images/listsubactive.gif); }

  .tnavibox1 { margin: 0; padding: 30px 0 20px 35px; height: 16px; z-index: 3; background-color: #fff; }
  .tnavibox2 { margin: 0; padding: 0 0 0 35px; height: 16px; z-index: 3; background-color: #fff; }
    ul.tnav { margin: 0; padding: 0; }
    ul.tnav li { list-style: none; float: left; margin: 0; padding: 0; height: 20px; }
    ul.tnav a { display: block; margin: 0; padding: 0 2px; font-size: 10px; color: #aaa; }
    ul.tnav a:hover { color: #303030; text-decoration: none; }
  #tfootbox { margin: 0; padding: 0; height: 40px; z-index: 3; }

#rightbox { position: absolute; top: 150px; left: 800px; margin: 0; padding: 0; z-index: 2; background: url(../images/rightbg.gif) repeat-y; } *html #rightbox { left: 795px; }
    #bannerhead { margin: 0; padding: 0; width: 209px; height: 20px; overflow: hidden; background: url(../images/bannerhead.gif) no-repeat; }
    #bannerbox { margin: 0 0 0 20px; padding: 0; width: 169px; height: 150px; overflow: hidden; }
    #bannerfoot { margin: 0; padding: 0; width: 209px; height: 30px; overflow: hidden; background: url(../images/bannerfoot.gif) no-repeat; }

    ul.infonavhead { position: relative; top: 0; margin: 0; padding: 0; width: 209px; height: 40px; background: url(../images/infohead.gif) no-repeat; z-index: 5; }
    ul.infonavhead li { list-style: none; margin: 0; padding: 0; overflow: hidden; }
    ul.infonavhead a { display: block; padding: 12px 0 0 30px; width: 179px; height: 28px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; } *html ul.infonavhead a { width: 209px; height: 40px; }
    ul.infonavhead a:hover { text-decoration: none; color: #303030; background: url(../images/infoheadhover.gif) no-repeat; }
    span { display: block; padding: 12px 0 0 30px; width: 209px; height: 28px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; }

    ul.infonav { position: relative; margin: 0; padding: 0; width: 209px; height: 40px; background: url(../images/trenner.gif) no-repeat; z-index: 5; }
    ul.infonav li { list-style: none; margin: 0; padding: 0; overflow: hidden; }
    ul.infonav a { display: block; padding: 15px 0 0 30px; width: 179px; height: 25px; font-size: 11px; font-weight: bold; text-transform: uppercase; color: #fff; } *html ul.infonav a { width: 209px; height: 40px; }
    ul.infonav a:hover { text-decoration: none; color: #303030; background: url(../images/infohover.gif) repeat-y; }

      ul.bannernav { position: relative; top: 0; left: 20px; margin: 0; padding: 0; width: 169px; background-color: #707070; }
      ul.bannernav li { list-style: none; margin: 0; padding: 0; } 
      ul.bannernav a { display: block; margin: 0; padding: 0; width: 149px; font-size: 11px; font-weight: normal; text-transform: none; color: #303030; } *html ul.bannernav a { width: 169px; }

    #rightfootblank { margin: 0; padding: 0; width: 209px; height: 70px; background: url(../images/rightfoot_blank.gif) no-repeat; z-index: 2; }
    #rightfoot { margin: 0; padding: 0; width: 209px; height: 70px; background: url(../images/rightfoot.gif) no-repeat; z-index: 2; } 
    #pageback { margin: -40px 0 0 0; padding: 0 0 0 40px; width: 169px; height: 12px; z-index: 3; }

  table.letters { margin: 0 0 0 20px; width: 170px; border-collapse: collapse; border-spacing: 0; background-color: #fff; }
    td { margin: 0; padding: 0; }
    td a { display: block; margin: 0; padding: 5px 0; width: 34px; font-size: 11px; text-align: center; text-transform: uppercase; color: #303030; }
    td a:hover { text-decoration: none; color: #eee; background-color: #969696; }
    td.active4 a { text-decoration: none; color: #eee; background-color: #969696; }
    
  table.ware { margin: 0 0 0 20px; width: 170px; border-collapse: collapse; border-spacing: 0; background-color: #fff; }
    td.art { margin: 0; padding: 10px 0 10px 10px; width: 75px; font-size: 11px; text-align: left; text-transform: uppercase; color: #303030; }
    td.artall { margin: 0; padding: 10px 0 10px 10px; width: 75px; font-size: 11px; text-align: left; text-transform: uppercase; color: #303030; border-top: 1px solid #303030; }
    td.summe { margin: 0; padding: 10px 10px 10px 0; width: 75px; font-size: 11px; text-align: right; text-transform: uppercase; color: #303030; }
    td.summeall { margin: 0; padding: 10px 10px 10px 0; width: 75px; font-size: 11px; text-align: right; text-transform: uppercase; color: #303030; border-top: 1px solid #303030; }

Den Quelltext der index.html könnt ihr Euch bei Wunsch ja selber im browser ansehen, der Link zur Seite steht ja oben!
Bin echt für jede Hilfe dankbar!

Grüße,
Zank
 
Zuletzt bearbeitet von einem Moderator:
Wenn man auf den Navigationspunkt "Filmcenter" klickt, wird das Dokument filmcenter.html geöffnet, in dem das Submenü enthalten ist, und bei einem erneuten Klick auf "Filmcenter" wird nicht das Menü "dynamisch" geschlossen, sondern lediglich wieder die Startseite index.html aufgerufen, in der das Submenü überhaupt nicht enthalten ist.

Gleiches gilt für die anderen Navigationspunkte "Usercenter", "Info & Kontakt" und "Onlineshop".

Von daher müsstet ihr den Quelltext der Projektseiten erst einmal überarbeiten, damit die Submenüs tatsächlich in jedem einzelnen Dokument enthalten sind, denn erst dann lassen sie sich auch beim Überfahren der Navigationspunkte einblenden.

Ein Lösungsbeispiel für euer Vorhaben findet sich bei Stu Nicholls -> http://www.cssplay.co.uk/menus/vertical_slide.html
 
Hey...danke für Deine Antwort! Das Menu muss meinetwegen agr nciht vertikel ausfahren, es würde auch reichen, wenn es horizontal ausfährt! Der HTML-Code müsste doch dann so aussehen, oder (also in der index.html)?

PHP: 
<ul class="infonavhead"><li><a href="review.html">Review aktuell</a></li></ul>
      <ul class="subnav">
        <li><a href="#">Einer flog über das Kuckucksnest</a></li>
        <li><a href="#">Frenzy</a></li>
        <li><a href="#">Die verlorene Ehre der Katharina Blum</a></li>
        <li><a href="#">Shaft (orig.)</a></li>
        <li><a href="#">Magnolia</a></li>
      </ul>
</ul>

Und wie stelle ich das nun in der CSS-Datei ein, dass das Dingen vertikal oder orizontal ausfährt?
 
Schau dir hierfür einfach mal Stu Nicholls' Multi-Level-Menus an.


Eine verschachtelte Listennavigation mit Submenüs sieht übrigens so aus:

Code: 
<ul class="infonavhead">
   <li><a href="review.html">Review aktuell</a>
      <ul class="subnav">
        <li><a href="#">Einer flog über das Kuckucksnest</a></li>
        <li><a href="#">Frenzy</a></li>
        <li><a href="#">Die verlorene Ehre der Katharina Blum</a></li>
        <li><a href="#">Shaft (orig.)</a></li>
        <li><a href="#">Magnolia</a></li>
      </ul>
   </li>
</ul>
 
Die Seite ist echt sehr gut! Aber da kann ich lediglich die Menus sehen! Aber wie komme ich an den Quelltext?
 
Ganz einfach:
  • Firefox: rechte Maustaste klicken und im Kontextmenü "Seitenquelltext anzeigen" wählen.
  • IE: rechte Maustaste klicken und im Kontextmenü "Quelltext anzeigen" wählen.
Oder die beiden o.g. Links direkt mit der rechten Maustaste anklicken und im Kontextmenü "Ziel speichern unter..." wählen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück