<!-- 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
No comments:
Post a Comment