Dokumen ini adalah terjemahan dari CSS tips & tricks - CSS: fixed menus dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/Examples/007/menus

Penerjemah: Edwin Rene

Web Style Sheets
CSS tips & tricks

(This page uses CSS style sheets)

Sebuah menu yang terpaku

Menu yang anda lihat di pojok kanan atas dari halaman ini hanyalah sebuah DIV dengan beberapa elemen A didalamnya. Segala sesuatu yang membuatnya terpaku pada tempatnya dilakukan oleh aturan aturan pada style sheet. Berikut markupnya, langsung diambil dari sumber halaman ini:

<div class="banner">
<p>
<a href="http://www.w3.org/"><img alt="W3C" src="http://www.w3.org/Icons/w3c_home"></a>
<a href="http://www.w3.org/Consortium/Activities">Activities</a>
<a href="http://www.w3.org/TR/">Tech.&nbsp;reports</a>
<a href="http://www.w3.org/Help/siteindex">Site index</a>
<a href="http://www.w3.org/Consortium/Translation/">Translations</a>
<a href="http://www.w3.org/Status">Software</a>
<a href="http://search.w3.org/">Search</a>
<em>Nearby:</em>
<a href="http://www.w3.org/Style/">Style</a>
<a href="http://www.w3.org/Style/CSS/">CSS</a>
<a href="http://www.erasparsa.com/w3/Style/Examples/007/">tips&nbsp;&amp;&nbsp;tricks</a>
</div>

Dalam sebuah browser tanpa CSS, atau dengan CSS dimatikan, hal ini hanya akan menjadi sebuah paragraf dengan link. Tetapi karena aturan dibawah, akan tampak seperti "mengambang" di atas halaman, terpaku dipojok kanan atas jendela browser:

div.banner {
margin: 0;
font-size: 80% /*smaller*/;
font-weight: bold;
line-height: 1.1;
text-align: center;
position: fixed;
top: 2em;
left: auto;
width: 8.5em;
right: 2em;
}
div.banner p {
margin: 0;
padding: 0.3em 0.4em;
font-family: Arial, sans-serif;
background: #900;
border: thin outset #900;
color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

Hal yang menarik disini adalah 'position: fixed', yang membuat DIV tetap pada layar, dan  'display: block', yang membuat elemen A didalam DIV tersebut menjadi elemen block, dan oleh sebab itu ditampilkan dibawah yang lainnya, dan bukan dalam sebuah baris.

Berhati-hatilah dengan urutan dari tiga aturan terakhir. Mereka semua akan memiliki kekhususan yang sama, jadi yang terakhir menentukan warna. Bila mouse digerakkan keatasnya, kita ingin :hover yang digunakan, jadi posisinya harus terakhir.

Sisanya, jarak, batasan warna, dsb. dapat dihilangkan atau diganti menurut selera masing masing. Namun, perlu dicatat, bagaimana kita membuat ataran-aturan tersebut diantara link-link: ada garis pembatas dibawah semua link, kecuali yang pertama, yang disebabkan aturan ':first-child'. Sepasang aturan seperti ini (border-top di seluruh elemen ditambah dengan sebuah border 'none' pada turunan pertama) sangat pas digunakan untuk membuat batasan antara elemen-elemen.

(Bila anda melihat pada style sheet sebenarnya yang dihubungkan dengan halaman ini, banner-o.css dan banner.css, anda akan melihat aturan tambahan yang kelihatannya bertentangan satu dengan yang lain. Hal tersebut berada disana untuk melindungi terhadap bugs pada beberapa browser lama. Khususnya pada banner-o.css, spanduknya dihilangkan dan pada banner.css ditampilkan sebagai sebuah block. Ini mempunyai efek untuk menghilangkan spanduk dari Netscape 4, karena  browser tersebut melewati @import dari banner.css.)

FAQ: IE 5 & 6 pada Windows?

Bila anda melihat halaman ini dengan Microsoft Internet Explorer 5 atau 6 di Windows ("WinIE5" dan "WinIE6"), anda akan perhatikan bahwa hal ini tidak bekerja. Paling tidak dengan versi yang ada saat ini per Sept 2002. Banyak orang bertanya pada saya mengenai hal ini,  jadi berikut sedikit penjelasan. Singkatnya bugnya terdapat pada browser tersebut, dan bukan di halaman ini.

WinIE5 dan WinIE6 tidak mengimplementasi nilai 'fixed'. Hal tersebut sangat disayangkan, tetapi masalah terbesar adalah bahwa mereka tidak mengurai properti 'position' dengan benar. Sebuah browser yang tidak tahu 'fixed' harus membuang jauh aturan 'position: fixed' dan berbalik pada nilai dari 'position'posisi sebelumnya pada  style sheet. Kita kemudian dapat menambahkan 'position: absolute' sebelum 'fixed' tersebut dan browser tersebut akan menggunakan hal itu. Tetapi pada WinIE 5 dan 6 hal tersebut tidak terjadi. Kelihatannya kata kunci 'fixed' diartikan sebagai 'static'.

Anda tidak dapat membuat WinIE5 dan 6 mendukung 'fixed', tetapiada cara untuk menyiasati masalah penguraian tersebut. Johannes Koch mengingatkan saya mengenai trik ini (dari collection of work-arounds miliknya). Pertama, gantikan 'position: fixed' pada aturan style rules diatas dengan 'position: absolute' dan kemudian masukkan aturan berikut a dibagian bawah style sheet:

body>div.banner {position: fixed}

(Bila DIV.banner berapa didalam elemen selain BODY, gantikan BODY dengan elemen tersebut.) Dampak dari hal ini adalah bahwa browsers tahu tentang '>'  selektor (turunan) dari CSS akan menggunakan aturan ini, tapi bila browser tidak, terutama WinIE5 dan WinIE6, maka hal tersebut akan dibiarkan. Aturan 'position: absolute' akan digunakan sebagai gantinya dan menu akan berada di tempat yang benar, tetapi tidak akan terpaku pada saat anda menggulung layar.

Merupakan sebuah hal yang penting bahwa tidak ada jarak disekitar '>'.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 17 Jan 2001;
Last updated $Date: 2007/10/27 00:47:16 $ GMT