Dropdown Menus

Overview

Dropdown menus are additional menu options that appear when the parent option is hovered over or clicked. VM UI Framework features two kinds of dropdown menus, the regular list-based dropdown, and a mega dropdown menu, both to be used in the top navigation bar. The list-based dropdown can also be used in buttons or button groups.

Usage

For either type of dropdown menu, simply add a class to the parent li element. The regular dropdown menu will have a class of dropdown and the mega dropdown menu will have a class of megaDropdown. You can see code examples of each below and demos in the navbar above.

Examples

Navbar Dropdowns

The default dropdown menu is simply an unordered child list following a menu item. You can see a demo of it in the navbar above by hovering over or clicking on the "Dropdown" menu item.

Style Notes
  • The dropdown will automatically expand to the width of it's longest menu item.
  • A downward pointing triangle is automatically added after the parent menu link.
<div class="navbarContainer">
	<div class="container">
		<div class="row">
			<div class="col12">
				<ul>
					<li><a href="#">Normal Menu Item</a></li>
					<li class="dropdown">
						<a href="#">Dropdown</a>
						<ul>
							<li><a href="#">Item 1 is really long</a></li>
							<li><a href="#">Item 2</a></li>
							<li><a href="#">Item 3</a></li>
						</ul>
					</li>									
				</ul>
			</div>
		</div>
	</div>	
</div>
Navbar Mega Dropdown Menus

A mega dropdown menu is a dropdown in the navbar that expands to the full width of the grid. It's most useful when you have a lot of menu options or would like to include other elements in the dropdown, such as additional text or images.

Style Notes
  • The mega dropdown is the full-width of the grid.
  • div columns can be used within the mega dropdown. However, the horizontal margin between columns is cut in half.
  • The dropdown itself must be wrapped in a div element.
  • A downward pointing triangle is automatically added after the parent menu link.
<div class="navbarContainer">
	<div class="container">
		<div class="row">
			<div class="col12">
				<ul>
					<li><a href="#">Normal Menu Item</a></li>
					<li class="megaDropdown">
						<a href="#">Mega Dropdown</a>
						<div>
							<div class="col4"></div>
							<div class="col4"></div>
							<div class="col4"></div>								
						</div>
					</li>									
				</ul>
			</div>
		</div>
	</div>	
</div>

Button Dropdowns

Buttons can also have a list-based dropdown menu, used either in a lone button or in a button group. You can see examples of both below.

Single-button Dropdown

Because a single button does not naturally have a container element, it should be wrapped in a span element, which should be given the class dropdown.

Dropdown 
<span class="dropdown">
	<a href="#" class="largeInfoButton">Dropdown</a>
	<ul>
		<li><a href="#">Item 1 is really long</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>					
</span>
Button Group Dropdown

Because button groups are already an unordered list, you simply need to apply the class dropdown to the li element you wish to make a dropdown.

<ul class="buttonGroup">
	<li><a href="#" class="buttonLarge">Button 1</a></li>
	<li><a href="#" class="buttonLarge">Button 2</a></li>
	<li><a href="#" class="buttonLarge">Button 3</a></li>
	<li class="dropdown">
		<a href="#" class="largeInfoButton">Dropdown</a>
		<ul>
			<li><a href="#">Item 1 is really long</a></li>
			<li><a href="#">Item 2</a></li>
			<li><a href="#">Item 3</a></li>
		</ul>					
	</li>					
</ul>
Want to continue the tour?

VM UI Framework is created, owned, maintained by Virtuosi Media, Inc. © 2012-2013.