Drop-Down Menu.

#1
Paradox

Posted 21 July 2008 - 10:28 PM

Newbie

Members
20 posts

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:

<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>

Edited by James.H, 26 March 2010 - 02:34 PM.

#2
Guest_Jordan_*

Posted 23 July 2008 - 04:21 PM

Guests

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.

#3
chili5

Posted 24 July 2008 - 04:04 PM

Writes binary right handed and hex left handed

Members
7,247 posts

Very interesting :D and easily expandable into multi-level menus :D

#4
TcM

Posted 31 July 2008 - 08:03 AM

Writes binary right handed and hex left handed

Members
11,147 posts

Good tutorial. +rep given.

#5
Whitey

Posted 31 July 2008 - 09:38 AM

Programming Professional

Members
255 posts

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?

#6
debtboy

Posted 23 September 2009 - 06:59 PM

Programming God

Members
916 posts

simple and clean :thumbup1:
+rep

http://unixclubhouse.com

#7
toxifyshadow

Posted 26 March 2010 - 02:32 PM

Programmer

Members
125 posts

Sorry if this is off-topic, is there a way to make a drop down menu with links as options?

#8
NastyDevil

Posted 08 June 2010 - 02:00 PM

Learning Programmer

Members
90 posts

Whitey said:

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?

Yeah you can simply change the position of the content to absolute so it goes over the text

toxifyshadow said:

Sorry if this is off-topic, is there a way to make a drop down menu with links as options?

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 :)

<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;[B]position:absolute[/B]">

[B]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 />[/B]

</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...