Fixing simple drop-down menu

[Kuzyo]

Hi everyone.
I want to implement really simple drop-down menu and here what I did http://jsfiddle.net/BWVyH/. I’m complete beginner in JS and I know that my code is awful.
I wasn’t able to do – when you put a mouse on a Submenu it didn’t hide, I tried by canceling hiding, but it didn’t work for me and as a result I set Timeout = 3000; :(

Please, help me to fix this problem and optimize my code. I will be very greatful. Thanks.

[rodolpheb]

Hi, here are two tutorials with and without Jquery. hope it might help.

http://cssmenumaker.com/blog/flat-dropdown-menu-tutorial

http://codepen.io/Alhadis/pen/FsEjz

[Kuzyo]

Thanks for the help, I will try to find solution, but want to make it without jQuery

[rodolpheb]

So you can try the first link….

[Kuzyo]

Sorry for confusing you, want to make without JQuery but with pure JS :(

[Kuzyo]

It seems I fixed it. Now I can move on submenu and it doesn’t disappear but I have to move my mouse very gently if I want menu work properly …why it so?http://codepen.io/anon/pen/HoJfI

[CrocoDillon]

You need to find a way to make it possible to move the mouse pointer from the menu item to the submenu without triggering mouseout on the menu item. I’ve done this for the first level by adding a padding to `.menu > li`, quick and dirty because I wanted to focus on the JS. Here is the result:

http://jsfiddle.net/BWVyH/1/

[Kuzyo]

Hi CrocoDilian, nice to see you again :) Your code is very difficult for me (, but I understand what do you mean

[CrocoDillon]

Hey :) Added some comments: http://jsfiddle.net/BWVyH/2/

If you have any specific questions let me know.

[Kuzyo]

Cool. Now I saw on practise how works NodeList. If I right understand querySelectorAll it the same like getElementByTagName Can I write something like this

var submenu = el.getElementByTagName(‘ul’)[0];

[CrocoDillon]

Yeah that would work as well :) `getElementsByTagName`*

[Kuzyo]

CrocoDillion, can you give me some excersice for practice JS (I think you can imagine what level of knowledge I have) because almost everithing what I found in Internt is difficult. I very appreciate your help

[CrocoDillon]

https://developer.mozilla.org/en-US/docs/JavaScript under “TOOLS & ADVANCED RESOURCES” you’ll find what you’re looking for. Their own guide and reference can be a help as well, I find their reference a bit hard to navigate and usually use Google to find something on that website.

By the way, you sure are creative about misspelling my name :P

[CrocoDillon]

Found this in my bookmarks as well: http://eloquentjavascript.net/

[Kuzyo]

CrocoDillon, sorry for the name ( Thanks for your help and time

[Author]

Posts