Barra di navigazione verticale





Codice HTML

<div class="vertical-menu">
 <a href="#" class="active">Home</a>
 <a href="#">Link 1</a>
 <a href="#">Link 2</a>
 <a href="#">Link 3</a>
 <a href="#">Link 4</a>
</div>



Codice CSS

<style type="text/css">
.vertical-menu {
 width: 200px;
 z-index: 1000; /* Set a width if you like */
}

.vertical-menu a { background-color: #eee; /* Grey background color / color: black; / Black text color / display: block; / Make the links appear below each other / padding: 12px; / Add some padding / text-decoration: none; / Remove underline from links */ }

.vertical-menu a:hover { background-color: #ccc; /* Dark grey background on mouse-over */ }

.vertical-menu a.active { background-color: #4CAF50; /* Add a green color to the "active/current" link */ color: white; } </style>