• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Automatisch aufgehendes Menü

Status
Für weitere Antworten geschlossen.
B

bucada

Neues Mitglied
Hallo,

ich würde gerne auf meiner Homepage ein Menü einbauen, dass ähnlich ist wie auf der Seite von News - Home - kicker online. Ich meine dabei das Menü, das automatisch aufklappt, wenn man mit der Maus über die Symbole "News", "Games", "Community", "Abo & Shop" geht. Aus dem dazugehörigen uelltext werde ich nicht ganz so schlau, denn die nötigen Informationen sind wohl in der CSS Datei, wenn ich mich nicht täusche.
Hier der Quelltext von kicker.de:
Code: 
<div id="anylinkmenu2" class="anylinkcss">
<a href="/games/startseite"><span class="hd-ddgames"></span></a>
<div class="hd-ddbacktop"></div>
<div class="hd-ddbackbottom"><div class="tabborder-l hd-anylink"> 
<div class="hd-ddnavi">
<a href="/games/startseite/">Startseite</a>
<div class="hd-sep"></div><a href="/games/classic/startseite/">Managerspiel Classic</a>
<div class="hd-sep"></div><a href="/games/interactive/startseite/">Managerspiel Interactive</a>
<div class="hd-sep"></div><a href="/games/pro/startseite/">Managerspiel Pro</a>
<div class="hd-sep"></div><a href="/games/tipp/startseite">Tippspiel</a>
<div class="hd-sep"></div><a href="http://quiz.kicker.de/contentpages/startseite.aspx">Quiz</a>
<div class="hd-sep"></div><a href="http://f1manager.kicker.de/startseite">F1-Manager</a>
<div class="hd-sep"></div><a href="http://kicker.virtual-kicker.de/">VKL</a>
</div>
</div></div>
Ich hoffe, jemand weiss wie man so ein Menü machen kann, oder kann mir sagen wo ich mich in dieses Thema einarbeiten kann.
Mein Suche war bisher erfolglos, da ich nicht genau weiss wonach ich suchen muss. :(

Vielen Dank im Voraus.

bucada
 
Probleme mit IExplorer

Ich habe mich durch das Tutorial durchgearbeitet und die Seite erstellt.
Die Freude währte aber nicht lange, da ich später gesehen habe, dass im IExplorer das ganze nicht funktioniert. :( Vielleicht weiss jemand Rat.
Hier die HTML:
Code: 
<html> 
<head> 
  <title>alias architects</title> 

  <link rel="stylesheet" href="style.css" type="text/css"/>    

<body>

<p class="alias"><font color=#CC0000><nobr>alias architects</nobr></font> </p>

  <div id="Rahmen"><ul id="Navigation">
    <li><a href="profile/office.html">PROFILE</a>
      <ul>
        <li><a href="profile/office.html">THE OFFICE</a></li>
        <li><a href="profile/partner.html">PARTNER</a></li>
        <li><a href="profile/philosophy.html">PHILOSOPHY</a></li>
        <li><a href="profile/teamwork.html">TEAMWORK</a></li>
      </ul>
    </li>
    
    <li><a href="projects/architecture.html">PROJECTS</a>
      <ul>
        <li><a href="projects/architecture.html">ARCHITECTURE</a></li>
        <li><a href="projects/urban.html">URBAN STRUCTURE</a></li>
        <li><a href="projects/intersections.html">INTERSECTIONS</a></li>
      </ul>
    </li>

    <li><a href="references/projectlist.html">REFERENCES</a>
      <ul>
        <li><a href="references/projectlist.html">PROJECTLIST</a></li>
        <li><a href="references/clients.html">CLIENTS</a></li>
        <li><a href="references/memberships.html">MEMBERSHIPS</a></li>
        <li><a href="references/networking.html">NETWORKING</a></li>
      </ul>
    </li>
    
    <li><a href="news/news.html">NEWS</a>
      <ul>
        <li><a href="news/news.html">NEWSTICKER</a></li>
        <li><a href="news/links.html">LINKS</a></li>
      </ul>
    </li>

    <li><a href="projects/architecture.html">CONTACT</a>
      <ul>
        <li><a href="contact/adress.html">ADRESS</a></li>
        <li><a href="contact/internet.html">INTERNET</a></li>
        <li><a href="contact/imprint.html">IPRINT</a></li>
      </ul>
    </li>
  </ul><div></div></div>


</body> 
</html>
und die dazugehörige CSS
Code: 
<!-- /* Beginn der Seitenformatierung */ -->

body {
  padding: 0px;
  height:350px;
  width:768px;
  background-image: url(Bilder/leer.jpg);
  background-repeat: no-repeat;
  background-color: #000000;
}

a {
  text-decoration: none;
}

a:link {
  color: #cc0000;
}

a:visited {
  color: #cc0000;
}

a:active {
  color: #cc0000;
}

a:hover {
  color: #FFCC00;
}

p.alias {
     position: absolute;
     top: 310px;
     left: 285px;
     font-size: 30px;
     word-spacing: 7px;
     letter-spacing: 16px;
     font-family: century gothic;
     color: #cc0000;
     text-decoration: none;
}

#inhalt {
  font-family: century gothic;
  position: absolute;
  top: 70px;
  font-size: 13px;
  color: #cc0000;
}

a.profile {
  position: absolute;
  top: 310px;
  left: 165px;
}

a.projects {
  position: absolute;
  top: 310px;
  left: 300px;
}

a.references {
  position: absolute;
  top: 310px;
  left: 450px;
}

a.news {
  position: absolute;
  top: 310px;
  left: 630px;
}

a.contact {
  position: absolute;
  top: 310px;
  left: 755px;
}

<!-- /* Ende der Seitenformatierung */ -->

<!-- /* Aufklappbares Menü */ -->


  div#Rahmen {
    font-family: century gothic;
    position: absolute;
    top: 360px;
    left: 120px;
    font-size: 14px;
    color: #cc0000;

    width: 70em;
    padding: 0.8em;
    border: 0;
    background-color: black;
  }
  html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 70em;
    w\idth: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  :first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  :first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:black; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 8em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; 
    border: 0;
    border-left-color: black; border-top-color: black;
    color: #cc0000; background-color: black;
  }
  html ul#Navigation a, html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: black;
    border-left-color: black; border-top-color: black;
    color: #ffcc00; background-color: black;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: #cc0000; background-color: black;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: black;
  }
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben