Pure css vertical menu

Developer
Angela Velasquez
Size
2,310 Kb
Views
64,768
  1. Pure css vertical menu Previews
  2. Pure css vertical menu HTML Codes
  3. Pure css vertical menu CSS Codes

How do I make an pure css vertical menu?

Using css trick with label and checkbox to simulate a click :) . What is a pure css vertical menu? How do you make a pure css vertical menu? This script and codes were developed by Angela Velasquez on 07 September 2022, Wednesday.

Pure css vertical menu Previews
IQ Test

Pure css vertical menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure css vertical menu</title> <link rel="stylesheet" href="css/style.css">
</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>

Pure css vertical menu - Script Codes CSS Codes

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;
}
Pure css vertical menu - Script Codes
Pure css vertical menu - Script Codes
Home Page Home
Developer Angela Velasquez
Username AngelaVelasquez
Uploaded September 07, 2022
Rating 3.5
Size 2,310 Kb
Views 64,768
Do you need developer help for Pure css vertical menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Angela Velasquez (AngelaVelasquez) Script Codes
Name
CSS - Cat on ride
CSS Shield
Dancing Pug
CSS Fruit Background - Bananas
Search animation on CSS
CSS Fruit Background - Pineapple
Layout Theme
Form with SVG radio buttons
CSS - Cat on a Plane
CSS - Cat on the Moon
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!