Okay... So I am about to learn Javascript and I am wondering how the most simple way to create a dropdown menu with onclick in javascript is? I know how to make a dropdown menu in CSS but I want to make it with javascript now. Got any great tutorials? Tips?

 

I was thinking something like this: When onclick is activated (on the mainlinks) the display attribute(for the submenus) will change it's value from none to block and vice versa...

 

I want this as simple as possible for easier understanding

 

Thanks in advance!

Okay... So I am about to learn Javascript and I am wondering how the most simple way to create a dropdown menu with onclick in javascript is? I know how to make a dropdown menu in CSS but I want to make it with javascript now. Got any great tutorials? Tips?

 

I was thinking something like this: When onclick is activated (on the mainlinks) the display attribute(for the submenus) will change it's value from none to block and vice versa...

 

I want this as simple as possible for easier understanding

 

Thanks in advance!

 

js

function profile_menu() {
 var d = document.getElementById();
 if(d.style.display == 'none') {
   d.style.display = 'block';
 } else {
   d.style.display = 'none';
 }
}

 

html

<a href="#" onclick="profile_menu; return false;"> Text here</a>
<div class="user_menu" style="display:none;">';

  <ul class="user_menu2">
 <li> Link / text</li>
 <li> Link / text</li>
 <li> Link / text </li>
</ul>
</div>

 

css

/* user drop menu style*/ 
.user_menu {
display:none;
background:#E5E5E8;
}
.user_menu2 ul {
background:#E5E5E8;
}
.user_menu2 li {
display:block;
background-color:#ffffff;
}

 

thats only one menu block but you can easily add more

It didn't work for me. Did you try the code?

Here's the thing, why would you want to do dropdowns in Javascript when you can already do them in CSS? I mean it's a good skill to have but it's much more bloated code and really not necessary. IMHO you use Javascript only when absolutely necessary.

 

Just IMHO

I don't think it's easier or smarter to do a drop-down menu activated by click in css than Javascript. And I am learning javascript and that's why I want to do this Thanks for the replies so far.

 

Waiting for Faevilangel to reply

It is smarter to use CSS than JS, simply because it means the menu will still work if someone has JS switched off, so it is more user friendly and accessible with CSS so that is why it is smarter

 

However if you want an easy way to do it using JS check out Suckerfish and Son of Suckerfish which relies on JS to work.

 

 

EDIT: or for pure JS check out:

http://javascript-array.com/scripts/simple_drop_down_menu/

http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

Thanks for the links Dizi! But I kinda need one with onclick instead of mouseover etc =P

*edited

If you are doing this to learn JS then why not take a good example of a JS dropdown and change the onmouseover to onclick? have a play about with it and see what happens, it would be a great way to learn and you would be able to see how different things would change the code...

 

 

For Example one of the example that I gave:

http://javascript-array.com/scripts/simple_drop_down_menu/

 

 

you would just need to change one of the onmouseover to onclick so that the url in the li would look like this:

 

Before:

<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Home</a>....

 

After:

<li><a href="#" onclick="mopen('m1')" onmouseout="mclosetime()">Home</a>....

 

Do that for all the <li> tags and all of them are magically transformed to onclick.

 

 

it seems a better way to learn then to just get someone else to build the whole thing for you, as you will be learning about different parts of the code as you edit it.

Yes you are fully right Dizi! I tried to change onmouseover to onclick but nothing appears when I click the link :s

 

<ul id="sddm">
   <li><a href="#" 
       onclick="mopen('m1')" 
       onmouseout="mclosetime()">Home</a>

sorry didn't read all the script remove this bit from the JS, which is telling it to close if the mouse is clicked:

 

// close layer when click-out
document.onclick = mclose; 
// -->

It works for me now Thanks Dizi... I'm gonna study the code and try some things now

Hi Snel pUppie,

 

Might be very late on this - But, I have a solution!

 

I had a requirement similar to the one you have had. I wrote a simple jQuery snippet to get Drop down menu when I click on the Parent menu.

 

Once you click on any of the parent menu - it will show its own sub level in the drop down.

When you click on any other Parent - the previous Drop down will disappear and the new Drop down will appear.

 

I have that tutorial here

Since I'm new here & not allowed to post links - I'll put it this way ultimatewebdevelopmenttutorial - This is my blog.[Please apend ultimatewebdevelopmenttutorial with .blogspot.in]. Put it together and put it into the address bar and hit enter or search on Google

 

It is a bit static type - but much useful. Any questions - please feel free to put it here!!

 

 

Thanks!

Stormstriker Sumesh

Edited May 26, 201313 yr by stormstriker sumesh

Here's the thing, why would you want to do dropdowns in Javascript when you can already do them in CSS? I mean it's a good skill to have but it's much more bloated code and really not necessary. IMHO you use Javascript only when absolutely necessary.

 

Just IMHO

 

I tend to agree ecxept if you want the dropdown to be animated. Css transitions isn’t supported in IE9 and below.