Flyout-Menü erstellen, aber wie?

B

Bastlerfreak

Grünschnabel
Hallo zusammen

Da ich nun schon relativ am verzweifeln bin, hoffe ich einfach mal darauf, das Ihr mir vieleicht behilflich sein könnt.
Ich möchte mir ein Menü erstellen, das so funktionieren soll wie dieses:
http://www.stunicholls.com/menu/hover_through.html#nogo211
Vieleicht kann mir mal bitte jemand eine Vorlage erstellen wo die Befehle drinn sind, das so aussieht und funktioniert.
Die Optik und alles weitere zu ändern und auszubauen bekomme ich ja dann hin, aber die ganzen gleichzeitigen Befehle, das der Text in einem farbigen Tab steht,
das sich der nächste Tab automatisch öffnet beim darüberfahren mit der Maus usw., da klappt dann gar nichts mehr....
Mir würde es reichen, bis zu dem Tab Monopols (dies wären dann untereinander 3 Tabs und nebeneinander 3 Tabs, wobei sich aber wie gesagt die danebenliegenden
Tabs erst öffnen sollen, wenn man mit der Maus über den Obertab gleitet....
Wäre echt super, wenn mir hier jemand so eine Hilfestellung geben könnte, damit mein Aspirinverbrauch wieder sinkt....
 
Hi,

solch ein Flyout- oder Dropdown-Menü basiert im HTML-Code immer auf ineinander verschachtelten <ul>-Listen:
HTML: 
<ul id="nav">
    <li><a href="#">Home</a></li><!-- Ende "Home" -->
    <li><a href="#">News<span>&raquo;</span></a>    
        <ul>
            <li><a href="#">News-Item 1.1</a></li><!-- Ende "News-Item 1.1" -->
            <li><a href="#">News-Item 1.2<span>&raquo;</span></a>
                <ul>
                    <li><a href="#">News-Item 1.2.1</a></li><!-- Ende "News-Item 1.2.1" -->
                    <li><a href="#">News-Item 1.2.2</a></li><!-- Ende "News-Item 1.2.2" -->
                </ul>
            </li><!-- Ende "News-Item 1.2" -->
        </ul>
    </li><!-- Ende "News" -->
    <li><a href="#">Lab</a></li><!-- Ende "Lab" -->
    <li><a href="#">Tutorials</a></li><!-- Ende "Tutorials" -->
    <li><a href="#">Resources</a></li><!-- Ende "Resources" -->
    <li><a href="#">Sitemap</a></li><!-- Ende "Sitemap" -->
    <li><a href="#">Contact</a></li><!-- Ende "Contact" -->
</ul>


Jedes der <ul>-Elemente zeichnet somit eine Menüebene aus, und die inneren werden im CSS mittels display:none zunächst versteckt, und beim Überfahren der Hauptmenüpunkte mit display:block angezeigt:
CSS: 
* {
margin:0;
padding:0;
}

ul#nav, ul {
list-style:none;
}

ul#nav li ul, 
ul#nav li ul li ul,
ul#nav li:hover ul li ul  {
display:none;
}

ul#nav li:hover ul,
ul#nav li ul li:hover ul {
display:block;
}

Soweit das Grundprinzip :)

Dieses Stylesheet hier wäre dann so etwas wie die Ausbaustufe, um die Submenüs jeweils rechts neben dem Menüoberpunkt zu positionieren:
CSS: 
* {
margin:0;
padding:0;
}

body {
font:normal 1em verdana, arial, sans-serif;
}

ul#nav {
margin:20px;
}

ul#nav, ul {
list-style:none;
}

ul#nav li {
position:relative;
display:block;
width:150px;
line-height:20px;
background:#f9f9f9;
border-bottom:1px solid #d3d3d3;
}

ul#nav li a {
display:block;
text-decoration:none;
font-weight:bold;
font-size:.7em;
color:#c4c4c4;
padding-left:10px;
}

ul#nav li a span {
float:right;
margin:0 10px 0 0;
font-size:.9em;
color:#bbb;
}

ul#nav li a:hover,
ul#nav li a:hover span{
color:#0000cd;
}

ul#nav li ul,
ul#nav li ul li ul,
ul#nav li:hover ul li ul  {
display:none;
}

ul#nav li:hover ul,
ul#nav li ul li:hover ul {
position:absolute;
top:-1px;
left:150px;
display:block;
}

ul#nav li ul li {
height:20px;
border-top:1px solid #d5d5d5;
border-bottom:none;
}

Zu guter letzt die Codeschnipsel zusammen in einem XHTML-Dokument:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-04-02" />

<title>tutorials.de | Flyout-Menü erstellen, aber wie?</title>

<style type="text/css">
/* <![CDATA[ */
* {
margin:0;
padding:0;
}

body {
font:normal 1em verdana, arial, sans-serif;
}

ul#nav {
margin:20px;
}

ul#nav, ul {
list-style:none;
}

ul#nav li {
position:relative;
display:block;
width:150px;
line-height:20px;
background:#f9f9f9;
border-bottom:1px solid #d3d3d3;
}

ul#nav li a {
display:block;
text-decoration:none;
font-weight:bold;
font-size:.7em;
color:#c4c4c4;
padding-left:10px;
}

ul#nav li a span {
float:right;
margin:0 10px 0 0;
font-size:.9em;
color:#bbb;
}

ul#nav li a:hover,
ul#nav li a:hover span{
color:#0000cd;
}

ul#nav li ul,
ul#nav li ul li ul,
ul#nav li:hover ul li ul  {
display:none;
}

ul#nav li:hover ul,
ul#nav li ul li:hover ul {
position:absolute;
top:-1px;
left:150px;
display:block;
}

ul#nav li ul li {
height:20px;
border-top:1px solid #d5d5d5;
border-bottom:none;
}
/* ]]> */
</style>

</head>
<body>

<ul id="nav">
    <li><a href="#">Home</a></li><!-- Ende "Home" -->
    <li><a href="#">News<span>&raquo;</span></a>
        <ul>
            <li><a href="#">News-Item 1.1</a></li><!-- Ende "News-Item 1.1" -->
            <li><a href="#">News-Item 1.2<span>&raquo;</span></a>
                <ul>
                    <li><a href="#">News-Item 1.2.1</a></li><!-- Ende "News-Item 1.2.1" -->
                    <li><a href="#">News-Item 1.2.2</a></li><!-- Ende "News-Item 1.2.2" -->
                </ul>
            </li><!-- Ende "News-Item 1.2" -->
        </ul>
    </li><!-- Ende "News" -->
    <li><a href="#">Lab</a></li><!-- Ende "Lab" -->
    <li><a href="#">Tutorials</a></li><!-- Ende "Tutorials" -->
    <li><a href="#">Resources</a></li><!-- Ende "Resources" -->
    <li><a href="#">Sitemap</a></li><!-- Ende "Sitemap" -->
    <li><a href="#">Contact</a></li><!-- Ende "Contact" -->
</ul>

</body>
</html>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück