25.06.2006, 19:49
|
|||
|
|||
Horizontal Menü mit Popdown
Hallo zusammen,
ich möchte ein horizontales Menü gestalten mit z.B. 5 Punkten. Einige dieser Punkte sollen ein Submenü erhalten (sollen nach unten aufklappen), aber leider scheitert es irgendwie... Nach einiger Suche im Web und hier hab ich noch nicht das richtig gefunden. Hoffe der eine oder andere kann mir ein paar Links posten - Das Menü soll dann ein reines CSS Menü werden. Oder ist das nicht zu empfehlen bzw. funkiotniert es ohne js? Geändert von Pseudo (25.06.2006 um 19:53 Uhr) 
|
| Sponsored Links |
|
25.06.2006, 20:07
|
||||
|
||||
|
Super Link: http://www.cssplay.co.uk/menus/index.html
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde - #me { position: absolute; }
|
| Sponsored Links |
|
26.06.2006, 00:21
|
|||
|
|||
|
Danke für den Klasse Link.... Aber nun gehen die Probleme los
 Irgendwie Stimmen die Abstände nicht... Extrem ist es bei Home und Sitemap! Hoffe mir kann da jemand auf die Sprünge helfen! Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
p,h1,h2,h3,div,body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 16px;
color:#333333;
border:0;
padding:0;
margin:0;
}
body {
background-image: url(images/background.jpg);
background-color: #FF9933;
background-repeat: repeat-x;
}
/* ####################### MENÜ ##################### */
.menue {
text-align:left;
position:relative;
font-size:0.9em;
height:2em;
list-style-type:none;
padding: 103px 0 0 15px;
margin: 0px;
}
.menue ul {
padding:0;
margin:0;
list-style-type:none; /* for Firefox */
}
/* first line */
.menue li {
float:left; position:relative;
}
.menue li a, .menue li a:visited {
display:block;
text-decoration:none;
width:9em;
color:#000;
float:left;
padding-right:1em;
height:2em;
line-height:2em;
color:#405362;
}
* html .menue li a, .menue li a:visited {
width:9em; w\idth:9em; /* hack for IE5.5 */
}
/* first line with Drop */
.menue li a.drop, .menue li a.drop:visited {
font-weight:bold;
text-decoration:none;
}
/* ul second line */
.menue li ul {
visibility:hidden;
position:absolute;
top:2.5em;
left:0;
height:0;
overflow:hidden;
}
table {
margin:-1px;
border-collapse:collapse;
font-size:0.9em; /* font size for IE5.5 */
}
/* first line style for IE7 and non-IE browsers and the second line for IE5.5 and IE6 */
.menue li:hover a,
.menue li a:hover {
text-decoration:none;
border:0;
}
.menue li:hover ul,
.menue li a:hover ul {
visibility:visible;
height:auto;
width:17em;
background-color:#f1f1f1;
left:0;
top:2em;
overflow:visible;
}
.menue li:hover ul li a,
.menue li a:hover ul li a {
display:block;
font-weight:bold;
text-decoration:none;
height:auto;
padding: 0.5em 0.5em 0.5em 1.5em;
width:15em;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFFFFF;
}
* html .menue li a:hover ul li a {
width:15em;
w\idth:15em; /* hack for IE5.5 */
}
.menue li:hover ul li a.drop,
.menue li a:hover ul li a.drop {
font-weight:bold;
}
.menue li:hover ul li a:hover,
.menue li a:hover ul li a:hover {
text-decoration:none;
background-color: #dbf06d;
}
</style>
</head>
<body>
<ul class="menue">
<li><a href="#nogo">Home</a></li>
<li><a class="drop" href="#nogo">test test test<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td><ul>
<li><a href="#nogo">Profil</a></li>
<li><a href="#nogo">Irgendwas</a></li>
<li><a href="#nogo">Foobar Foobar</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]--></li>
<li><a class="drop" href="#nogo">Leistungen<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="#nogo">Überblick</a></li>
<li><a href="#nogo">Design</a></li>
<li><a href="#nogo">Programmieren</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]--></li>
<li><a href="#nogo">Sitemap</a></li>
<li><a href="#nogo">Impressum</a></li>
<li><a href="#nogo">Kontakt</a></li>
</ul>
</body>
</html>
|
|
26.06.2006, 00:58
|
||||
|
||||
|
Kannst du es online stellen oder einen Screenshot posten?
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde - #me { position: absolute; }
|
|
26.06.2006, 01:01
|
|||
|
|||
|
|
|
26.06.2006, 01:08
|
||||
|
||||
|
Wirf erstmal die Tabellen aus deiner Listennavigation raus, die brauchst du doch gar nicht.
... oder vielleicht doch. Aber sinnvoll sind sie jedenfalls nicht EDIT: Sorry, habe gerade gesehen dass Dropdown Menüs ohne nicht möglich sind.
__________________
The only thing to do with good advice is pass it on. It is never any use to oneself. - Oscar Wilde - #me { position: absolute; } Geändert von Lloyd Larkin (26.06.2006 um 01:14 Uhr)
|
|
26.06.2006, 01:50
|
|||
|
|||
|
Zitat:
Siehe Beispiele auf www.cssplay.co.uk
__________________
Freiheit.
|
|
26.06.2006, 09:13
|
|||
|
|||
|
Zitat:
Diese Methode *ist* von Stu Nicholls/cssplay und sicher nicht "ohne Sinn und Verstand", sondern das Ergebnis einer langen Entwicklung - nachvollziehbar an den verschiedenen Versionen des Dropdown-Menüs. @Pseudo: die Technik funktioniert doch bei deinem Menü. "Irgendwie stimmen die Anstände nicht" ist keine Fehlerbeschreibung. Was willst du erreichen? Geändert von fricca (26.06.2006 um 09:16 Uhr)
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Horizontal Menü | yuku | CSS | 1 | 21.01.2011 22:59 |
| Horizontales Menü mit 3 Ebenen (alle horizontal) im IE | Lezlie | CSS | 1 | 21.01.2010 14:16 |
| Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 08:55 |
| Popdown Menü mit CSS | Nohma | CSS | 0 | 08.10.2007 20:58 |
| Listen symbol als Menü horizontal ausrichten | dirty south | CSS | 1 | 27.04.2007 12:06 |
Linear-Darstellung
