Grow your CSS skills. Land your dream job.

Fixing simple drop-down menu

  • # April 27, 2013 at 1:07 pm

    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.

    # April 27, 2013 at 3:54 pm

    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

    # April 28, 2013 at 3:04 am

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

    # April 28, 2013 at 4:15 am

    So you can try the first link….

    # April 28, 2013 at 5:53 am

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

    # April 28, 2013 at 7:41 am

    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

    # April 28, 2013 at 7:41 am

    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/

    # April 28, 2013 at 7:58 am

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

    # April 28, 2013 at 8:20 am

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

    If you have any specific questions let me know.

    # April 28, 2013 at 9:27 am

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

    # April 28, 2013 at 11:41 am

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

    # April 28, 2013 at 3:45 pm

    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

    # April 28, 2013 at 4:57 pm

    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

    # April 28, 2013 at 5:35 pm

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

    # April 29, 2013 at 12:24 am

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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".