Autor |
Nachricht |
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 10.02.2006 15:01
Titel
|
|
|
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Drop Down Menu Example</title>
<style type="text/css">
.menu {display:none;}
#noniemenu {position:absolute;}
.holder {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
.holder:hover {height:auto; cursor:pointer;color:#fff; background:#000;}
a.inner, a.inner:visited {display:block; width:89px; border-bottom:1px solid #000; text-decoration:none; color:#000; background:#eee;}
a.inner:hover {background:#add;}
</style>
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#noniemenu {display:none;}
.menu {display:block; position:absolute;}
a.outer, a.outer:visited {color:#000; width:90px; height:18px; display:block; background:#dca; border:1px solid #000; margin-right:1px; text-align:center; float:left; text-decoration:none; font-family:tahoma, vardana, arial, sans-serif; font-size:10px; line-height:18px; overflow:hidden;}
a.outer:hover {color:#fff; background:#000; overflow:visible;}
a.outer:hover table {display:block; background:#eee; border-collapse:collapse;}
a.inner, a.inner:visited {display:block; width:88px; height:18px; border-bottom:1px solid #000; text-decoration:none; color:#000;font-family:tahoma, vardana, arial, sans-serif; font-size:10px; text-align:center;}
a.inner:hover {background:#add;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div class="menu">
<a class="outer" href="#">Home
</a>
<a class="outer" href="#">Pages
<table><tr><td>
<a class="inner" href="#">Home</a>
<a class="inner" href="#">Products</a>
<a class="inner" href="#">How To</a>
<a class="inner" href="#">#Store</a>
<a class="inner" href="#">#Links</a>
</td></tr></table>
</a>
<a class="outer" href="#">Photo Albums
<table><tr><td>
<a class="inner" href="#">House Album</a>
<a class="inner" href="#">A N Other Album</a>
<a class="inner" href="#">Wedding Album</a>
<a class="inner" href="#">2000 Series</a>
</td></tr></table>
</a>
<a class="outer" href="#">Blogs
<table><tr><td>
<a class="inner" href="#">Mostly</a>
</td></tr></table>
</a>
</div>
<div id="noniemenu">
<div class="holder">
Home<br />
</div>
<div class="holder">
Pages<br />
<a class="inner" href="#">Home</a>
<a class="inner" href="#">Products</a>
<a class="inner" href="#">How To</a>
<a class="inner" href="#">#Store</a>
<a class="inner" href="#">#Links</a>
</div>
<div class="holder">
Photo Albums<br />
<a class="inner" href="#">House Album</a>
<a class="inner" href="#">A N Other Album</a>
<a class="inner" href="#">Wedding Album</a>
<a class="inner" href="#">2000 Series</a>
</div>
<div class="holder">
Blogs<br />
<a class="inner" href="#">Mostly</a>
</div>
</div>
<p> </p>
<p>This is just a test page to show how the menu can be made to overlap the content.</p>
<p>This is achieved by taking the menu out of the page flow and giving it a position:absolute.</p>
<p>If you check the menu above it should overlap this text.</p>
<p>For Firefox I have added an extra containing div that has a position:absolute;</p>
<p>Oh, and you must have the !DOCTYPE specified or Firefox etc will not work.</p>
<p>Please send any questions or comments to me.</p>
<p>REMEMBER : THIS IS JUST FOR FUN ;O)</P>
</body>
</html>
|
Wie im Text vermerkt eigentlich nur eine Spielerei.
|
|
|
|
|
beeviZ
Dabei seit: 30.09.2002
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 10.02.2006 18:36
Titel
|
|
|
Jetzt hätteste nurnoch die Quelle nennen sollen:
www.cssplay.co.uk
aber wenigstens mal wer der von der existenz dieser seite weiß.
|
|
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 10.02.2006 19:03
Titel
|
|
|
Ja, ich wußte nicht mehr woher ich es hatte. Dachte es wäre von ALA, hab aber auch keine Lust gehabt zu suchen.
|
|
|
|
|
Account gelöscht
Ort: -
Alter: -
|
Verfasst Fr 10.02.2006 19:06
Titel
|
|
|
ich such ja immer noch eine(n), der mir hilft, mein menu gebrauchtauglich zu machen
|
|
|
|
|
Backware
Dabei seit: 09.12.2004
Ort: bei Köln
Alter: 38
Geschlecht:
|
Verfasst Fr 10.02.2006 19:19
Titel
|
|
|
fuchsbau hat geschrieben: | mit nem hässlichen trick geht das :hover angeblich auch im IE für grafiken. ich habs letztens kurz ausprobiert und es hat auch gefunzt, hab mich nur noch nicht näher mit beschäftigt. nur mal so. |
hässlichen trick würd ich nich sagen.. aber ich persönlich mach das meist mit nem a-tag welcher dann mittels css gestyled wird und einen hintergrundgrafik erhält...
|
|
|
|
|
copic
Dabei seit: 09.07.2004
Ort: Stuttgart
Alter: 42
Geschlecht:
|
|
|
|
|
Backware
Dabei seit: 09.12.2004
Ort: bei Köln
Alter: 38
Geschlecht:
|
Verfasst Fr 10.02.2006 20:14
Titel
|
|
|
copic hat geschrieben: | http://www.htmldog.com/articles/suckerfish/dropdowns/ |
wie auch von mir schon angekündigt ... wird auch hier gesagt, dass es ohne js nich geht.. da unser freund ie den hover-befehl nicht kennt.. für andere elemente als a-tags
|
|
|
|
|
|
|
|
Ähnliche Themen |
JS-Dropdown Menu
Dropdown-Menu mit Images
Click-Dropdown Menu verschiebt Content
[PHP] -Dropdown-Menu- nach auswahl sofort abschicken
Nach Dropdown auswahl neues Dropdown erscheinen
pdf für präsentation zeigt kein reines schwarz.
|
|