Pure CSS Multi-level Navigation Menu
Description:
menu.css is a tiny CSS library to create multi-level (up to 4) horizontal dropdown menus or vertical expanding menus without any JavaScript.
How to use it:
1. Import the stylesheet menu.css in the HTML file.
1 |
<link rel="stylesheet" href="menu.css" /> |
2. Create a horizontal dropdown menu from a nav list.
02 |
<ul class="nav-menu nav-center"> |
03 |
<li><a href="#">Nav Link</a></li> |
04 |
<li><a href="#" class="nav-active">Nav Link</a> |
06 |
<li><a href="#">Sub Nav Link</a></li> |
07 |
<li><a href="#">Sub Nav Link</a> |
09 |
<li><a href="#">Sub Sub Nav Link</a></li> |
10 |
<li><a href="#">Sub Sub Nav Link</a></li> |
11 |
<li><a href="#">Sub Sub Nav Link</a></li> |
14 |
<li><a href="#">Sub Nav Link</a></li> |
15 |
<li><a href="#">Sub Nav Link</a></li> |
18 |
<li><a href="#">Nav Link</a></li> |
19 |
<li><a href="#">Nav Link</a></li> |
20 |
<li><a href="#">Nav Link</a></li> |
3. Create a vertical expanding menu from a nav list as follows:
02 |
<ul class="nav-menu nav-vertical"> |
03 |
<li><a href="#">Nav Link</a></li> |
04 |
<li><a href="#" class="nav-active">Nav Link</a> |
06 |
<li><a href="#">Sub Nav Link</a></li> |
07 |
<li><a href="#">Sub Nav Link</a> |
09 |
<li><a href="#">Sub Sub Nav Link</a></li> |
10 |
<li><a href="#">Sub Sub Nav Link</a></li> |
11 |
<li><a href="#">Sub Sub Nav Link</a></li> |
14 |
<li><a href="#">Sub Nav Link</a></li> |
15 |
<li><a href="#">Sub Nav Link</a></li> |
18 |
<li><a href="#">Nav Link</a></li> |
19 |
<li><a href="#">Nav Link</a></li> |
20 |
<li><a href="#">Nav Link</a></li> |
Download
