Newbie
This is a basic drop-down menu you can add to your site. It's like a collapse able
box like in vBulletin Modules. Except the way to get the content to drop is if you click the text & your content will fall underneath the text you clicked.
Script:
Code:<html>
<head>
<script type="text/javascript">
function drop(id) {
if (document.getElementById(id).style.display == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
</head>
<body>
<a onclick="drop(1)">TEXT TO CLICK</a>
<div id="1" style="display:none;">CONTENT IN THE DROP-DOWN MENU</div>
</body>
</html>
Last edited by James.H; 03-26-2010 at 03:34 PM.
We use a technique similar to this on with the blogger that John and I added. I also use the "hide" tags in ionFiles to show/hid more info.
Very interestingand easily expandable into multi-level menus
Good tutorial. +rep given.
Programming Professional
Now if you did OnMouseOut and OnMouseOver using this it just push's the other text down.. So is there a way to use this for a drop down menu?
simple and clean
+rep
Programmer
Sorry if this is off-topic, is there a way to make a drop down menu with links as options?
Yeah you can simply change the position of the content to absolute so it goes over the textOriginally Posted by Whitey
Yes, all you do is add a <a href="http://forum.codecall.net/javascript/..."> Link </a> to any link you want to make.
I slightly modified the code to show the two concepts asked about above. And you can make this menu very complex if you want to, just need some simple coding
Code:<html> <head> <script type="text/javascript"> function drop(id) { if (document.getElementById(id).style.display == 'block') { document.getElementById(id).style.display = 'none'; } else { document.getElementById(id).style.display = 'block'; } } </script> </head> <body> <a onclick="drop(1)">TEXT TO CLICK</a> <br /> <div id="1" style="display:none;position:absolute"> CONTENT IN THE DROP-DOWN MENU <br /> <a href="http://www.codecall.net">Link 1 </a><br /> <a href="http://www.codecall.net">Link 2 </a><br /> </div> <p>Hello Everyone</p> </body> </html>
My modifications are in bold. Oh and sorry if im not allowed to modify the code posted by the original author or anything like that...
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
LinkBack URL
About LinkBacks
Reply With Quote
Bookmarks