- Targeting Menu Elements with Submenus in a Navigation Bar
- How TO — Subnav
- Example
- Minimal Drop-down Menu Bar with Submenu using HTML & CSS
- Video Tutorial of Minimal Dropdown Menu Bar or Navbar
- You might like this:
- Dropdown Menu Bar using HTML & CSS [Source Codes]
- Side Menu Bar with sub-menu using HTML CSS & Javascript
- Video Tutorial of Side Menu Bar with Submenu
- You might like this:
- Sidebar Menu with Drop-down Menu [Source Codes]
Targeting Menu Elements with Submenus in a Navigation Bar
The following is a guest post by Ray Messina. Ray was interested in sharing this technique as a way to pay forward things he’s learned from this site in the past, which is awesome. You might be aware of the jQuery .has method, which allows you to select an element if it has any of another selector as a descendant. There is sadly no such selector in CSS yet. But if you know a little something about the HTML structure, you can use a combination of positional selectors to mimic it. Ray will explain. Recently, I was working on a dropdown navigation bar and wanted to differentiate the menu items which contained sub menus from those that didn’t. I wanted to be able to do this automatically, without relying on JavaScript or having to add classes to the markup. I just wanted it to work as if the item just knew it had a sub menu or not.
The Need for Navigational Hints
- s. By extension, drop down menus are merely nested
- s. Dropdowns are a common component of modern (and not so modern) web design. Using pure CSS, one can style the upper level of a navigation menu any which way, and hide the sub levels so that they are revealed only when the visitor hovers on the appropriate area. Many designers are satisfied with leaving as that. However, from a UX/UI point of view, this is lacking as it leaves the user having to explore the entire menu to find which sections contain additional navigation links. This means visitors will either waste their time looking and get frustrated for doing so or miss areas of your site all together! That’s no good at all. The common way to address this issue, is to simply add a class to the
s that contain
- s (sub menus) so that we can style those items differently from those that do not contain sub navigation. Pretty simple, but also pretty tedious and not particularly graceful. Another way, assuming that upper level items are not coded as links, is to use that difference in tags as leverage. That is, create faux links: style s that’s are direct children of the
to indicate that there are more links that follow and, by contrast, style anchor tags as not having additional sub items. This is handy if your drop-down is simple and you can structure it specifically that way. It’s cleaner in that you don’t have to add “submenu” classes to your markup but, just as before, it still requires that you structure the content of your list manually or that your CMS can foretell which list items will contain other
- s as sub menus.
I had come across other methods of automatically styling list items which contain other lists, but they employed absolute positioning and a pseudo element off the child . While clever, the CSS calculations can be tricky at times or the method may be entirely impossible to implement depending on what other techniques you have used to lay out your menu and/or position your submenus, or the overall effect you desired to achieve.
Ideally, it would be great if there was a CSS selector that would let us query if an element contained another kind of element as a direct child, something akin to jQuery’s .has() method. We can can achieve nearly the same thing with li a:first-child:nth-last-child(x) < >. The key is having an expected child count (HTML element planned parenthood?). Most likely it will be two elements: the anchor and the
- , though one can tweak this technique to work for any number or child elements, as long as you have a regular pattern. Here is a quick example. The markup is just your standard nested UL, but note that I have only used one class in the HTML, on the root
- . Test this out yourself, add any number of nested lists at any level!
nav < display: block; text-align: center; >nav ul < margin: 0; padding:0; list-style: none; >.nav a < display:block; background: #111; color: #fff; text-decoration: none; padding: 0.8em 1.8em; text-transform: uppercase; font-size: 80%; letter-spacing: 2px; text-shadow: 0 -1px 0 #000; position: relative; >.nav < vertical-align: top; display: inline-block; box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff; border-radius:6px; >.nav li < position: relative; >.nav > li < float: left; border-bottom: 4px #aaa solid; margin-right: 1px; >.nav > li > a < margin-bottom: 1px; box-shadow: inset 0 2em .33em -0.5em #555; >.nav > li:hover, .nav > li:hover > a < border-bottom-color: orange; >.nav li:hover > a < color:orange; >.nav > li:first-child < border-radius: 4px 0 0 4px; >.nav > li:first-child > a < border-radius: 4px 0 0 0; >.nav > li:last-child < border-radius: 0 0 4px 0; margin-right: 0; >.nav > li:last-child > a < border-radius: 0 4px 0 0; >.nav li li a
.nav li a:first-child:nth-last-child(2):before
That’s essentially the active ingredient of this technique. For this example, I used the :before pseudo element off the anchor element to draw the arrows. The pseudo element is not necessary to the technique. I could have just as easily changed backgrounds on the anchor itself instead; you can make it do most anything you want once you have targeted the element. Finally, just to polish it off, some positioning and arrow styling CSS code.
/* submenu positioning*/ .nav ul < position: absolute; white-space: nowrap; border-bottom: 5px solid orange; z-index: 1; left: -99999em; >.nav > li:hover > ul < left: auto; margin-top: 5px; min-width: 100%; >.nav > li li:hover > ul < left: 100%; margin-left: 1px; top: -1px; >/* arrow hover styling */ .nav > li > a:first-child:nth-last-child(2):before < border-top-color: #aaa; >.nav > li:hover > a:first-child:nth-last-child(2):before < border: 5px solid transparent; border-bottom-color: orange; margin-top:-5px >.nav li li > a:first-child:nth-last-child(2):before < border-left-color: #aaa; margin-top: -5px >.nav li li:hover > a:first-child:nth-last-child(2):before
As you probably guessed, you could also use other selector/selector combinations such as :only-child , :first-child:last-child , :first-child:not(:last-child) and the like. But I have found that :nth-child(x):nth-last-child(x) gives the most flexibility and serves as a built-in fallback (as it allows us to target the element directly, rather than by exclusion), and there is little cross browser support advantage gained by using the other selector/selector combinations. That’s it. Simple, graceful and totally automatic; the way it ought to be. Support for this is almost universal, except for IE, which eats glue and only offers support in IE9+. At the time of writing, estimated global support for these selectors, as used, was roughly 87% which is not too bad.
How TO — Subnav
Use any element to open the subnav/dropdown menu, e.g. a , or
element.
Use a container element (like ) to create the subnav menu and add the subnav links inside it.
Wrap a element around the button and the to position the subnav menu correctly with CSS.
Step 2) Add CSS:
Example
/* The navigation menu */
.navbar overflow: hidden;
background-color: #333;
>
/* Navigation links */
.navbar a float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>
/* The subnavigation menu */
.subnav float: left;
overflow: hidden;
>
/* Subnav button */
.subnav .subnavbtn font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
>
/* Add a red background color to navigation links on hover */
.navbar a:hover, .subnav:hover .subnavbtn background-color: red;
>
/* Style the subnav content — positioned absolute */
.subnav-content display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
>
/* Style the subnav links */
.subnav-content a float: left;
color: white;
text-decoration: none;
>
/* Add a grey background color on hover */
.subnav-content a:hover background-color: #eee;
color: black;
>
/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content display: block;
>
Minimal Drop-down Menu Bar with Submenu using HTML & CSS
Hello readers, Today in this blog you’ll learn how to create a Minimal Dropdown Menu Bar with Submenu in HTML & CSS only. Previously I have shared a Minimal Navigation Menu Bar using CSS but there is no submenu or drop menu features. So now it’s time to create a Dropdown Menu.
A drop-down menu (sometimes called a pull-down menu or list) is a graphical control element designed to help visitors find specific pages, contents, or features on your website. Clicking or hovering on a top-level menu heading indicates a list of options to the dropdown menu.
At first, on the webpage, there is only a small menu bar or navbar, but when you clicked on that menu bar then the menu list is sliding down and visible. Those submenus or drop menus are hidden at first and when you clicked on their parent menu item then the drop list is shown. I’ve also added a simple hover color on the list as you can see in the image.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Minimal Drop-down Menu Bar with Submenu using HTML & CSS).
Video Tutorial of Minimal Dropdown Menu Bar or Navbar
If you like this Dropdown Menu Bar and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
If you’re a beginner and you have basic knowledge of HTML & CSS then you can also create this type of minimal navbar or menu. I hope after watching this video tutorial, you’ve understood what is the actual codes and concepts behind creating this type of design. You can also easily use this program on your websites and projects.
You might like this:
Dropdown Menu Bar using HTML & CSS [Source Codes]
To create this program (Minimal Drop-down Menu Bar with Submenu). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url(‘https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap’); * < margin: 0; padding: 0; box-sizing: border-box; user-select: none; font-family: 'Poppins', sans-serif; >nav < position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); background: #1b1b1b; width: 400px; line-height: 40px; padding: 8px 25px; border-radius: 5px; >nav label < color: white; font-size: 22px; font-weight: 500; display: block; cursor: pointer; >.button span < float: right; line-height: 40px; transition: 0.5s; >.button span.rotate < transform: rotate(-180deg); >nav ul < position: absolute; background: #1b1b1b; list-style: none; top: 75px; left: 0; width: 100%; border-radius: 5px; display: none; >[id^=btn]:checked + ul < display: block; >nav .menu:before < position: absolute; content: ''; height: 20px; width: 20px; background: #1b1b1b; right: 20px; top: -10px; transform: rotate(45deg); z-index: -1; >nav ul li < line-height: 40px; padding: 8px 20px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,0.2); >nav ul li label < font-size: 18px; >nav ul li a < color: white; text-decoration: none; font-size: 18px; display: block; >nav ul li a:hover, nav ul li label:hover < color: cyan; >nav ul ul < position: static; >nav ul ul li < line-height: 30px; padding-left: 30px; border-bottom: none; >nav ul ul li a < color: #e6e6e6; font-size: 17px; >nav ul li span < font-size: 20px; float: right; margin-top: 10px; padding: 0 10px; transition: 0.5s; >nav ul li span.rotate < transform: rotate(-180deg); >input
That’s all, now you’ve successfully created a Minimal Drop-down Menu Bar with Submenu using HTML & CSS. If your code not work or you’ve faced any error/problem then please comment down or contact us from the contact page.
Side Menu Bar with sub-menu using HTML CSS & Javascript
Hello readers, Today in this blog you’ll learn how to create a Side Menu Bar with a sub-menu using HTML CSS & JavaScript. Earlier I have shared a Side Navigation Menu Bar without a sub-menu, but my viewers requested me many times to create a Side Bar Menu with a submenu, now it’s time to create a Side Menu Bar with a submenu or dropdown menu.
A drop-down menu is a horizontal list of menu options that each contain a vertical menu. When you hover or click one of the primary options in a drop-down menu, a list of choices will “drop down” below the main menu. The most common type of drop-down menu is a menu bar or Navigation Menu bar.
Today in this blog, I’ll share with you this program (Side Menu Bar with sub-menu). At first, there is only a button and this sidebar menu is hidden. But when you clicked on that button then this sidebar will be shown by sliding from the left side. In the menus, there is a cool hover effect too.
That means when you hovered on the specific item, a small line will appear on the left side of that list, and also the color of that item becomes cyan as you can see in the image.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Side Menu Bar with sub-menu).
Video Tutorial of Side Menu Bar with Submenu
I hope you’ve understood the basic codes of this sidebar and I believe this video helped the beginners to understand the codes and concepts behind creating the sidebar menu. You can use this Sidebar on your websites, projects, and anywhere you want.
If you like this program (Side Menu Bar with sub-menu) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down.
You might like this:
Sidebar Menu with Drop-down Menu [Source Codes]
To create this program (Side Menu Bar with sub-menu). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url(‘https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap’); * < margin: 0; padding: 0; user-select: none; box-sizing: border-box; font-family: 'Poppins', sans-serif; >.btn < position: absolute; top: 15px; left: 45px; height: 45px; width: 45px; text-align: center; background: #1b1b1b; border-radius: 3px; cursor: pointer; transition: left 0.4s ease; >.btn.click < left: 260px; >.btn span < color: white; font-size: 28px; line-height: 45px; >.btn.click span:before < content: '\f00d'; >.sidebar < position: fixed; width: 250px; height: 100%; left: -250px; background: #1b1b1b; transition: left 0.4s ease; >.sidebar.show < left: 0px; >.sidebar .text < color: white; font-size: 25px; font-weight: 600; line-height: 65px; text-align: center; background: #1e1e1e; letter-spacing: 1px; >nav ul < background: #1b1b1b; height: 100%; width: 100%; list-style: none; >nav ul li < line-height: 60px; border-top: 1px solid rgba(255,255,255,0.1); >nav ul li:last-child < border-bottom: 1px solid rgba(255,255,255,0.05); >nav ul li a < position: relative; color: white; text-decoration: none; font-size: 18px; padding-left: 40px; font-weight: 500; display: block; width: 100%; border-left: 3px solid transparent; >nav ul li.active a < color: cyan; background: #1e1e1e; border-left-color: cyan; >nav ul li a:hover < background: #1e1e1e; >nav ul ul < position: static; display: none; >nav ul .feat-show.show < display: block; >nav ul .serv-show.show1 < display: block; >nav ul ul li < line-height: 42px; border-top: none; >nav ul ul li a < font-size: 17px; color: #e6e6e6; padding-left: 80px; >nav ul li.active ul li a < color: #e6e6e6; background: #1b1b1b; border-left-color: transparent; >nav ul ul li a:hover < color: cyan!important; background: #1e1e1e!important; >nav ul li a span < position: absolute; top: 50%; right: 20px; transform: translateY(-50%); font-size: 22px; transition: transform 0.4s; >nav ul li a span.rotate < transform: translateY(-50%) rotate(-180deg); >.content < position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #202020; z-index: -1; text-align: center; >.content .header < font-size: 45px; font-weight: 600; >.content p
That’s all, now you’ve successfully created a Side Menu Bar with a sub-menu using HTML CSS & Javascript. If your code doesn’t work or you’ve faced any errors/problems then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.