Pure CSS Multi-level Navigation Menu

0
60
Pure-CSS-Multi-level-Navigation-menu.css

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.

01 <nav>
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>
05       <ul>
06         <li><a href="#">Sub Nav Link</a></li>
07         <li><a href="#">Sub Nav Link</a>
08           <ul>
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>
12           </ul>
13         </li>
14         <li><a href="#">Sub Nav Link</a></li>
15         <li><a href="#">Sub Nav Link</a></li>
16       </ul>
17     </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>
21   </ul>
22 </nav>

3. Create a vertical expanding menu from a nav list as follows:

01 <nav>
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>
05 <ul>
06 <li><a href="#">Sub Nav Link</a></li>
07 <li><a href="#">Sub Nav Link</a>
08 <ul>
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>
12 </ul>
13 </li>
14 <li><a href="#">Sub Nav Link</a></li>
15 <li><a href="#">Sub Nav Link</a></li>
16 </ul>
17 </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>
21 </ul>
22 </nav>

Download

0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments