flag
X logo
Menu
Home Icons Contact
Docs
Typography
Responsive
Containers Grid Align Display
Navigation
Topnav Sidenav Slide down nav Verticale nav Fullscreen nav Buttons Pagination
Pictures
Images Animation Parallax Sliteshow Thumbnail
Helpers
Helpers Padding Margin
More
Accordion Borders Cards Colors Form List Popup modal Table Tooltips

Verticale nav


Introduction

Vertnav is a simple but effective vertical navigation with sub menu option.
It has a width of 250px on the larger screens. On screens smaller than 400px it has a width of 100%.
The basic colors are black and gray but can easily be adjusted with the color classes of css framework.

Click on the Class name to copy it.

vertnav Main class for the vertnav block
acc Class for click event of the buttons
dropbtn Class for open and close button
down-icon Class for open and close icon
drop-container Class for the contents of the dropdown container

Example Vertical Nav pc - laptop

Example mobile


Example code:

<div class="vertnav">
  <a href="#">Home</a>
  <a href="#">About us</a>
  <a href="#">Our work</a>
  <a class="acc dropbtn" href="javascript:void(0)">Our stores<span class="down-icon"></span></a>
  <div class="drop-container">
    <a href="#">Amsterdam</a>
    <a href="#">Rotterdam</a>
  </div>
  <a href="#">Contact</a>
</div>


© Copyright by Web Henkie
All right reserved
Webmaster