home Webdesign HTML - CSS MouseOver Menu mit CSS (ohne Javascript)
MouseOver Menu mit CSS (ohne Javascript)
Freitag, den 11. Juni 2004 um 16:32 Uhr

MouseOver Menu mit CSS

Rollover Effekte sind auch ohne mühselige JavaScript Programmierung möglich.
Anstatt Bilder auszutauschen werden mit dem Attribut display: block; die Links einfach als Blöcke dargestellt.

Forum Links Webdesign

Das Aussehen der Links wird in einem style abgelegt. (Sinnvollerweise sollte man dies in eine externe Datei ablegen.) Die spezielle Klasse heißt in unserem Fall blockmenu. Damit bleiben die "normalen" mit a gelinkten Links unberührt.

Die gewünschte Breite und Höhe über width: 150px; height:15px; angegeben.
Schrift über font-size: 10px; font-family: Tahoma, Arial, Verdana, sans-serif; text-decoration: none; background-color:#FFFFFF; formatiert.

Je nach Wunsch noch einen Rahmen mit border: dotted 1px #000000; einfügen. Damit die Felder nicht aufeinanderkleben wird mit margin:5px; Abstand zugegeben.

Code:


<style type="text/css">
<!--
A.blockmenu {
display: block;
width: 150px;
height:15px;
font-size: 10px;
font-family: Tahoma, Arial, Verdana, sans-serif; text-decoration: none; background-color:#FFFFFF;
border: dotted 1px #000000;
margin:5px;
padding:3px; }
A.blockmenu:hover {
width: 150px;
height:15px;
font-size: 10px; font-family: Tahoma, Arial, Verdana, sans-serif;
text-decoration: none;
background-color:#FFCC33;
border: dotted 1px #000080;
padding:3px; }
-->
</style>


So sieht es dann aus:
Forum Links Webdesign
< Zurück   Weiter >
 

Menu

 

andere sachen

 
dizign.de SEO und Webdesign Forum
Forum zu Webdesign, HTML, CSS, Mediengestaltung, Suchmaschinen-Optimierung und JavaScript

most read

keyword1-keyword2.de
Seit dem letzten Pagerank-Update sind vergangen:
  • 70 Tage
    70 Tage seit dem letzten Update
Copyright © 2010 webdesign freiburg - dizign.de. Alle Rechte vorbehalten.
Joomla! ist freie, unter der GNU/GPL-Lizenz veröffentlichte Software.