| Autor |
Nachricht |
Anti78
Threadersteller
Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 46
Geschlecht: 
|
Verfasst Mo 19.03.2007 22:43
Titel [CSS] Menü nach oben ausklappen |
  |
|
Hi Leuts.
Ich probier schon ewig rum, aber ich schaffs net. Ich möchte folgendes horziontale Menü so umfunktionieren, dass beim Mouseover die Subnavi nach oben ausklappt. Was muss ich da machen?
Hier die Beschreibung.
Und hier das Menü.
Bin für jede Hilfe dankbar.
|
|
| |
  |
 |
rob
Dabei seit: 11.12.2003
Ort: ~/
Alter: 46
Geschlecht:
|
Verfasst Mo 19.03.2007 23:12
Titel
|
|
|
Hab mir das Menü jetzt nicht angesehen...
Aber wenn du wissen willst, wo du irgendwas hinpositionieren willst, also so das dein menü nach oben statt nach unten aufklappt, dann schau mal hier:
CSS - Positionierung und Anzeige von Elementen:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm
Oder du suchst dir einfach irgendwo ein hübsches CSS-Menü und änderst es dir ein wenig ab.
Hier findest du eine ganze Reihe an verschiedenen Menüs samt zugehörigen Tutorials. Sehr gute Site:
http://www.css.maxdesign.com.au/
Oder eventuell ist das hier auch noch was für dich:
http://www.css-menü.de/
|
|
| |
|
|
|
Anzeige
|
|
|
Anti78
Threadersteller
Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 46
Geschlecht:
|
Verfasst Di 20.03.2007 11:14
Titel
|
|
|
Thx für die Links. Hab ich mir auch schon angeschaut.
Aber ich finde die Lösung für mein Problem trotzdem nicht.
|
|
| |
|
|
haselnusstafel
Dabei seit: 27.06.2006
Ort: -
Alter: 57
Geschlecht: 
|
Verfasst Di 20.03.2007 11:24
Titel
|
|
|
das ist eine Frage der Positionierung.
Dr Web sagt ja
Dank dem mit Bedacht gewählten position: relative für alle <li> im Menu positionieren wir die <li> im folgenden stets relativ zum übergeordneten Element. Ein #menu ul ul ul {position: absolute; top: 0; left: 100%; width: 100%; } sorgt dann dafür, dass alle <ul> die zwei Ebenen tief in anderen <ul> verschachtelt sind rechtsbündig neben dem direkt übergeordneten Element erscheinen.
vielleicht solltest Du das einmal ändern. Erstmal die #menu ul ul ul {position: absolute; top: 0; left: 100%; width: 100%; }
vielleicht mal mit position:absolute; top: -60px; oder so probieren wenn es oberhalb sitzen soll
|
|
| |
 |
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 20.03.2007 11:33
Titel
|
|
|
Ein einfaches Beispiel mit nur einem Untermenü, aber die Positionierung sollte
dadurch klar werden denke ich.
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
ul#toplevel {
margin:200px 0 0 200px;
list-style:none;
}
/* die auslösenden Elemente */
ul#toplevel li {
float:left;
width:120px;
margin:0 3px 0 0;
position:relative;
background:#eee;
}
/* Die Submenus, der wichtige Teil */
ul#toplevel li ul {
list-style:none;
position:absolute;
bottom:21px; /* !!! */
display:none;
}
/* Die Submenu Punkte */
ul#toplevel li ul li {
float:none;
background:#ccc;
}
/* hover */
ul#toplevel li:hover ul {
display:block;
}
</style>
</head>
<body>
<ul id="toplevel">
<li>Test</li>
<li>
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
Test
</li>
<li>Test</li>
</ul>
</body>
</html> |
Zuletzt bearbeitet von m am Di 20.03.2007 12:03, insgesamt 1-mal bearbeitet
|
|
| |
|
|
Anti78
Threadersteller
Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 46
Geschlecht:
|
Verfasst Di 20.03.2007 11:55
Titel
|
|
|
Ich schnackels net.
Hier mal der CSS-Code vom Menü. Wo muss ich was ändern damits nach oben aufgeht?
| Code: | /* CSS Document */
#menu {
width: 100%;
background: #eee;
float: left;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 80px;
float: left;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #FF8635;
background: #96D12C;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {position: relative;}
#menu ul ul {
position: absolute;
z-index: 500;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
|
|
|
| |
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 20.03.2007 12:02
Titel
|
|
|
Es wäre doch jetzt um einiges einfacher wenn du dir einfach mein
Beispiel anpasst oder? Du musst "ul li ul" absolut positionieren und
Ihnen einen Wert für bottom zuweisen, schau dir das Beispiel einfach
mal genau an.
|
|
| |
|
|
Anti78
Threadersteller
Dabei seit: 16.09.2003
Ort: Tbb/Mz/M
Alter: 46
Geschlecht:
|
Verfasst Di 20.03.2007 14:09
Titel
|
|
|
Thx, funzt.
Testmenü
wenn ich daheim bin, setze ich es mal in meine Testseite ein und hoffe, dass es da auch funzt.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS Menü ausklappen Vertikal
Problem CSS Menü ausklappen
CSS Dropdown Menü nach oben ausklappen
CSS/Javascript Divs Ein und Ausklappen :: Verständnisfrage
Navigationsmenü soll bei Klick ausklappen
wie erstelle ich diesen menü effekt bzw. das gesammte menü?
|
|
Willkommen auf dem Portal für Mediengestalter
