von Fries Websolutions
Mit dem Selet-Formularfeld kann man interessante Effekte zaubern. Es liegt immer als oberstes Element auf einer Webseite auch über CSS Containern. Weitere Effekte ergeben sich, wenn man das Auswahlfeld aus dem sichtbaren Bereich des Browsers herausragen lässt.
Dass die modernen DHTML Werbe-Layer von den Auswahllisten verdeckt werden, wird die Werbetreibenden zwar ärgern, aber sie ermöglichen es dem Webdesigner, eine immer sichtbare Navigation zu bauen.
Wird das Feld dann so platziert, dass es vom Browserrand abgeschnitten wird, ist der graue Auswahl-Pfeil nicht mehr zu sehen, und ein Teil des Menüs öffnet sich bei einem Klick außerhalb des Browsers. Das ist auf den ersten Klick aber sehr verwirrend, fällt aber interessierten Surfern auf, da diese Möglichkeit nur sehr selten genutzt wird.
Der Trick ist aber sehr einfach. Man definiert zum Beispiel ein Frameset, setzt das Scrolling auf “NO” und gibt dem rechten Frame eine feste Größe. Diese ist viel kleiner als das Auswahl-Menü selbst, so dass der rechte Bereich vom Browserrahmen abgeschnitten wird.
Codebeispiel:
<frameset cols="*,60">
<frame src="inhalt.html">
<frame src="menue.html" scrolling="no">
</frameset>
In der Datei menue.html ist die Auswahlliste enthalten. Sie bekommt mit CSS eine Breite von 200 Pixeln, so dass die Einträge 140 Pixel überstehen. Diese Werte lassen sich natürlich nach Belieben variieren, bis das Ergebnis gefällt.
<select style="width: 200px; background-color: #BAF0FF">
<option>Links
<option>
<option> Webshop
<option> Webmaster
<option> Photoshop
<option> HTML
</select>
Damit das Menü dann auch farblich zur Seite passt, lässt sich der Hintergrund der Auswahlliste einfärben. Dies geschieht ebenfalls mit CSS und dem background-color Attribut.
Leave a Reply