CSS Codes
CSS Layouts
FF28+ IE10+ Chrome21+

Mega Dropline Menu

Author: Dynamic Drive

Description: Mega Drop Line Menu uses leans heavily on CSS3 to create a modern Drop Line Menu with support for infinite levels of sub menus. The menu employs CSS transform to "fold" each sub menu into view on hover or onclick (on touch devices) of the parent menu item. It uses a minimal of JavaScript (<1kb compressed), and even works when JavaScript is disabled on desktop browsers . Menu items can easily be left or right aligned at the topmost level, such as the search and social media icon on the far right of the menu. For sub menu items, everything is distributed evenly across the full width of the main menu bar, thanks to CSS flexbox. Moving past the layout to the visuals,

Mega Dropline Menu works on all modern browsers that support CSS flexbox, namely, IE10+ and all other modern browsers. It works equally well on modern mobile browsers, turning into a full screen menu when the browser size is sufficiently small.

Demo: Above you! Try resizing the browser to 680px in width or lower to see the mobile version of the menu.

Directions

Step 1: Add the below code to the HEAD section of your page:

Select All

This script uses the following external files. Download them below (right click, and select "Save As"):

The menu also references Google Fonts and FontAwesome in the demo, both of which are optional.

Step 2: Then, add the below sample markup to your page:

Select All

Note that the JavaScript is added to the very end of the menu, after the menu markup. It should never proceed the markup.

Menu setup

The Drop Line Menu composes simply of a valid nested UL element with a ID of "megadroplinemenu". For sub menus with a description, wrap the description in a DIV tag, for example:

<div id="megadroplinemenu">
    <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="http://www.google.com">Folder 1</a>
    <ul>
        <li><a href="http://yahoo.com">Sub Item 1.1<div>Free, original JavaScripts to power up your site.</div></a></li>
        <li><a href="#">Sub Item 1.2<div>Here you'll find original, practical CSS codes and examples.</div></a></li>
"

The id value of the main menu container should be kept as it btw.

Right aligning select top menu items

 In the demo menu above, we've right aligned the last two top level menu items (the search and social menu items). You can modify this number by changing the following number inside megadroplinemenu.css:

/* right align last two LI elements, Change (2) above to diff number if desired */
#megadroplinemenu > ul li:nth-last-of-type(2) {
	margin-left: auto;
	border-left: 1px solid #eee;
}

Customizing the search menu item

 By default, one of the menu items is a search icon (courtesy of FontAwesome) that shows a search box when hovered/clicked on. The following is the relevant HTML snippet inside the menu:

<li id="searchtoggler" class="noarrow"><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a>
<ul>
<li><input name="search" id="search" type="text" placeholder="Search Site" /></li>
</ul>
</li>

You can remove this code if you don't wish to show a search box, though if you retain it, do not change the "searchtoggler" ID assigned to the LI element in question, as JavaScript is then used to target and set focus on the contained text box when the element is clicked on. The class "noarrow" is added to remove the drop down arrow that by default appears next to any menu item with a sub menu.

Customizing the mobile menu breakpoint and hamburger toggler

 Mega Drop Line Menu uses CSS media queries to show a hamburger icon that toggles the mobile version of the menu at a certain browser width or below. Out of the box that width is 680px or below, as set inside megadroplinemenu.css:

@media (max-width: 680px) {

    div#burgertoggler {
        visibility: visible;
    }
"
"

At this point the hamburger toggler is shown to toggle the visibility of the Drop Line Menu, which has been mobile optimized so all the menu items appear as block elements, one item stacked on top of the next. The position of the hamburger toggler can be moved from the default upper right corner by changing the following CSS:

div#burgertoggler{
	width: 40px; /* keep width/height ratio to 1.53 if changing dimensions */
	height: 26px;
	margin-bottom: 2em;
	position: absolute;
	right: 10px; /* position toggler to the right of page */
	top: 10px;
"