Home » , » Learn CSS, Menampilkan Menu & Sub Menu

Learn CSS, Menampilkan Menu & Sub Menu

Written By Nether Blog on Saturday, June 2, 2012 | 6:14:00 PM

Menampilkan Menu dan Sub menu  seperti contoh dibawah ini :

Membuat Menu Dengan CSS







Kode Css :
body { font-family: sans-serif; font-size: small; padding: 25px; } li{ color:#000; cursor:pointer; padding: 3px 5px 0px 5px } li:hover{ background: url("http://ariansyah.jw.lt/arians/gradient-hover.png") repeat-x scroll 0 0 transparent; } .arrow{ /*tanda panah pertanda ada submenu*/ background: url("http://ariansyah.jw.lt/arians/arrow.png") no-repeat scroll 0 -100px transparent; height: 10px; width: 10px; position:relative; float:right; margin:3px 0 0 2px; } .arrow_description{ background-position:0 0; } .menu{ background: url("http://ariansyah.jw.lt/arians/gradient.png") repeat-x scroll 0 0 transparent; border-color: #A5AFB8 #70777D #70777D #A5AFB8; border-right: 1px solid #70777D; border-style: solid; border-width: 1px; height: 23px; } .menu li{ float:left; position:relative; /*float left dan position relative membuat li saling mendatar, tidak menurun*/ list-style:none outside none; /* menghilangkan simbol bulat disamping li*/ margin:0 5px 0 5px; } .has_sub_menu:hover{ height:30px; } .has_sub_menu:hover span#arrow{ /*#bukan class arrow*/ background-position: -10px -100px; } .has_sub_menu:hover ul, ul.sub_menu:hover{ /*untuk menampilkan submenu*/ visibility:inherit; /*ie*/ display:block; } .sub_menu{ width:100px; position:absolute; /*gunakan absolute, jangan relative*/ padding:0; /*supaya submenu tepat dibawah menu*/ background: url("http://ariansyah.jw.lt/arians/gradient-vertical.png") repeat scroll 0 0 transparent; border-right: 1px solid #70777D; border-bottom: 1px solid #70777D; border-style: solid; border-width: 1px; margin:5px 0 0 -5px;/*menyesuaikan posisi submenu terhadap menu*/ border-radius:0 0 5px 5px; display:none; visibility:hidden; } .sub_menu li{ margin:0 5px 0 0; padding:3px 0 3px 10px; width:90px; /*total width sub_menu (100px) dikurangi padding pada li (10px)*/ } .sub_menu li:hover span#arrow_description{ /*#arrow_description menunjukan kita menseleksi id arrow_description, bukan class arrow_description || li yang kita hover*/ background-position:-10px 0; } .description{ width:100px; position:absolute; /*gunakan position absolute, jangan relative*/ text-align:center; margin:-15px 0 0 90px; padding:5px; background-color:#333; border-radius: 8px 8px 8px 8px; box-shadow: 0 0 3px #000000; display:none; visibility:hidden; } .sub_menu li:hover div, li div.description:hover{ visibility:inherit; /*ie*/ display:block; cursor:auto; }

Kode HTML :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Membuat Menu Dengan CSS</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" type="text/css"
href="http://ariansyah.jw.lt/arians/style.css" media="screen">
</head>
<body bgcolor="#000000">
<ul class="menu">
<li>Home</li>
<li class="has_sub_menu">Category
<span id="arrow" class="arrow"></span>
<ul class="sub_menu">
<li>JavaScript</li>
<li>CSS HTML</li>
<li>Blogger</li>
<li>Design</li>
<li>Website</li>
<li>Ariansyah <span id="arrow_description" class="arrow
arrow_description"></span>
<div class="description">Silahkan di edit-edit lagi gan.. :)
<br/></div></li>
</ul></li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
</ul></body>
</html>

Silahkan Di codding lagi :)

0 komentar:

Post a Comment

Silahkan berikan komentar anda yang baik.