How to create Vertical text/link navigation menu
How to:
Step 1: First create a navigation class; and all positioning codes-
.nav {
position: relative;
float:right;
top: -3px;
}
Step 2: Here we design the nav’s li elements; with CSS3 transform: rotate(-90deg); width; text positioning and <li> positioning.
.nav ul li {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 100px;
overflow: hidden;
padding:5px 10px 10px 18px;
float: left;
background-color: #7f9db9;
text-align: left;
margin-left:-50px
}
Step 3: Now designing the ‘a link’ elements with font style, size, decoration and color.
.nav ul li a {
color: #fff;
text-decoration: none;
display: block;
font-family: 'Josefin Sans', sans-serif;
font-weight:500;
font-size:16px;
}
Step 4: Then individual color and hover color setting up for <li> elements with rgba color codes; we creating 5 link slot so setting up their color respectively with l1, l2, l3, l4 and l5 <li> classes.
.nav ul li.l1 {
background-color: rgba(243, 156, 18,0.65);
}
.nav ul li.l1:hover {
background-color: rgb(243, 156, 18);
}
.nav ul li.l2 {
background-color: rgba(207, 0, 15,0.65);
}
.nav ul li.l2:hover {
background-color: rgb(207, 0, 15);
}
.nav ul li.l3{
background-color: rgba(54, 215, 183,0.65)
}
.nav ul li.l3:hover {
background-color: rgb(54, 215, 183);
}
.nav ul li.l4{
background-color: rgba(25, 181, 254,0.65)
}
.nav ul li.l4:hover {
background-color: rgb(25, 181, 254);
}
.nav ul li.l5{
background-color: rgba(65,117,160,0.65)
}
.nav ul li.l5:hover {
background-color: rgb(65,117,160);
}
Step 5: It’s time to call ready CSS classes to HTML; So I’m using a <div> to call .nav you may call it under <nav> for integrating design to HTML5. Adding <ul>, <li> and <a> elements. And finally finishing the design.
<div class="nav">
<ul>
<li class='l1'><a href="#">Home</a></li>
<li class='l2'><a href="#">Blogger</a></li>
<li class='l3'><a href="#">Wordpress</a></li>
<li class='l4'><a href="#">About</a></li>
<li class='l5'><a href="#">Contact</a></li>
</ul>
</div>
Step 6: Place links in "#" and change anchor texts as you like. Change color code of <li> with your desired rgba color. And here are the full codes of this vertical text style navigation menu:
<!--crawlist.net HTML starts-->
<div class="nav">
<ul>
<li class='l1'><a href="#">Home</a></li>
<li class='l2'><a href="#">Blogger</a></li>
<li class='l3'><a href="#">Wordpress</a></li>
<li class='l4'><a href="#">About</a></li>
<li class='l5'><a href="#">Contact</a></li>
</ul>
</div>
<!--crawlist.net HTML ends-->
<style>/*crawlist.net CSS starts*/
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
.nav {
position: relative;
float:right;
top: -3px;
}
.nav ul li {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 100px;
overflow: hidden;
padding:5px 10px 10px 18px;
float: left;
background-color: #7f9db9;
text-align: left;
margin-left:-50px
}
.nav ul li a {
color: #fff;
text-decoration: none;
display: block;
font-family: 'Josefin Sans', sans-serif;
font-weight:500;
font-size:16px;
}
.nav ul li.l1 {
background-color: rgba(243, 156, 18,0.65);
}
.nav ul li.l1:hover {
background-color: rgb(243, 156, 18);
}
.nav ul li.l2 {
background-color: rgba(207, 0, 15,0.65);
}
.nav ul li.l2:hover {
background-color: rgb(207, 0, 15);
}
.nav ul li.l3{
background-color: rgba(54, 215, 183,0.65)
}
.nav ul li.l3:hover {
background-color: rgb(54, 215, 183);
}
.nav ul li.l4{
background-color: rgba(25, 181, 254,0.65)
}
.nav ul li.l4:hover {
background-color: rgb(25, 181, 254);
}
.nav ul li.l5{
background-color: rgba(65,117,160,0.65)
}
.nav ul li.l5:hover {
background-color: rgb(65,117,160);
}
/*crawlist.net CSS ends*/</style>
Compatibility:
- This menu is compatible with all latest version of web browsers.
