Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Drop-Down Menu.


  • Please log in to reply
8 replies to this topic

#1 Paradox

Paradox

    CC Newcomer

  • Just Joined
  • PipPip
  • 15 posts

Posted 21 July 2008 - 10:28 PM

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.

  • 3

#2 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 23 July 2008 - 04:21 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.
  • 0

#3 chili5

chili5

    CC Mentor

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 3038 posts
  • Programming Language:Java, C#, PHP, JavaScript, Ruby, Transact-SQL
  • Learning:C, Java, C++, C#, PHP, JavaScript, Ruby, Transact-SQL, Assembly, Scheme, Haskell, Others

Posted 24 July 2008 - 04:04 PM

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

#4 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7563 posts

Posted 31 July 2008 - 08:03 AM

Good tutorial. +rep given.
  • 0

#5 Whitey

Whitey

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 259 posts

Posted 31 July 2008 - 09:38 AM

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?
  • 0

#6 debtboy

debtboy

    CC Devotee

  • Just Joined
  • PipPipPipPipPipPip
  • 499 posts

Posted 23 September 2009 - 06:59 PM

simple and clean :thumbup1:
+rep
  • 0

#7 toxifyshadow

toxifyshadow

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 120 posts

Posted 26 March 2010 - 02:32 PM

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

#8 NastyDevil

NastyDevil

    CC Resident

  • Just Joined
  • PipPipPipPip
  • 90 posts

Posted 08 June 2010 - 02:00 PM

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

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...
  • 0

#9 destineddesign

destineddesign

    CC Lurker

  • New Member
  • Pip
  • 5 posts
  • Location:california

Posted 18 September 2014 - 11:25 PM

With css properties that can submenu in size elasticity is not the word that you ?


  • 0