Wednesday, 4 December 2013

Membuat Menu Hide Show dengan css

Berikut source code atau codingan menu hide show dengan css ,


<!-- JavaScript|CSS:Core code library snippet 6. -->
<!-- Hide and show a navigation menu. -->

<!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" xml:lang="en" lang="en">
<!-- Code source: http://www.justfigures.co.uk/ -->
<!-- A resource for web developers using XHTML, CSS, JavaScript, PHP -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>View code snippet page</title>
<script language="JavaScript" type="text/javascript">
// function to hide and show a navigation menu
function showHide(aMenu) {
var aMenu = document.getElementById(aMenu);
aMenu.style.display = (aMenu.style.display == "block") ? "none" : "block";
}
</script>
<style type="text/css">

.wrapper {width:150px; margin:10px;}

.menuHeader {color: #000099; cursor:pointer; font-weight:bold; border:1px solid #000;}

.menuList {display:none; margin-bottom:10px;}

.menuItem {margin-left:10px; display:block;}
</style>

</head>

<body>

<div class="wrapper">
<div class="menuHeader"
onclick="showHide('menu1')">Menu header 1
</div>
<div id="menu1" class="menuList">
<a class="menuItem" href="#">Item 1.1</a>
<a class="menuItem" href="#">Item 1.2</a>
<a class="menuItem" href="#">Item 1.3</a>
</div>
<div class="menuHeader"
onclick="showHide('menu2')">Menu header 2
</div>
<div id="menu2" class="menuList">
<a class="menuItem" href="#">Item 2.1</a>
<a class="menuItem" href="#">Item 2.2</a>
<a class="menuItem" href="#">Item 2.3</a>
</div>
</div>

</body>
</html>
Perhatian: Yuk Baca Artikel bagus di Nurul Musthofa

Artikel Terkait

No comments:

Post a Comment

 

Network

Pesan

Semoga situs ini bermanfaat