Pure CSS Multi-level Navigation Menu

0
27
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