How to Add a Fly-Out Nav to a Dropdown Menu
If you’ve recently started learning Javascript, you may have discovered how to create a dropdown menu using both Javascript and HTML. However, it’s possible to create a dropdown menu and give it cool features without Javascript at all. I chose to explore creating a fly-out nav on hover using HTML and CSS.
To get started, fill out your index.html file with the code below. If you wish, create a header (line 9) to give your dropdown a background contrast. (We will give the dropdown itself a background, but more on that later.) For now, place each item for your navigation bar (eg., “Home,” “About,” etc.) inside an <li> tag, nested within a <ul> tag with class “main-nav”.
You’ll notice that we’ve nested more <li> tags below “Account.” This is where we create our dropdown! We will treat this unordered list as if we were using a <select> tag containing <option> tags.
Now for some CSS. All of the CSS code below is for giving our header some border, color, and styling.
In the next image below, we see how to use CSS for styling the navigation bar. I chose background colors, played around with sizing, and adjusted it until I was satisfied.
At this point, if you open up your index.html file in the browser, you should see:
But that’s not quite right. We don’t want the default state to show Account’s dropdown — only on hover. So, let’s fix that. While we’re at it, let’s add that fly-out nav to “Profile.” First, we’ll want to add a hover effect for the main nav. To integrate that feature, we can hop back to our CSS. We’ll start by adding a down arrow (line 66) and adding “hover” to our dropdown.
When we refresh our index.html in the browser, we should see the hover working:
Now we can add the fly-out nav! Let’s add one to the right of “Settings” with the same on-hover feature. But first, I’d like to change the option names of my menu and submenu.
In our CSS file, we’ll need to target our class “flyout” and class “flyout-nav” to add styling properties. Notice where we do so below:
Finally, if we refresh our index.html, we should have our result:
Try it yourself!
