coding (RSS)

CSS - Javascript: Dropdown-Menüs mit Pfeil komplett formartieren

April 10, 2008 in coding css

Nach langer Suche im Netz, um eine Möglichkeit Dropdown-Menüs wirkungsvoll in Szene zu setzen zu können, kam ich immer nur auf die Möglichkeiten zum Beispiel die Hintergrundfarben oder die Schrift anzupassen, wie folgendes Beispiel zeigt:

Beispiel für ein einfaches Dropdownmenü (Quelle links: Webmaster Resource).
Trotz kleinerer Anpassungen bleibt der langweilige graue (bzw. hier blaue) Pfeil und bei längeren Menüs kommen die unformartierbaren Scrollbalken.

Manchmal reicht dies jedoch nicht aus und größere Anpassungen müssen gemacht werden. Und es ist möglich!!

Finales Beispiel für ein komplett formatiertes Dropdownmenü

In meinen Archiven fand ich 2 Beiträge aus dem Jahr 2005 die genau dies behandeln (Select Something New, Part 1 und Select Something New, Part 2). Leider scheint diese Art von Technik nicht weit verbreitet zu sein, so dass ich hierfür Werbung machen und neue (bzw. ältere) Gestaltungswege für Formulare aufzeigen möchte.

Für diejenigen unter Euch die gleich loslegen wollen, hier der Code. Ihr müsst ihn nur noch an Eure Bedürfnisse anpassen.

Select Replacement Test Form

Header

 <style type=“text/css”>
body {
font: 80% “Trebuchet MS”, verdana, helvetica, arial, sans-serif;
}
input {
display: block;
margin: 0 0 10px;
border: 1px solid #666;
color: #999;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
label {
display: block;
font-weight: bold;
color: #666;
}
select {
display: block;
width: 300px;
}
select.replaced {
display: none;
}
ul.selectReplacement {
background: url(top.jpg) top left no-repeat;
margin: 0;
padding: 0;
height: 1.65em;
width: 300px;
}
ul.selectReplacement li {
background: #cf5a5a;
color: #fff;
cursor: pointer;
display: none;
font-size: 11px;
line-height: 1.7em;
list-style: none;
margin: 0;
padding: 1px 12px;
width: 276px;
}
ul.selectOpen li {
display: block;
}
ul.selectReplacement li.selected {
background: url(bottom.gif) bottom left no-repeat;
color: #fff;
display: block;
}
ul.selectOpen li.selected {
background: #9e0000;
display: block;
}
ul.selectOpen li:hover,
ul.selectOpen li.hover,
ul.selectOpen li.selected:hover {
background: #9e0000;
color: #fff;
}
</style>
<script type=“text/javascript”>
// <![CDATA[
function selectReplacement(obj) {
obj.className += ‘ replaced’;
var ul = document.createElement(’ul’);
ul.className = ’selectReplacement’;
var opts = obj.options;
for (var i=0; i<opts.length; i++) {
var selectedOpt;
if (opts[i].selected) {
selectedOpt = i;
break;
} else {
selectedOpt = 0;
}
}
for (var i=0; i<opts.length; i++) {
var li = document.createElement(’li’);
var txt = document.createTextNode(opts[i].text);
li.appendChild(txt);
li.selIndex = opts[i].index;
li.selectID = obj.id;
li.onclick = function() {
selectMe(this);
}
if (i == selectedOpt) {
li.className = ’selected’;
li.onclick = function() {
this.parentNode.className += ‘ selectOpen’;
this.onclick = function() {
selectMe(this);
}
}
}
if (window.attachEvent) {
li.onmouseover = function() {
this.className += ‘ hover’;
}
li.onmouseout = function() {
this.className =
this.className.replace(new RegExp(” hover\\b”), ”);
}
}
ul.appendChild(li);
}
obj.parentNode.insertBefore(ul,obj);
}
function selectMe(obj) {
var lis = obj.parentNode.getElementsByTagName(’li’);
for (var i=0; i<lis.length; i++) {
if (lis[i] != obj) {
lis[i].className=”;
lis[i].onclick = function() {
selectMe(this);
}
} else {
setVal(obj.selectID, obj.selIndex);
obj.className=’selected’;
obj.parentNode.className =
obj.parentNode.className.replace(new RegExp(” selectOpen\\b”), ”);
obj.onclick = function() {
obj.parentNode.className += ‘ selectOpen’;
this.onclick = function() {
selectMe(this);
}
}
}
}
}
function setVal(objID, selIndex) {
var obj = document.getElementById(objID);
obj.selectedIndex = selIndex;
}
function setForm() {
var s = document.getElementsByTagName(’select’);
for (var i=0; i<s.length; i++) {
selectReplacement(s[i]);
}
}
window.onload = function() {
(document.all && !window.print) ? null : setForm();
}
// ]]>
</script>

Body

<form action=“#” method=“post”>
<fieldset>
<legend>Sample Form</legend>
<label for=“something”>Select to Replace</label>
<select id=“something” name=“something”>
<option value=“1″>This is option 1</option>
<option value=“2″>This is option 2</option>
<option value=“3″>This is option 3</option>
<option value=“4″>This is option 4</option>
<option value=“5″ selected=“selected”>This is option 5</option>
<option value=“6″>This is option 6</option>
<option value=“7″>This is option 7</option>
<option value=“8″>This is option 8</option>
</select>
</fieldset>
</form>

Spread the words

Digg Del.icio.us Stumble Float Technorati Bump
Leave a comment!
Note: You can also use your free Gravatar avatar on Knowtebook! Please also read our Publishing Policy before posting.

Ja, ich möchte bei Kommentaren benachrichtigt werden!