Click to See Complete Forum and Search --> : Opening AND Closing Menu by Clicking (help!)
MrRunnerGuy
06-18-2009, 12:27 PM
Hello Everyone,
First, I will say that I am very new to coding, and have been doing my best to pick it up on my own.
That said, I am attempting to create a menu that is able to open by clicking on it, and also close by clicking the same link. If anyone has any ideas or a generic form which I can try to adapt to my little site, I would much appreciate it!! Much thanks,
-MrRunnerGuy
JMRKER
06-21-2009, 11:09 AM
There are lots of simple generic menus ... here's one.
<html>
<head>
<title>Simple Menu</title>
<style type="text/css">
.mC {
width:100px;
margin:5px;
float:left;
}
.mC h5 {
color:#60c;
cursor:pointer;
font-weight:bold;
border-top:1px solid #300;
}
.mC ul {
display:none;
margin-left:0;
margin-bottom:10px;
padding-left:0;
list-style: none;
}
.mC li {
margin-left:0;
display:block;
}
</style>
<script type="text/javascript">
// unobtrusive collapsible menu
// copyright Stephen Chapman http://javascript.about.com
// 17th May 2008
//
// you may use this script on your site provided that
// the copyright notice is retained unaltered.
function toggleMenu(objID) {
if (!document.getElementById) return;
var ob = document.getElementById(objID).nextSibling;
ob = ob.style ? ob.style : ob.nextSibling.style;
ob.display = (ob.display == 'block')?'none': 'block';
}
var i = 1;
onload = function(){
while(document.getElementById('menu'+i)) {
document.getElementById('menu'+i).onclick= new Function("toggleMenu('menu"+i+"')");
i++;
}
}
</script>
</head>
<body>
<div class="mC">
<h5 id="menu1">+ Collapsible</h5>
<ul>
<li><a href="blucmenu2.htm">HTML</a></li>
<li><a href="blucmenu3.htm">Stylesheet</a></li>
<li><a href="blucmenu4.htm">JavaScript</a></li>
<li><a href="blucmenu5.htm">Alternate JS</a></li>
</ul>
<h5 id="menu2">+ Dropdown</h5>
<ul>
<li><a href="blsfmenu1.htm">Introduction</a></li>
<li><a href="blsfmenu2.htm">HTML</a></li>
<li><a href="blsfmenu3.htm">CSS</a></li>
<li><a href="blsfmenu4.htm">JavaScript</a></li>
</ul>
<h5 id="menu3">+ Sliding</h5>
<ul>
<li><a href="blsmenu.htm">Introduction</a></li>
<li><a href="blsmenu1.htm">The Script</a></li>
<li><a href="blsmenu2.htm">Make Menu</a></li>
</ul>
</div>
</body>
</html>
If not simple enough, let us know.
:)