bingung mau bilang apa,ya bingung toh baru-baru aja ngeblog,hohoho,jadi mohon saran dan kritik ya tmn2,
nah sekarang saya akan melanjutkan postingan sebelum postingan ini,semoga bermanfaat,
Untuk mendesain menu tersebut kita harus memberi id terlebih dahulu untuk membedakan
dengan daftar ul yang lain, sehingga kode di atas menjadi sbb:
<ul id=”nav”>
<li><a href="/">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="support.html">Suport</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
Setelah diberi id, kita bisa memilih menu tersebut dengan CSS dan mulai mendesainnya. Kode
CSS nya adalah sebagai berikut:
<style>
#nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
background-color: #663300;
}
</style>
Dengan kode diatas maka menu tidak akan menampilkan bullet (dengan kode list-style-type:
none), batas dan padding akan menjadi 0, lebar 180px, dan akan menampilkan warna latar
cokelat. Kurang lebih tampilannya seperti ini:
diklik menjadi lebih besar (tidak hanya teks nya saja, melainkan seluruh kotak).
Kita perlu menambahkan kode CSS lagi untuk mendesainnya. Kode CSS nya adalah sbb:
#nav li {
margin: 0;
padding: 0;
}
#nav a {
display: block; /* untuk memperbesar area klik karena tag a defaultnya inline
*/
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}
Degan kode tersebut, maka tampilan menu akan menjadi sebagai berikut:
Apabila ditampilkan pada Internet Explorer 6 (IE6), menu tersebut tidak akan tampil seperti
yang diharapkan. Melainkan akan menampilkan menu sbb:
Untuk mengatasi tampilan yang tidak diharapkan tersebut maka perlu ditambahkan kode sbb:
#nav {
margin: 0;
padding: 0;
background: #6F6146;
list-style-type: none;
width: 180px;
float: left; /* Contain floated list items */
}
#nav li {
margin: 0;
padding: 0;
float: left; /* This corrects the */
width: 100%; /* IE whitespace bug */
}
Dengan kode tersebut maka menu pun akan tampil seperti yang diharapkan pada IE6.
Untuk menambah efek ketika mouse di atas salah satu menu item, maka kita akan mengubah
warna latar dari menu item tersebut dengan kode:
#nav a:hover {
background: #330000;
}
Catatan:
IE6 merupakan browser yang tidak standar, sehingga seringkali menampilkan tampilan yang tidak
diharapkan. Karena itu, selalu gunakan browser yang standar seperti Mozilla Firefox dan Safari.
Dan selalu periksa hasil desain kita di IE6 agar hasil desain kita sama di semua browser.
Sehingga kode html dan css selengkapnya adalah sbb:
<!-- vertical.css -->
<html>
<head><title></title></head>
<style type="text/css">
#container {
width: 720px;
}
#header {
height: 100px;
background-color: #9FB5BD;
}
#content {
width: 540px;
float: left;
}
#sidebar {
width: 180px;
float: right;
}
#footer {
clear: both;
}
#nav {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #663300;
width: 180px;
float: left;
}
#nav li {
margin: 0;
padding: 0;
float:left;
width:100%;
}
#nav a {
display: block; /* untuk memperbesar area klik karena tag a defaultnya inline
*/
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2;
border-bottom:1px solid #FFF;
}
#nav a:hover {
background: #330000;
}
</style>
</head>
<body>
<ul id='nav'>
<li><a href="#">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="support.html">Suport</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</body>
</html>
2. Mendesain Menu (Horizontal) dengan CSS
Perbedaan menu vertikal dengan horizontal adalah:
· Lebarnya jauh lebih lebar dari menu vertikal
· Teks nya berada di tengah
· Setiap elemen berada di sisi elemen lainnya, bukan di bawah elemen lainnya.
Untuk mendesain menu horizontal, kita hanya tinggal memodifikasi beberapa kode CSS dari
menu Vertikal. Kode yang harus dimodifikasi adalah
· Kita perlu mengubah width dari elemen ul karena tidak diperlukan lagi 100%
· Elemen a tidak memerlukan display:block, karena akan di-float
· Karena kita membuat teks menjadi di tengah, padding kanan dan kiri bisa dihapus
· Border pun diubah dari bottom menjadi right
Kode hasil modifikasi menjadi sbb:
#nav {
margin: 0;
padding: 0;
background: #663300;
list-style-type: none;
float: left; /* Contain floated list items */
}
#nav li {
margin: 0;
padding: 0;
float: left;
}
#nav a {
float: left;
width: 127px;
text-align: center;
color: #FFF;
text-decoration: none;
line-height: 2;
border-right: 1px solid #FFF;
}
Referensi
The Art and Science of CSS, Sitepoint.com
Biografi Penulis:
Triswansyah Yuliano. Menyelesaikan D3 di Politeknik Pos Indonesia. Menekuni bidang
pemrograman web maupun desktop. Selain itu juga menyukai design grafis dan web. Di waktu
luang suka bermain musik terutama audio engineering.
nah sekarang saya akan melanjutkan postingan sebelum postingan ini,semoga bermanfaat,
Untuk mendesain menu tersebut kita harus memberi id terlebih dahulu untuk membedakan
dengan daftar ul yang lain, sehingga kode di atas menjadi sbb:
<ul id=”nav”>
<li><a href="/">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="support.html">Suport</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
Setelah diberi id, kita bisa memilih menu tersebut dengan CSS dan mulai mendesainnya. Kode
CSS nya adalah sebagai berikut:
<style>
#nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
background-color: #663300;
}
</style>
Dengan kode diatas maka menu tidak akan menampilkan bullet (dengan kode list-style-type:
none), batas dan padding akan menjadi 0, lebar 180px, dan akan menampilkan warna latar
cokelat. Kurang lebih tampilannya seperti ini:
Setelah itu kita akan mendesain tiap menu item, yang mana tag dari item-item tersebut adalah
<li></li>. Selain tag li, kita juga akan mendesain tag <a></a> (link) sehingga area yang bisadiklik menjadi lebih besar (tidak hanya teks nya saja, melainkan seluruh kotak).
Kita perlu menambahkan kode CSS lagi untuk mendesainnya. Kode CSS nya adalah sbb:
#nav li {
margin: 0;
padding: 0;
}
#nav a {
display: block; /* untuk memperbesar area klik karena tag a defaultnya inline
*/
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}
Degan kode tersebut, maka tampilan menu akan menjadi sebagai berikut:
Apabila ditampilkan pada Internet Explorer 6 (IE6), menu tersebut tidak akan tampil seperti
yang diharapkan. Melainkan akan menampilkan menu sbb:
Untuk mengatasi tampilan yang tidak diharapkan tersebut maka perlu ditambahkan kode sbb:
#nav {
margin: 0;
padding: 0;
background: #6F6146;
list-style-type: none;
width: 180px;
float: left; /* Contain floated list items */
}
#nav li {
margin: 0;
padding: 0;
float: left; /* This corrects the */
width: 100%; /* IE whitespace bug */
}
Dengan kode tersebut maka menu pun akan tampil seperti yang diharapkan pada IE6.
Untuk menambah efek ketika mouse di atas salah satu menu item, maka kita akan mengubah
warna latar dari menu item tersebut dengan kode:
#nav a:hover {
background: #330000;
}
Catatan:
IE6 merupakan browser yang tidak standar, sehingga seringkali menampilkan tampilan yang tidak
diharapkan. Karena itu, selalu gunakan browser yang standar seperti Mozilla Firefox dan Safari.
Dan selalu periksa hasil desain kita di IE6 agar hasil desain kita sama di semua browser.
Sehingga kode html dan css selengkapnya adalah sbb:
<!-- vertical.css -->
<html>
<head><title></title></head>
<style type="text/css">
#container {
width: 720px;
}
#header {
height: 100px;
background-color: #9FB5BD;
}
#content {
width: 540px;
float: left;
}
#sidebar {
width: 180px;
float: right;
}
#footer {
clear: both;
}
#nav {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #663300;
width: 180px;
float: left;
}
#nav li {
margin: 0;
padding: 0;
float:left;
width:100%;
}
#nav a {
display: block; /* untuk memperbesar area klik karena tag a defaultnya inline
*/
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2;
border-bottom:1px solid #FFF;
}
#nav a:hover {
background: #330000;
}
</style>
</head>
<body>
<ul id='nav'>
<li><a href="#">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="support.html">Suport</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</body>
</html>
2. Mendesain Menu (Horizontal) dengan CSS
Perbedaan menu vertikal dengan horizontal adalah:
· Lebarnya jauh lebih lebar dari menu vertikal
· Teks nya berada di tengah
· Setiap elemen berada di sisi elemen lainnya, bukan di bawah elemen lainnya.
Untuk mendesain menu horizontal, kita hanya tinggal memodifikasi beberapa kode CSS dari
menu Vertikal. Kode yang harus dimodifikasi adalah
· Kita perlu mengubah width dari elemen ul karena tidak diperlukan lagi 100%
· Elemen a tidak memerlukan display:block, karena akan di-float
· Karena kita membuat teks menjadi di tengah, padding kanan dan kiri bisa dihapus
· Border pun diubah dari bottom menjadi right
Kode hasil modifikasi menjadi sbb:
#nav {
margin: 0;
padding: 0;
background: #663300;
list-style-type: none;
float: left; /* Contain floated list items */
}
#nav li {
margin: 0;
padding: 0;
float: left;
}
#nav a {
float: left;
width: 127px;
text-align: center;
color: #FFF;
text-decoration: none;
line-height: 2;
border-right: 1px solid #FFF;
}
Referensi
The Art and Science of CSS, Sitepoint.com
Biografi Penulis:
Triswansyah Yuliano. Menyelesaikan D3 di Politeknik Pos Indonesia. Menekuni bidang
pemrograman web maupun desktop. Selain itu juga menyukai design grafis dan web. Di waktu
luang suka bermain musik terutama audio engineering.
sumber: IlmuKomputer.Com
0 komentar:
Posting Komentar