• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Navi in Tabelle flyout?

S

schusmile

New member
Hi,
habe folgendes Problem und irgendwie werde ich aus meinen Suchergebnissen nicht schlau:

Hab mich für meine zu erstellende website für folgendes layout entschieden -> das grüne soll die menüleiste werden. Jetzt haben die menüpunkte allerdings auch Unterpunkte und ich weiss nicht wie ich die ohne Platz frei schaufeln zu müssen hinbekommen soll. :confused:

Zu den Rahmenbedingungen:
Will die Seite ohne Frames, aber mit php - includes aufbauen. Die Page soll eine feste Grösse bekommen, also es soll auch komplett auf Scrollen verzichtet werden. Auf JS wollte ich eigentlich auch verzichten, aber irgendwie habe ich jetzt das Prob mit der Menüleiste und das Gefühl, dass das wohl nicht ohne JS funzt.

Wie würdet ihr unter den gegebenen Umständen, die Sache umsetzen? Hab in der Suche von flyout etwas gelesen, aber nichts passendes gefunden. Flash braucht ja Platz, ne?
Bitte helft mir, hab grad keinen vernünftigen Ansatz :rolleyes:

entwurf_9_menue_stufe1.jpg
 
Vorab: Bin auf Arbeit und habe hier, verständlicherweise, nicht alle notwendigen Mittel zur Verfügung.

Das sieht mir genau nachdem aus was ich suche! :D Leider funktioniert es nur nicht - sowohl auf dem Link als auch wenn ich was an dem Code ändere. :confused:

Code: 
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"> 
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>
</body>
</html>

css

ul#navlist { font-family: sans-serif; }

ul#navlist a
{
font-weight: bold;
text-decoration: none;
}

ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#navlist li { float: left; }

ul#navlist li a
{
color: #ffffff;
background-color: #003366;
padding: 3px;
border: 1px #ffffff outset;
}

ul#navlist li a:hover
{
color: #ffff00;
background-color: #003366;
}

ul#navlist li a:active
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}

ul#subnavlist { display: none; }
ul#subnavlist li { float: none; }

ul#subnavlist li a
{
padding: 0px;
margin: 0px;
}

ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 5px;
}

ul#navlist li:hover ul#subnavlist li a
{
display: block;
width: 10em;
border: none;
padding: 2px;
}

ul#navlist li:hover ul#subnavlist li a:before { content: " >> "; }
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben