12+ CSS Vertical Menu Examples (2023)

This post contains a total of 12+ Hand-Picked CSS Vertical Menu Examples with Source Code. All these Vertical Menus are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

10+ CSS Accordion Menu Examples

10+ CSS Dropdown Menu Examples

10+ CSS Menu Examples

(Video) There are 12+ Things Wrong with this Layout..

5+ Bootstrap Vertical Menu Examples

5+ CSS Hamburger Menu Examples

6+ CSS Mobile Menu Examples

(Video) Working with responsive Navigation in WYSIWYG Web Builder version 12 or 14

6+ CSS Sidebar Menu Examples

7+ CSS Circle Menu Examples

7+ CSS Fullscreen Menu Examples

(Video) The CSS Menu Tool in 90 Second Website Builder

7+ CSS Sliding Menu Examples

7+ JavaScript Vertical Menu Examples

1. By Alex Paul

Made by Alex Paul. CSS Vertical menu, dark themed with colorful hover effects. Source

(Video) The Panel Menu in 90 Second Website Builder

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title> <link href="https://fonts.googleapis.com/css?family=Exo:800" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>*{ box-sizing: border-box;}body{ background: #353535; font-family: 'Exo', sans-serif; font-size: 18px;}nav{ position: fixed; top: 0; left: 0; bottom: 0; width: 230px; height: 100vh; background: #1e1e1e;}nav>ol{ height: 100%; display: flex; flex-direction: column; justify-content: space-around;}.menu-item{ position: relative; padding: .75rem 2rem; height: 100%; display: flex; align-items: center; justify-content: center;}.menu-item:after{ position: absolute; content: ''; top: 0; bottom: 0; left: 0; width: 0; z-index: -1; box-shadow: 0 0 0 0 #1e1e1e; transition: .2s all linear;}.menu-item:nth-child(1):after{ background: Crimson;}.menu-item:nth-child(2):after{ background: Goldenrod;}.menu-item:nth-child(3):after{ background: DodgerBlue;}.menu-item:nth-child(4):after{ background: BlueViolet;}.menu-item:nth-child(5):after{ background: ForestGreen;}.menu-item:hover:after{ width: 100%;}.menu-item:nth-child(3):hover:after, .menu-item:nth-child(4):hover:after{ width: 200%; box-shadow: 8px 8px 0 0 #1e1e1e;}.menu-item:hover .sub-menu{ visibility: visible; opacity: 1; transform: scale(1);}.sub-menu{ position: absolute; left: 100%; height: 100%; width: 230px; display: flex; flex-direction: column; justify-content: space-around; visibility: hidden; opacity: 0; transform: scale(0); transition: .2s all ease-in-out; transition-delay: .2s; transform-origin: left;}.submenu-item{ padding: .75rem 2rem; transition: .2s all linear; border-radius: 5px 0 0 5px;}.submenu-item:hover{ background: rgba(0,0,0,.2);}.menu-item>a, .submenu-item>a{ color: #eaeaea; text-decoration: none;}</style></head><body> <nav class="menu"> <ol> <li class="menu-item"><a href="#0">Home</a></li> <li class="menu-item"><a href="#0">About</a></li> <li class="menu-item"> <a href="#0">Widgets</a> <ol class="sub-menu"> <li class="submenu-item"><a href="#0">Big Widgets</a></li> <li class="submenu-item"><a href="#0">Bigger Widgets</a></li> <li class="submenu-item"><a href="#0">Huge Widgets</a></li> </ol> </li> <li class="menu-item"> <a href="#0">Kabobs</a> <ol class="sub-menu"> <li class="submenu-item"><a href="#0">Shishkabobs</a></li> <li class="submenu-item"><a href="#0">BBQ kabobs</a></li> <li class="submenu-item"><a href="#0">Summer kabobs</a></li> </ol> </li> <li class="menu-item"><a href="#0">Contact</a></li> </ol></nav></body></html>

2. By Gunnar Halen

Made by Gunnar Halen. Vertical menu using icons and slide animation on hover. Source

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title> <style>body{background: url(http://thepatternlibrary.com/img/ae.jpg);}</style> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <style>@import 'https://fonts.googleapis.com/css?family=Roboto';.side-menu { font-family: 'Roboto', sans-serif; position: fixed; top: 0; left: 0; margin: 0; padding: 0; height: 100%; width: 60px; list-style-type: none; background: #f32c52; overflow: hidden; transition: width .3s;}.side-menu:hover { width: 300px;}.side-menu li { width: 300px;}.side-menu li span { font-size: 1rem; margin: 20px 30px 0 22px;}.side-menu li a { display: block; font-size: .9rem; text-decoration: none; color: #FFF; height: 60px;}.side-menu li a:hover,.side-menu li:first-child a { background: #14081d; display: block;}</style></head><body> <ul class="side-menu"><li><a href="#"><span class="fa fa-code"></span>Text here</a></li><li><a href="#"><span class="fa fa-cog"></span>Text here</a></li><li><a href="#"><span class="fa fa-font"></span>Text here</a></li><li><a href="#"><span class="fa fa-caret-square-o-right"></span>Text here</a></li><li><a href="#"><span class="fa fa-check-square"></span>Text here</a></li><li><a href="#"><span class="fa fa-square"></span>Text here</a></li><li><a href="#"><span class="fa fa-bars"></span>Text here</a></li></ul></body></html>

3. By Thomas

Made by Thomas. Vertical menu made using wordpress code. Source

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <style>@charset "UTF-8";body { padding: 0px; margin: 0; background-color: #57b64f; position: relative;}body h1 { color: white; position: absolute; right: 20px; bottom: -100vh; text-transform: uppercase; text-align: right; font-size: 60px; font-weight: 700;}header#mainHeader { width: 60px; height: 100%; left: 0; transition: left 0.5s ease-in-out 0.2s; position: fixed; display: inline-block; background-color: #3a4151; z-index: 1000;}header#mainHeader nav { height: 100%; width: 60px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); /* position:absolute; left:0; */ /* L'element */}header#mainHeader nav .top-header { background-color: #3a4151; position: relative;}header#mainHeader nav:after { content: " "; background-color: #3a4151; width: 60px; height: 100%; position: absolute; left: 0px;}header#mainHeader nav:before { content: " "; height: 100%; width: 0px; background-color: #424a5c; position: absolute; left: 60px; transition: width 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);}header#mainHeader nav .navBurger { cursor: pointer; width: 100%; height: 45px;}header#mainHeader nav .navBurger .burger { margin-left: 18px; margin-top: 30px; cursor: pointer; /* pour créer le hamburger, on décale les deux * barres de 8px */}header#mainHeader nav .navBurger .burger, header#mainHeader nav .navBurger .burger::before, header#mainHeader nav .navBurger .burger::after { border-radius: 2px; position: absolute; z-index: 100; width: 24px; height: 4px; background: white; transition: all 0.3s;}header#mainHeader nav .navBurger .burger::before, header#mainHeader nav .navBurger .burger::after { content: ""; display: block;}header#mainHeader nav .navBurger .burger::before { margin-top: -8px;}header#mainHeader nav .navBurger .burger::after { margin-top: 8px;}header#mainHeader nav ul { position: absolute; margin: 0; padding: 0; width: 100%; margin-top: calc(50vh - 160px);}header#mainHeader nav ul li { font-size: 14px; width: 60px; height: 40px; cursor: pointer; position: relative; display: block;}header#mainHeader nav ul li a { width: 150px; color: white; position: relative; z-index: 0; opacity: 0; left: -80px; text-transform: uppercase; transition: left 0.2s cubic-bezier(0.6, -0.28, 0.735, 0.045), opacity 0.15s cubic-bezier(0.6, -0.28, 0.735, 0.045); color: #fff; text-decoration: none;}header#mainHeader nav ul li:before { z-index: 10; content: " "; width: 8px; height: 8px; background-color: transparent; position: absolute; left: 26px; top: 16px; border-radius: 50%; border: 2px solid white; transform: scale(1) translate3d(0, 0, 0); transition: all 0.2s ease-in-out;}header#mainHeader nav ul li a:hover, header#mainHeader nav ul li a:active, header#mainHeader nav ul li a:visited, header#mainHeader nav ul li a:focus { background-color: transparent !important; color: white;}header#mainHeader nav ul li:hover:before { background-color: white;}header#mainHeader nav ul li.active:before, header#mainHeader nav ul li:hover:before { transform: scale(1.5) translate3d(0, 0, 0); background-color: white;}header#mainHeader nav:hover:before { width: 160px; transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}header#mainHeader nav:hover .burger { /* background:transparent; */ transform: rotate(45deg) translate3d(0, 0, 0);}header#mainHeader nav:hover .burger::before { margin-top: 0px; transform: rotate(-90deg) translate3d(0, 0, 0);}header#mainHeader nav:hover .burger::after { margin-top: 0px; transform: rotate(0deg) translate3d(0, 0, 0);}header#mainHeader nav:hover li a { left: 70px; opacity: 1; transition-duration: 0.4s; transition-property: left, opacity; transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);}header#mainHeader nav:hover li:nth-child(1) a { transition-delay: 0.3s;}header#mainHeader nav:hover li:nth-child(2) a { transition-delay: 0.34s;}header#mainHeader nav:hover li:nth-child(3) a { transition-delay: 0.38s;}header#mainHeader nav:hover li:nth-child(4) a { transition-delay: 0.42s;}header#mainHeader nav:hover li:nth-child(5) a { transition-delay: 0.46s;}header#mainHeader nav:hover li:nth-child(6) a { transition-delay: 0.5s;}header#mainHeader nav:hover li:nth-child(7) a { transition-delay: 0.54s;}header#mainHeader nav:hover li:nth-child(8) a { transition-delay: 0.58s;}</style></head><body> <header class="banner" id="mainHeader" role="banner"> <nav role="navigation"> <div class="top-header"> <div class="navBurger"> <div class="burger"></div> </div> </div> <!-- This part is the navigation generated by WordPress. --> <ul id="menu-vertical-menu" class="nav"> <li><a href="#">This menu</a></li> <li><a href="#">is built from</a></li> <li><a href="#">WP navigation</a></li> <li><a href="#">and only made</a></li> <li><a href="#">with custom</a></li> <li><a href="#">css !</a></li></ul> </nav> </header><h1> It's a<br>kind of<br>maaaagic !</h1></body></html>

4. By Mina D

Made by Mina D. CSS Vertical menu with tooltips. Source

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title> <style>* { box-sizing: border-box;}body { margin: 0; padding: 0; font-family: sans-serif; font-size: 1rem; line-height: 1.7rem; color: #222;}a { text-decoration: none;}nav { margin: 0; padding: 0;}.mainNav { position: fixed; height: 100%; width: 10%; max-width: 100px; min-width: 50px; background: #333333; color: #ffffff;}ul { list-style: none; padding: 0; margin: 0;}.mainMenu .menuItem { position: relative; width: 100%; height: 100px; border-bottom: solid 1px #555555; text-align: center;}.mainMenu .menuItem a { color: #ffffff; font-size: 2rem; line-height: 100px; display: block;}.mainMenu .menuItem a:hover{ background: #444;}.tooltip { position: absolute; z-index: 999; left: 100%; bottom: 50%; transform: translateY(50%); background: #444; padding: 0.75rem; border-radius: 0.5rem; font-family: sans-serif; font-size: 1rem; text-transform: uppercase; color: #dddddd; margin-left: 0; opacity: 0; visibility: hidden; transition: all 0.35s;}.tooltip::before { content: ""; width: 0; height: 0; border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid transparent; border-right: 0.5rem solid #444; position: absolute; left: -0.5rem;}.menuItem:hover .tooltip { opacity: 1; visibility: visible; margin-left: 0.5rem; z-index: 100;}main { position: absolute; margin-left: 10%; width: 70%; z-index: -1;}p { margin-top: 0;}.mainContent { position: absolute; left: 2rem; top: 0; visibility: hidden; opacity: 0; margin-left: 0; margin-top: 2rem; transition: all 0.35s;}.mainContent:target { visibility: visible; opacity: 1; margin-left: 1rem; transition: all 0.35s;}</style></head><body> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"><nav class="mainNav"> <ul class="mainMenu"> <li class="menuItem"><a href="#home"><i class="fa fa-home" aria-hidden="true"></i></a><span class="tooltip">Home</span></li> <li class="menuItem"><a href="#about"><i class="fa fa-user" aria-hidden="true"></i></a><span class="tooltip">About</span></li> <li class="menuItem"><a href="#portfolio"><i class="fa fa-eye" aria-hidden="true"></i></a><span class="tooltip">Portfolio</span></li> <li class="menuItem"><a href="#contact"><i class="fa fa-envelope" aria-hidden="true"></i></a><span class="tooltip">Contact</span></li> </ul></nav><main> <section id="home" class="mainContent"> <h1>Home</h1> <p>Lorem ipsum</p> </section> <section id="about" class="mainContent"> <h1>About</h1> <p>Lorem ipsum.</p> </section> <section id="portfolio" class="mainContent"> <h1>Portfolio</h1> <p>Lorem ipsum</p> <p>Lorem ipsum</p> </section> <section id="contact" class="mainContent"> <h1>Contact</h1> <p>Lorem ipsum</p> </section> </main></body></html>

5. By Jitendra

Made by Jitendra. Pure CSS3 Vertical menu with nice hover effect. Source

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title> <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css'> <style>ul{margin:0px;padding:0px;list-style-type:none;-webkit-backface-visibility: hidden; backface-visibility: hidden; }.var_nav{position:relative;background:#ccc; width:300px;height:70px;margin-bottom:5px;}.link_bg{ width:70px; height:70px; position:absolute; background:#E01B6A; color:#fff; z-index:2;}.link_bg i{ position:relative;}.link_title{position:absolute;width:100%;z-index:3;color:#fff;}.link_title:hover .icon{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg); }.var_nav:hover .link_bg{width:100%;background:#E01B6A;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out; }.var_nav:hover a{font-weight:bold;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; transition:all .5s ease-in-out; }.icon{position:relative;width:70px;height:70px;text-align:center;color:#fff;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; -ms-transition:all .5s ease-in-out; float:left;transition:all .5s ease-in-out; float:left; }.icon i{top:22px;position:relative;}a{display:block;position:absolute;float:left;font-family:arial;color:#fff;text-decoration:none;width:100%;height:70px;text-align:center;}span{margin-top:25px;display:block;}</style></head><body> <nav> <UL> <li class="var_nav"> <div class="link_bg"></div> <div class="link_title"> <div class=icon> <i class="icon-mobile-phone icon-2x"></i> </div> <a href="#"><span>About Us</span></a> </div> </li> <li class="var_nav"> <div class="link_bg"></div> <div class="link_title"> <div class=icon> <i class="icon-lightbulb icon-2x"></i> </div> <a href="#"><span>Ideas</span></a> </div> </li> <li class="var_nav"> <div class="link_bg"></div> <div class="link_title"> <div class=icon> <i class="icon-wrench icon-2x"></i> </div> <a href="#"><span>Services</span></a> </div> </li> <li class="var_nav"> <div class="link_bg"></div> <div class="link_title"> <div class=icon> <i class="icon-briefcase icon-2x"></i> </div> <a href="#"><span>Marketing</span></a> </div> </li> </UL></nav></body></html>

6. By Abhishek Patel

Made by Abhishek Patel. Vertical Multi dropdown menu with arrow animation and hover effect. Source

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title><style>body{background: #D2D2D2;}#nav{}ul#navbar{list-style-type: none;}ul#navbar li{display: block;width: 180px;background: #002B55;border: 1px solid #4B4B4B;border-left: 4px solid #808000;}ul#navbar li a{display: block;color: #ffffff;font-size: 1.2em;padding: 20px 0 10px 40px;text-decoration: none;transition:all 0.3s ease;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;}ul#navbar li a:hover{padding-left: 50px;background: #008080;}ul#navbar > li > ul{display: none;}ul#navbar > li:nth-child(2):hover > ul{position: absolute;display: block;left: 242px;top: 71px;}ul#navbar > li:nth-child(2) > ul > li{margin-left: -50px;background: #D50000;border: 1px solid #4B4B4B;border-left: 2px solid #002B55;}ul#navbar > li:nth-child(2) > ul > li > a:hover{padding-left: 50px;background: #800055;border-left: 4px solid #808000;}ul#navbar > li:nth-child(3):hover > ul{position: absolute;display: block;left: 242px;top: 122px;}ul#navbar > li:nth-child(3):hover > ul > li{margin-left: -50px;background: #D50000;border: 1px solid #4B4B4B;border-left: 2px solid #002B55;}ul#navbar > li:nth-child(3):hover > ul > li> a:hover{padding-left: 45px;background: #00AAFF;border-left: 4px solid #808000;}ul#navbar > li:nth-child(3) > ul > li:first-child > a:hover{background: #00AAFF;}ul#navbar > li:nth-child(3) > ul > li:nth-child(2)> a:hover{background: #002AD5;}ul#navbar > li:nth-child(3) > ul > li:nth-child(3)> a:hover{background: #F74D22;}ul#navbar > li:nth-child(3) > ul > li:last-child> a:hover{background: #2222F7;}ul#navbar > li > ul > li > ul{display: none;}ul#navbar > li > ul > li:first-child:hover > ul{position: absolute;display: block;left: 182px;top: 0px;}ul#navbar > li > ul > li:first-child > ul > li{margin-left: -50px;background: #00AA80;border: 1px solid #4B4B4B;border-left: 2px solid #002B55;}ul#navbar > li > ul > li:nth-child(2):hover > ul{position: absolute;display: block;left: 182px;top: 53px;}ul#navbar > li > ul > li:nth-child(2) > ul > li{margin-left: -50px;background: #D58000;border: 1px solid #4B4B4B;border-left: 2px solid #002B55;}ul#navbar > li > ul > li:nth-child(3):hover > ul{position: absolute;display: block;left: 182px;top: 107px;}ul#navbar > li > ul > li:nth-child(3) > ul > li{margin-left: -50px;background: #D50055;border: 1px solid #4B4B4B;border-left: 2px solid #002B55;}ul#navbar > li > ul > li > ul > li > a:hover{padding-left: 50px;background: #00802B;border-left: 4px solid #D50000;}ul#navbar > li > ul > li > ul > li:last-child:hover > a:hover{padding-left: 30px;background: #00802B;border-left: 4px solid #D50000;}ul#navbar > li > ul > li > ul > li > ul{display: none;}ul#navbar > li > ul > li > ul > li:last-child:hover > ul{background: red;position: absolute;display: block;left: 182px;top: 215px;}ul#navbar > li > ul > li > ul > li > ul > li{margin-left: -50px;background: #550055;border: 1px solid #4B4B4B;border-left: px solid #002B55;}ul#navbar > li > ul > li > ul > li:last-child:hover > ul > li >a:hover{padding-left: 50px;background: #FF5500;border-left: 4px solid #FF00D5;}#arrow{font-size: 1em;margin-left: 40px;animation: arrow 2s infinite ease;-webkit-animation: arrow 2s infinite ease;-moz-animation: arrow 2s infinite ease;-o-animation: arrow 2s infinite ease;}@keyframes arrow{0%{margin-left: 40px;}50%{margin-left: 30px;}100%{margin-left: 40px;}}@-webkit-keyframes arrow{0%{margin-left: 40px;}50%{margin-left: 30px;}100%{margin-left: 40px;}}@-moz-keyframes arrow{0%{margin-left: 40px;}50%{margin-left: 30px;}100%{margin-left: 40px;}}@-o-keyframes arrow{0%{margin-left: 40px;}50%{margin-left: 30px;}100%{margin-left: 40px;}}#det{position: absolute;top: 0;left: 500px;font-size: 4em;text-shadow: 2px 2px 10px #000000;}</style></head><body> <!DOCTYPE html><html><head><title>Heading</title></head><body><div id="nav"><ul id="navbar"><li><a href="#">Home</a></li><li><a href="#">Gallery<span id="arrow"> &rsaquo;&rsaquo;</span></a><ul><li><a href="#">Drop1<span id="arrow"> &rsaquo;&rsaquo;</span></a><ul><li><a href="#">Drop1 of 1</a></li><li><a href="#">Drop2 of 1</a></li><li><a href="#">Drop3 of 1</a></li><li><a href="#">Drop4 of 1</a></li><li><a href="#">Drop5 of 1</a></li></ul></li><li><a href="#">Drop2<span id="arrow"> &rsaquo;&rsaquo;</span></a><ul><li><a href="#">Drop1 of 2</a></li><li><a href="#">Drop2 of 2</a></li><li><a href="#">Drop3 of 2</a></li><li><a href="#">Drop4 of 2</a></li><li><a href="#">Drop5 of 2</a></li></ul></li><li><a href="#">Drop3<span id="arrow"> &rsaquo;&rsaquo;</span></a><ul><li><a href="#">Drop1 of 3</a></li><li><a href="#">Drop2 of 3</a></li><li><a href="#">Drop3 of 3</a></li><li><a href="#">Drop4 of 3</a></li><li><a href="#">Drop5 of 3<span id="arrow">&rsaquo;&rsaquo;</span></a><ul><li><a href="#">Level3</a></li><li><a href="#">Level3</a></li><li><a href="#">Level2</a></li><li><a href="#">Level3</a></li></ul></li></ul></li><li><a href="#">Drop4</a></li></ul></li><li><a href="#">Social<span id="arrow"> &nbsp;&nbsp;&rsaquo;&rsaquo;</span></a><ul><li><a href="#">Twitter</a></li><li><a href="#">Vkontakte</a></li><li><a href="#">Google Plus</a></li><li><a href="#">Facebook</a></li></ul></li><li><a href="#">Contact</a></li><li><a href="#">About Us</a></li></ul><span id="det">Vertical menu</span></div></body></html>

7. By Dwight Maskew

Made by Dwight Maskew. CSS Vertical Menu with Sub Navigation. Source

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title><style>* { font-family: "Segoe UI"; font-size: 18px; line-height: 1.68; padding: 0; margin: 0;}p,ul,li,div,nav { padding: 0; margin: 0;}body { margin: 20px;}nav { overflow: auto; position: relative; z-index: 2;}.menu { background-color: #0c8fff; min-width: 200px; float: left;}nav ul { list-style-type: none;}nav ul li a { padding: 10px 15px; display: block; color: #fff; text-decoration: none;}nav ul li a:hover { background-color: #007ee9;}nav ul li:hover > ul { left: 200px; -webkit-transition: left 200ms ease-in; -moz-transition: left 300ms ease-in; -ms-transition: left 300ms ease-in; transition: left 300ms ease-in;}nav ul li > ul { position: absolute; background-color: #333; top: 0; left: -200px; min-width: 200px; z-index: -1; height: 100%; -webkit-transition: left 200ms ease-in; -moz-transition: left 300ms ease-in; -ms-transition: left 300ms ease-in; transition: left 300ms ease-in;}nav ul li > ul li a:hover { background-color: #2e2e2e;}</style></head><body> <nav> <ul class="menu"> <li><a href="#">Step 1</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </li> <li><a href="#">Step 2</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul></li> <li><a href="#">Step 3</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul></li> <li><a href="#">Step 4</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </li> <li><a href="#">Step 5</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </li> <li><a href="#">Step 6</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </li> </ul></nav></body></html>

8. By Jerome Devillers

Made by Jerome Devillers. A simple vertical menu. Source

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title><style>body { background: #3f3f3f; background: url("https://www.toptal.com/designers/subtlepatterns/patterns/ep_naturalblack.png"); padding: 0; margin: 0;}.menu-container { height: 100vh; overflow-y: scroll; width: 100px; background: #000; float: right;}.menu-container div { width: 100%;}.menu-container div ul { padding: 0; margin: 0;}.menu-container div ul li { padding: 1em 0; width: 100%; text-align: center; display: block; color: #ece6c2;}.menu-container div ul li.active, .menu-container div ul li:hover { width: 100%; padding: 1em 0; text-align: center; display: block; background: #ece6c4; transition: all 0.2s ease-in;}.menu-container div ul li.active a, .menu-container div ul li:hover a { color: #d96f57;}.menu-container div ul li a { color: #ece6c2; text-decoration: none; font-family: Arial;}.menu-container div ul span { text-transform: uppercase; display: block; text-align: center; font-weight: bold;}.menu-container div ul span.month { font-size: 15px;}.menu-container div ul span.year { font-size: 12px;}</style></head><body> <div class="menu-container"><div><ul><li><a href="#"><span class="month">AUG</span><span class="year">1914</span></a></li><li><a href="#"><span class="month">APR</span><span class="year">1915</span></a></li><li class="active"><a href="#"><span class="month">JUL</span><span class="year">1916</span></a></li><li><a href="#"><span class="month">NOV</span><span class="year">1918</span></a></li><li><a href="#"><span class="month">DEC</span><span class="year">1921</span></a></li><li><a href="#"><span class="month">NOV</span><span class="year">1925</span></a></li><li><a href="#"><span class="month">OCT</span><span class="year">1929</span></a></li><li><a href="#"><span class="month">DEC</span><span class="year">1931</span></a></li><li><a href="#"><span class="month">JUL</span><span class="year">1936</span></a></li><li><a href="#"><span class="month">SEP</span><span class="year">1939</span></a></li><li><a href="#"><span class="month">J-D</span><span class="year">1940</span></a></li><li><a href="#"><span class="month">-</span><span class="year">1941</span></a></li><li><a href="#"><span class="month">AUG</span><span class="year">1942</span></a></li></ul></div></div></body></html>

9. By neelam

Made by neelam. Responsive Fix vertical menu. Source

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title><style>@charset "UTF-8";.nav-side-menu { overflow: auto; font-family: verdana; font-size: 12px; font-weight: 200; background-color: #2e353d; position: fixed; top: 0px; width: 300px; height: 100%; color: #e1ffff;}.nav-side-menu .brand { background-color: #23282e; line-height: 50px; display: block; text-align: center; font-size: 14px;}.nav-side-menu .toggle-btn { display: none;}.nav-side-menu ul,.nav-side-menu li { list-style: none; padding: 0px; margin: 0px; line-height: 35px; cursor: pointer;}.nav-side-menu ul :not(collapsed) .arrow:before,.nav-side-menu li :not(collapsed) .arrow:before { font-family: FontAwesome; content: ""; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right;}.nav-side-menu ul .active,.nav-side-menu li .active { border-left: 3px solid #d19b3d; background-color: #4f5b69;}.nav-side-menu ul .sub-menu li.active,.nav-side-menu li .sub-menu li.active { color: #d19b3d;}.nav-side-menu ul .sub-menu li.active a,.nav-side-menu li .sub-menu li.active a { color: #d19b3d;}.nav-side-menu ul .sub-menu li,.nav-side-menu li .sub-menu li { background-color: #181c20; border: none; line-height: 28px; border-bottom: 1px solid #23282e; margin-left: 0px;}.nav-side-menu ul .sub-menu li:hover,.nav-side-menu li .sub-menu li:hover { background-color: #020203;}.nav-side-menu ul .sub-menu li:before,.nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: ""; display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle;}.nav-side-menu li { padding-left: 0px; border-left: 3px solid #2e353d; border-bottom: 1px solid #23282e;}.nav-side-menu li a { text-decoration: none; color: #e1ffff;}.nav-side-menu li a i { padding-left: 10px; width: 20px; padding-right: 20px;}.nav-side-menu li:hover { border-left: 3px solid #d19b3d; background-color: #4f5b69; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}@media (max-width: 767px) { .nav-side-menu { position: relative; width: 100%; margin-bottom: 10px; height: inherit; } .nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; background-color: #ffffff; color: #000; width: 40px; text-align: center; } .brand { text-align: left !important; font-size: 22px; padding-left: 20px; line-height: 50px !important; }}@media (min-width: 767px) { .nav-side-menu .menu-list .menu-content { display: block; }}body { margin: 0px; padding: 0px;}</style></head><body><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" ><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"><div class="nav-side-menu"> <div class="brand">Brand Logo</div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li> <a href="#"> <i class="fa fa-dashboard fa-lg"></i> Dashboard </a> </li> <li data-toggle="collapse" data-target="#products" class="collapsed active"> <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="products"> <li class="active"><a href="#">CSS3 Animation</a></li> <li><a href="#">General</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Tabs & Accordions</a></li> <li><a href="#">Typography</a></li> <li><a href="#">FontAwesome</a></li> <li><a href="#">Slider</a></li> <li><a href="#">Panels</a></li> <li><a href="#">Widgets</a></li> <li><a href="#">Bootstrap Model</a></li> </ul> <li data-toggle="collapse" data-target="#service" class="collapsed"> <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="service"> <li>New Service 1</li> <li>New Service 2</li> <li>New Service 3</li> </ul> <li data-toggle="collapse" data-target="#new" class="collapsed"> <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="new"> <li>New New 1</li> <li>New New 2</li> <li>New New 3</li> </ul> <li> <a href="#"> <i class="fa fa-user fa-lg"></i> Profile </a> </li> <li> <a href="#"> <i class="fa fa-users fa-lg"></i> Users </a> </li> </ul> </div></div></body></html>

10. By nikhil

Made by nikhil. Vertical icons sidebar navigation menu with tooltips. Source

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title> <style>@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css");.menu { position: fixed; top: 0; left: 0; height: 100%; list-style-type: none; margin: 0; padding: 0; background: #fff4f5;}.menu li a{ display:block; height:em; width:5em; text-indent:-500em; line-height:5em; text-align:center; color: #ff5c62; background: #fff4f5; position: relative; border-bottom: 1px solid #ffe2e3; transition: background 0.3s ease-in-out;}.menu li a:before { font-family: FontAwesome; speak: none; text-indent: 0em; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 1.4em;}.menu li a.search:before { content: "\f002";}.menu li a.archive:before { content: "\f187";}.menu li a.pencil:before { content: "\f040";}.menu li a.contact:before { content: "\f003";}.menu li a.about:before { content: "\f007";}.menu li a.home:before { content: "\f015";}.menu li a:hover{ background: #ff5c62; color: #fff;}.menu li.current a { background: #ff5e5e; color: #fff;}.menu li a.active { background: #ff5e5e; color: #fff;}.menu li a.active:after{ position:absolute; left:5em; top:0; content:""; border:2.5em solid transparent; border-left-color:#ff5c62; border-width: 2.5em 1em}.menu li{ position:relative;}.menu li:after{ content: attr(title); position:absolute; left:5em; top:0; height:5em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-transform:uppercase; background:#ff5c62; padding:2em; transition: all 0.3s ease-in-out; visibility:hidden; opacity:0;}.menu li:hover:after{ visibility:visible; opacity:1;}@media screen and (max-height: 34em){ .menu li{ font-size:70%; }}</style></head><body> <ul class="menu"> <li title="home"><a href="#" class="home">home</a></li> <li title="search"><a href="#" class="search">search</a></li> <li title="pencil"><a href="#" class="pencil">pencil</a></li> <li title="about"><a href="#" class="active about">about</a></li> <li title="archive"><a href="#" class="archive">archive</a></li> <li title="contact"><a href="#" class="contact">contact</a></li></ul></body></html>

11. By Ahmed beheiry

Made by Ahmed beheiry. Vertical menu with simple hover effect. Source

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title> <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Indie+Flower'><style>/** start of the vertical list **/* {box-sizing: border-box;}html, body {height:100%;}body {background: #eee;}.vertical-list { padding: 0; margin:0; text-align:center; height:100%;}ul { list-style:none; padding: 0; margin:0; background:#1C6FA0; width:100px; height:100%; text-align:center;}ul li { height:20%; width:100%; border-bottom:1px solid #4398CA; line-height:110px; transition:all 300ms ease-in-out;}ul li a { color:#fff; font-size:40px; display:block;}ul li:hover { background:#4398CA; border-left:4px solid #1C6FA0; border-top:4px solid #1C6FA0; cursor:pointer;}.tooltip { position:relative;}.tooltip:hover:after { background:#333; color:#fff; border-top-right-radius: 15px; border-bottom-right-radius: 15px; bottom: -1px; color: #fff; width:90px; height:100%; content: attr(data-attr); left: 96px; position: absolute; z-index: 98; font-size:20px; font-weight:700; text-transform: capitalize; font-family: 'Indie Flower', cursive;}/** end of the vertical list **/</style></head><body> <div class="vertical-list"> <ul> <!-- start of the list ul --> <li class="tooltip" data-attr="home"><a href="#"><i class="fa fa-home"></i></a></li> <li class="tooltip" data-attr="gallery"><a href="#"><i class="fa fa-image"></i></a></li> <li class="tooltip" data-attr="team"><a href="#"><i class="fa fa-group"></i></a></li> <li class="tooltip" data-attr="e-mail"><a href="#"><i class="fa fa-envelope"></i></a></li> <li class="tooltip" data-attr="mobile"><a href="#"><i class="fa fa-mobile"></i></a></li> </ul> <!-- end of the list ul --></div> <!-- end of the vertical list div --></body></html>

12. By Angela Velasquez

Made by Angela Velasquez. Pure css vertical menu. Source

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title><style>body{ background: #A2E88C;}.menu{ display: block; position: relative; margin: 10px; height: 500px; width: 120px; overflow: hidden;}.menu ul{ display: block; list-style:none; text-align:center; padding: 0; margin: 0;}.menu ul li{ display: block; background: #333; border-bottom: 1px solid #222; border-top: 1px solid #444; font-family: sans-serif; width: 100px; height: 100px;}.menu ul li.tab-fill{ display: none;}.menu ul li a{ display: block; color: #AAA; text-decoration: none; padding-top: 15px; transition: 0.25s;}.menu ul li.selected a{ color: #EEE;}.menu ul li.selected a:hover{ color: #EEE; font-size: 1em;}.menu ul li a:hover{ color: #FFF; font-size: 1.05em;}.menu ul li .icon{ display: block; line-height: 1.75em; font-size: 2.5em; font-weight: lighter; text-shadow: -1px -1px 0px #222;}.menu ul li:after{ width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; top: 40px; right: 12px; position: absolute; content: ""; z-index: 999;}li.selected:after { border-left: 8px solid #333;}.menu ul.to-change-arrows { position: absolute; bottom: 0; height: 100px; width: 100px; overflow: hidden; border-top: 1px solid #222;}.menu ul.to-change-arrows li{ position: relative; height: 100px; width: 100px; background: #444; }.menu ul.to-change-arrows li span.icon{ color: #EEE; line-height: 2.15em;}.menu input[type=checkbox] { position: absolute; top: -9999px; left: -9999px;} input#toggle[type=checkbox]{ display:none; }label { position: absolute; height: 100px; width: 100px; display: block; bottom: 0; z-index: 9999; cursor: pointer;}label:hover { background: #FFF; opacity: 0.15;}/** Magic click trick css **/.to-change { transition: top 0.5s; -webkit-transition: top 0.5s; }input[type=checkbox]:checked ~ label { bottom: auto; top: 0;}input[type=checkbox]:checked ~ .to-change { position: absolute; left: auto; top: -310px;}input[type=checkbox]:checked ~ .to-change li.tab-fill { display: block;}input[type=checkbox]:checked ~ .to-change-arrows { bottom: auto; top: 0; border: none; border-bottom: 1px solid #222;}input[type=checkbox]:checked ~ .to-change-arrows li.more{ display:none;}</style></head><body> <nav class="menu"> <input type="checkbox" id="toggle"> <label for="toggle"></label> <ul class="to-change"> <li class="selected"><a href="#"><span class="icon">1</span></a></li> <li><a href="#"><span class="icon">2</span></a></li> <li><a href="#"><span class="icon">3</span></a></li> <li class="tab-fill"></li> <li><a href="#"><span class="icon">4</span></a></li> <li><a href="#"><span class="icon">5</span></a></li> <li><a href="#"><span class="icon">6</span></a></li> <li><a href="#"><span class="icon">7</span></a></li> </ul> <ul class="to-change-arrows"> <li class="tab-more more"><span class="icon icon-desktop">+</span></li> <li class="tab-more less"><span class="icon icon-desktop">-</span></li> </ul> </nav></body></html>

13. By Noman

Made by Noman. Vertical menu with minimal hover effect. Source

(Video) 90 Second Website Builder - Version 10 - The Carousel Tool

<!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title></title> <link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css' /><link href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet" /><style>body {background:url(https://i.imgur.com/j7qmtFm.png) scroll center center;margin:0;padding:0;font-family:Quicksand;font-weight:700;}ul.form {position:absolute; left:120px;background:#fff;width:143px; z-index:10;margin:100;padding:0;list-style: none;overflow:hidden;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.1);}.form li a {width:225px;padding-left:15px;height:40px;line-height:40px;display:block;overflow:hidden;position:relative;text-decoration:none;text-transform:uppercase;font-size:12px;color:#686868;-webkit-transition:all 0.1s linear;-moz-transition:all 0.1s linear;-o-transition:all 0.1s linear;transition:all 0.2s linear;}.form li a:hover {background:#efefef;}.form li a.profile {border-left:5px solid #008747;}.form li a.messages {border-left:5px solid #fecf54;}.form li a.settings {border-left:5px solid #cf2130;}.form li a.logout {border-left:5px solid #FF3385;}.form li a.western {border-left:5px solid #0099FF;}.form li a.fantasy {border-left:5px solid #66FF99;}.form li:first-child a:hover, .form li:first-child a {-webkit-border-radius: 5px 5px 0 0;-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}.form li:last-child a:hover, .form li:last-child a {-webkit-border-radius: 0 0 5px 5px;-moz-border-radius: 0 0 5px 5px;border-radius: 0 0 5px 5px;}.form li a:hover i {color:#ea4f35;}.form i {margin-right:15px;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}.form em {font-size: 10px;background: #ea4f35;padding: 3px 5px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;font-style: normal;color: #fff;margin-top: 17px;margin-right: 15px;line-height: 10px;height: 10px;float:right;}.form li.selected a {background:#efefef;}h1 {color:#fff;margin:0 auto;margin-top:120px;margin-bottom:40px;font-size:30px;width:300px;text-align:center;}</style></head><body><h1>Menu</h1><ul class="form"><li><a class="profile" href="www.google.com"> <i class="icon-user"></i>Home</a></li><li><a class="messages" href="#"><i class="icon-envelope-alt"></i>Adventure<em>5</em></a></li><li><a class="settings" href="#"> <i class="icon-cog"></i>Horror</a></li><li><a class="logout" href="#"> <i class="icon-signout"></i>SciFi</a></li><li><a class="western" href="#"> <i class="icon-signout"></i>Western</a></li><li><a class="fantasy" href="#"> <i class="icon-signout"></i>Fantasy</a></li></ul></body></html>

Videos

1. The Carousel Tool in 90 Second Website Builder
(Greg Hughes)
2. Navigation Bar in 90 Second Website Builder
(Greg Hughes)
3. The Text Menu in 90 Second Website Builder
(Greg Hughes)
4. The Menu Bar Tool in 90 Second Website Builder
(Greg Hughes)
5. WYSIWYG Web Builder 12+. How to create a Popup form with timer (Newsletter) (spanish)
(Hernán Pena)
6. Responsive Design Tips & Tricks - Video #4 - 90 Second Website Builder
(Greg Hughes)
Top Articles
Latest Posts
Article information

Author: Terence Hammes MD

Last Updated: 03/20/2023

Views: 6095

Rating: 4.9 / 5 (69 voted)

Reviews: 92% of readers found this page helpful

Author information

Name: Terence Hammes MD

Birthday: 1992-04-11

Address: Suite 408 9446 Mercy Mews, West Roxie, CT 04904

Phone: +50312511349175

Job: Product Consulting Liaison

Hobby: Jogging, Motor sports, Nordic skating, Jigsaw puzzles, Bird watching, Nordic skating, Sculpting

Introduction: My name is Terence Hammes MD, I am a inexpensive, energetic, jolly, faithful, cheerful, proud, rich person who loves writing and wants to share my knowledge and understanding with you.