CSS3 Language Selection Menu

Mit CSS3 ist/wird das Leben um ein vielfaches einfacher. Schatten, Abrundungen, Rotationen und vieles mehr lassen sich bequem ohne Bilder realisieren. Auch die Klassen/ID Bezeichnungen können aufgrund der Vielzahl neuer CSS Selektoren auf ein absolutes minimum reduziert werden. Hier ein kleines Beispiel einer Sprachauswahl, das derzeit nur in Firefox, Chrome und Safari funktioniert. IE8 und auch Opera können leider beide noch nichts mit dem box-shadow und border-radius anfangen.

Example

Check out the CSS 3 Language Selection Menu
Works with: Firefox, Chrome, Safari
Does not work with: IE8, Opera10

HTML Code

<ul>
<li><a href="#" title="">Deutsch</a></li>
<li><a href="#" title="">English</a></li>
<li><a href="#" title="">Español</a></li>
<li><a href="#" title="">Français</a></li>
<li><a href="#" title="">??</a></li>
<li><a href="#" title="">???????</a></li>
<li><a href="#" title="">???</a></li>
</ul>

CSS Code

ul {
width:150px;
height:28px;
font:13px Arial, Helvetica, sans-serif;
border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; 
box-shadow:0px 0px 4px #979797; -moz-box-shadow:0px 0px 4px #979797; -webkit-box-shadow:0px 0px 4px #979797; 
margin:0px; 
padding:0px;
overflow:hidden; 
}

ul:hover {height:auto;} 

ul a {
color:#333333; 
text-decoration:none; 
display:block; 
line-height:22px; 
padding:0 0 0 32px; 
background:url(lang.gif) no-repeat;
}

ul a:hover {font-weight:bold;}

ul li {
width:100%; 
display:block; 
border-bottom:1px dotted #bfbfbf;
}

ul li:first-of-type {border-bottom:1px solid #cccccc;}
ul li:last-of-type {border:none;}

ul li:nth-of-type(1) a {background-position:8px 9px; line-height:28px;}
ul li:nth-of-type(2) a {background-position:8px -19px;}
ul li:nth-of-type(3) a {background-position:8px -41px;}
ul li:nth-of-type(4) a {background-position:8px -63px;}
ul li:nth-of-type(5) a {background-position:8px -85px;}
ul li:nth-of-type(6) a {background-position:8px -107px;}
ul li:nth-of-type(7) a {background-position:8px -129px;}

 

3 Kommentare »

Franz schrieb am 11. Januar 2010 um 13:42

Super Sache nur leider wird man das erst im Jahr 2102 verwenden können - IE sei Dank...

Webdawson schrieb am 11. Januar 2010 um 16:15

Ja wird schon noch ein Zeiterl dauern, mit der nächsten IE und Opera Version sollts dann aber schon wieder bissl besser aussehen also...die Hoffnung lebt :)

Hidayat Sagita schrieb am 3. Februar 2010 um 5:09

Great tuts! Maybe adding selected function will be better :)

Kommentar schreiben

(erforderlich)

(required but will not be published)

(if you have one)

Bild einfügen:<img src="http://www.website.com/meinbild.jpg" alt="bildbeschreibung" />


 
Produced and © by Koller Jürgen | Impressum | Love and Joy to everyone