Navigational Dropdown

HTML & CSS
1

I am am trying to make a dropdown menu using just HTML and CSS, but not sure how it really works. I want it to look something like this:
This is what I got so far → LINK

2

Add in these

#navigational_links li
{
  position:relative;
}
#navigational_links li ul
{
  position:absolute;
  left:-9999rem;
  top:100%;
}
#navigational_links li li
{
  position:static;
}
#navigational_links li:hover ul
{
  left:0;
}

Dropdowns work by hiding the menu off screen, and then on hover, bringing it back into display. The first position:relative; is to set a stacking context for the dropdown so that it will show relative to that parent LI. The second rule will hide that UL off screen until we are ready. The third resets the positioning for the child dropdown. Not htat big of a deal nowadays but a few years back you used to have strange bugs. I put it in there just for the heck of it. The last one is saying that on the LI hover, bring the dropdown back into view.

Final result
http://codepen.io/ryanreese09/pen/KpwJBL

It’s a basic dropdown but it should give you the tools to continue as you want.

1 Like
3

Thanks.

4

Just as a general comment the person who coded the current website for the Company that I work for used a jquery navigational bar, which is more code. Instead of simply just using HTML and CSS. Is their a benefit of using Jquery? although I did not see any difference between the two.

5

What happens if you disable Javascript for htat navigation bar?

The biggest difference is that some users might not be able to get all menu optins.

The second is that Javascript doesn’t need to be handling dropdowns unless it’s to add behavior that CSS can’t do. It depends on the dropdown.

6

Before when I would take it off…the dropdown would not work at all.

you mean different users with different browsers/versions?

Yeah thats what I was saying, It didnt seem to do anything else that CSS cant do. I guess the person just like to code with Jquery…

7

I find that people who do jquery for dropdowns that can be done in CSS just don’t really know CSS that well, if at all.

2 Likes
8

No, no benefits for basic functionality such as navigation!
Some rare use in case of extended or nested dropdowns is to delay the list collapsing in order to save the user when the mouse comes off the list area. But that can easily be achieved with css by e.g. safe outer zones where the user may cut corners moving the mouse.

Jquery &all can be further used to enhance the user experience or assist the visitor in many ways. That is of course true benefits.

But there is general disadvantages to consider:
Accessibility - I for one normally have javascript diabled and have no regards for sites that use javascript to access basic functions.
Loading time - Extra http requests and recieving. Extra threads to load and run before the page begins to work.
Development - More code to write and test and then maintain. More complexity and dependencies in debugging.

Hope I gave you some arguments to resist depending on scripts when you meet the question at your Company. :wink:

9

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