hisman.org » horizontal menu http://hisman.org webdesign source and tutorial Thu, 11 Feb 2010 14:35:35 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Membuat layout yang ada menunya http://hisman.org/membuat-layout-yang-ada-menunya.html http://hisman.org/membuat-layout-yang-ada-menunya.html#comments Sat, 18 Oct 2008 00:40:18 +0000 hisman http://hisman.org/?p=78 Kemaren saya dah posting tentang cara ngebuat layout tanpa tabel, dan juga cara ngebuat menu horizontal. Nah, sekarang kita coba gabungin menu yang dah kita buat dengan layout yang udah kita buat juga.

Coba buka ke dua file HTML menu sama layout yang dah di buat. Klo belum punya bisa di download disini dan disini.

Trus copy paste tag div yang idnya nav di file HTMLnya horizontal menu beserta isinya ke file HTMLnya layout, sehingga hasilnya seperti ini :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout+menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Product</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="sidebar">
</div>
<div id="posting">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

Dalam hal ini menunya kita taruh di header.

Trus copy paste juga CSS yang ada di file CSSnya horizontal menu ke file CSSnya layout sehingga ntar CSSnya layout jadi kayak gini :


body{
   background:#000000;
}
#wrapper {
   width:800px;
   margin:auto;
}
#header{
   background:#000099;
   height:200px;
}
#sidebar{
   background:#00CC66;
   float:left;
   width:250px;
   height:800px;
}
#posting{
   background:#FFFFFF;
   float:right;
   width:550px;
   height:800px;
}
#footer{
   background:#666666;
   height:300px;
   clear:both;
}
#nav ul{
   display:block;
   margin: 0px;
   padding: 0px;
}
#nav li{
   float:left;
   list-style-type:none;
   padding:3px 5px 3px 5px;
   margin:1px;
   border:#CCCCCC 1px solid;
}
#nav li a{
   text-decoration:none;
   color:#999999;
}
#nav li:hover{
   background:#00FFFF;
}

Simpen, dan jadi dech… Klo kamu bingung tentang kode-kode di atas, kamu bisa baca postingan sebelumnya tentang ngebuat layout dan juga horizontal menu.

File layout yang dah digabungin bisa di download di sini…

]]> http://hisman.org/membuat-layout-yang-ada-menunya.html/feed 1 Membuat horizontal menu dengan CSS http://hisman.org/membuat-horizontal-menu-dengan-css.html http://hisman.org/membuat-horizontal-menu-dengan-css.html#comments Wed, 15 Oct 2008 02:58:59 +0000 hisman http://hisman.org/?p=75 Horizontal menu tau khan?? Contohnya klo di blog ini tuh menu yang ada di pojok kanan atas. Jadi kita akan coba buat menu kayak gitu dengan CSS (tapi sederhana dulu ya).

Sebenernya sich cara untuk ngebuat menu kayak gitu gak pake CSS juga bisa, contohnya aja kamu bisa pake flash, trus bisa juga pake HTML aja. Tapi yang lebih banyak di pakai untuk saat ini ya yang pake CSS, karena katanya sich lebih search engine friendly.

Seperti biasa kita buat file HTMLnya dulu. Isinya kayak gini :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Product</a></li>
  </ul>
</div>
</body>
</html>

Kalau diperhatikan, ada tag <ul> sama <li> ya? Tag-tag itu gunanya untuk ngebuat list (klo di Microsoft word itu namanya bullet).

Ngapa kita pake list untuk ngebuat menunya?

Karena agar menu yang kita buat itu lebih search engine friendly. (katanya sich google lebih menyukai situs dengan menu yang seperti itu).

Klo pake list itu khan jelek ya hasilnya (trus ke bawah lagi bukan horizontal). Nah kita pake CSS untuk ngebuat menu itu ke samping (horizontal).

Ini CSSnya :


#nav ul{
    display:block;
    margin: 0px;
    padding: 0px;
}
#nav li{
   float:left;
   list-style-type:none;
   padding:3px 5px 3px 5px;
   margin:1px;
   border:#CCCCCC 1px solid;
}
#nav li a{
   text-decoration:none;
}
#nav li:hover{
   background:#00FFFF;
}

Saya jelasin satu-satu ya?

Yang pertama, coba kamu liat di selector #nav ul, di situ ada property display yang valuenya block. Gunanya tuh untuk ngebuat tag <ul> yang tipenya itu adalah inline element ke block element (seperti div).

Update :

tag <ul> itu ternyata merupakan block element, jadi sebenarnya property display nya tidak perlu digunakan. Sorry, saya salah.. Maklum newbie. hehe…

Trus, di selector #nav li ada property float yang gunanya untuk ngebuat menu yang tadinya vertikal menjadi horizontal. Di situ juga ada property list-style-type yang valuenya none gunanya untuk menghilangkan bullet yang ada. Trus ada border buat ngasih bordernya ada margin dan padding juga.

Untuk yang #nav li a, di situ ada property text-decoration valuenya none. Gunanya untuk menghilangkan garis bawah pada linknya (khan secara default tag <a>membuat tulisannya berwarna biru dan bergaris bawah).

Yang terakhir itu selektornya ditambahin :hover, gunanya buat apa?

Jadi gini, selektor yang terakhir khan begini #nav li:hover, nah ketika #nav li nya di sorot sama mouse backgroundnya berubah menjadi biru. (seperti animasi lah)… coba kamu liat yang udah jadinya di sini. Dan juga klo mo download file jadinya di sini.

Update :

#nav li:hover tidak terbaca di IE6, klo tidak salah. Soalnya hover di IE6 cuman untuk tag <a></a> jadi #nav li:hover nya bisa diganti dengan #nav a:hover

Gimana? Setelah di desain pake CSS agak bagus dikit khan tampilannya, walaupun masih standarlah, kamu bisa ngembangin sendiri, misalnya dengan menambahkan gambar sebagai background pada listnya.

]]> http://hisman.org/membuat-horizontal-menu-dengan-css.html/feed 19