Membuat menu cantik dengan css

Senin, 16 Mei 2011

Membuat menu cantik dengan css

Menu yang bagus dengan komposisi warna yang cantik pula, akan membuat website kita menarik bagi pengunjung..kenapa..?kita kembali ke dasar pembuatan web, biasanya website dengan tampilan yang menarik akan selalu membuat pengunjung mengingat-ingat akan ke cantikan suatu website..disini saya akan mencontohkan membuat menu sederhana tapi terlihat cantik
Contoh tampilannya:

Kita buat file menu.css

#subnavbar1 {
background:#157894 ;
width: 960px;
height: 35px;
color: #FFF;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color:white;
text-decoration:none;
display: block;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 9px 15px 8px;text-shadow: rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 10px, rgb(255, 255, 255) 0px 0px 20px;-moz-outline-style:none;border-right:1px solid #FFFFFF;
}
#nav li a:hover, #nav li a:active {
background: #99bcc5;
color: #b35eea;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #555;
width: 150px;
color: #FFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
background: #777;
color: #FFF;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

Kemudian kita buat file menu.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" / >
<title>Untitled Document</title gt;
</head >
<link href="menu.css" rel="stylesheet" type="text/css" / >

<body >
<div id="subnavbar1" >
<ul id="nav" >
<li><a href="http://johan507-berbagi.blogspot.com/" >Home</a ></li >
<li><a
href="http://johan507-berbagi.blogspot.com/2000/01/blog-post.html" >Tutorial
Wordpress</a ></li >
<li gt;<a href="http://johan507-berbagi.blogspot.com/2011/03/blog-post.html" >Ebook
free</a ></li >
<li><a href="http://johan507-berbagi.blogspot.com/2011/03/blog-post.html" >Tips & Trik</a ></li >
</ul ></div >
</body >
</html>

Itu cuman dasarnya saja pengembangannya tergantung anda sendiri, sebab dengan banyak berlatih kita bisa lebih mahir,jika ada yang ingin di tanyakan tulis aja di komentar, kalo bisa saya jawa..semoga bermanfaat….

Ingin artikel Blog ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan.

Masukan Alamat Email Anda :