mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 10.12.2016 21:57 Benutzername: Passwort: Auto-Login

Thema: reines css dropdown menu vom 10.02.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> reines css dropdown menu
Seite: Zurück  1, 2
Autor Nachricht
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 10.02.2006 15:01
Titel

Antworten mit Zitat Zum Seitenanfang

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>&nbsp;</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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
beeviZ

Dabei seit: 30.09.2002
Ort: Dortmund
Alter: 23
Geschlecht: Männlich
Verfasst Fr 10.02.2006 18:36
Titel

Antworten mit Zitat Zum Seitenanfang

Jetzt hätteste nurnoch die Quelle nennen sollen:
www.cssplay.co.uk

aber wenigstens mal wer der von der existenz dieser seite weiß.

*zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 10.02.2006 19:03
Titel

Antworten mit Zitat Zum Seitenanfang

Ja, ich wußte nicht mehr woher ich es hatte. Dachte es wäre von ALA, hab aber auch keine Lust gehabt zu suchen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Account gelöscht


Ort: -
Alter: -
Verfasst Fr 10.02.2006 19:06
Titel

Antworten mit Zitat Zum Seitenanfang

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: 31
Geschlecht: Männlich
Verfasst Fr 10.02.2006 19:19
Titel

Antworten mit Zitat Zum Seitenanfang

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...
  View user's profile Private Nachricht senden
copic

Dabei seit: 09.07.2004
Ort: Stuttgart
Alter: 34
Geschlecht: Männlich
Verfasst Fr 10.02.2006 19:54
Titel

Antworten mit Zitat Zum Seitenanfang

http://www.htmldog.com/articles/suckerfish/dropdowns/
  View user's profile Private Nachricht senden
Backware

Dabei seit: 09.12.2004
Ort: bei Köln
Alter: 31
Geschlecht: Männlich
Verfasst Fr 10.02.2006 20:14
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ähnliche Themen JS-Dropdown Menu
Dropdown-Menu mit Images
Click-Dropdown Menu verschiebt Content
[PHP] -Dropdown-Menu- nach auswahl sofort abschicken
[CSS/PHP/Javascript] CSS-Menu a:active soll sichtbar sein
[Javascript][CSS] JavaScrip-Rollover-Bild in CSS-Dropdown
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.