Made my first Javascript drop down menu. What do you think of my code?

JavaScript
1

I just wrote my fist drop down menu. I’ve never really had to make one, but decided to give it ago and pretty much give it out for free online if it works. Its not fancy, and its not responsive, although I plan on adding responsiveness later. What do you think of the code though? I am always afraid I am writing sloppy code, when I make things other people might use in their own code.

Here is the link http://sebflo.com/nav

2

This won’t really let you include more than one dropdown or make individual listeners for each individual element. You could do something like this to handle that:

$(".parent").hover(function(){
  $(this).find(".submenu").fadeIn();
});

$(".parent").mouseleave(function(){
  $(this).find(".submenu").fadeOut();
});

Which will allow you to use it on multiple elements and it will the child submenu. You also have a lot of unnecessary CSS which actually makes the above look like it doesn’t work, but it does.

It needs more modification than this, but this should give you a start.

.submenu{
    list-style: none;
    display: inline-block: /* changed */
    /*position: absolute;*/
    background-color: #555;
    min-width: 90px;
    /*margin-left: 110px;*/
    display: none;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.subLinks{
    /*margin-left: -33px;*/
    padding-top: 10px;
    padding-bottom: 10px;
}

Also, for quick online testing and sharing use JSFiddle or CodePen instead of putting files out there for someone to inspect source. CodePen links will actually embed into Discourse (the forum software Sitepoint uses)

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.