Like horizontal 3D menu now I will show you how to add vertical 3D menu in blogger so if someone likes vertical 3D menu he can add it, this menu is similar to horizontal 3D menu except color and design. It also works on CSS. You can see a demo of vertical 3D menu below. At the end of t his post I will show you how can you change color of this menu. Follow below steps to add this menu in your blog:
Step 1: Go to blogger dashboard and click on layout in the menu on left side.
Step 2: Click on add a gadget and scroll down to Html/javascript.
Step 3: Copy the below cod eand paste it in Html/javascript window:
<nav class="mainNav">
<ul>
<li><a href="#" data-title="Home">Home</a></li>
<li><a href="#" data-title="About">About</a></li>
<li><a href="#" data-title="Clients">Clients</a></li>
<li><a href="#" data-title="Contact Us">Contact</a></li>
<li><a href="#" data-title="Sitemap">Sitemap</a></li>
<li><a href="#" data-title="Feedback">Feedback</a></li>
</ul>
</nav>
<style>
.mainNav {
float: left;
transform: perspective(500px);
transform-style: preserve-3d;
}
.mainNav li{
padding:0px;
}
.mainNav ul {
list-style: none;
padding: 0px;
}
.mainNav a {
background-color: #fafafa;
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%);
backface-visibility: hidden;
box-shadow: inset 0 0 .25em hsla(0,0%,0%,.1),
inset 0 0 1.5em hsla(0,0%,0%,.25);
color: #322;
display: block;
font: bold 1em/3 sans-serif;
padding: 0 1.5em;
position: relative;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
transition: .5s;
transform-origin: 50% 0;
transform-style: preserve-3d;
width: 6em;
}
.mainNav a:after {
background-color: inherit;
background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
linear-gradient(-72deg, hsla(0,0%,100%,.05) 50%, transparent 50%),
linear-gradient(hsla(0,0%,0%,.25), hsla(0,0%,0%,.25));
box-shadow: inset 0 0 .25em hsla(0,0%,0%,.2),
inset 0 0 1.5em hsla(0,0%,0%,.4);
bottom: 0;
color: #fff;
content: attr(data-title);
left: 100%;
line-height: 3;
position: absolute;
top: 0;
transform: rotateY(90deg);
transform-origin: 0 0;
width: 100%;
}
.mainNav a:before {
background-color: inherit;
background-image: linear-gradient(hsla(0,0%,100%,.07), hsla(0,0%,0%,.07)),
linear-gradient(hsla(0,0%,0%,.5), hsla(0,0%,0%,.5));
bottom: 0;
content: '';
height: 9em;
left: 100%;
position: absolute;
top: 0;
transform-origin: 0 0;
width: 100%;
}
.mainNav li:nth-child(-n+2) a:before {
transform: rotateX(-90deg) translateX(-9em) translateZ(3em);
}
.mainNav li:nth-child(n+3) a:before {
transform: rotateX(-90deg) translateX(-9em);
}
.mainNav li:hover a {
transform: rotateY(-90deg) translateX(-4.5em) translateZ(4.5em);
z-index: 10;
}
</style>
Step 4: Click on save and you are done:
Customization
Follow the horizontal menu customization to add link to tabs, new tab or remove an existing tab/button. To change color of menu replace code of color in above piece of code which is highlighted with yellow color( background-color: #fafafa;).
If you have any question ask me in comments or contact me. Follow and subscribe to get latest updates. Share this post with others and help 101Helper grow.
Search tags: 101helper blogger menus, how to add 3D menu in blogger, Unique blogger menus, Menus for blogger, 3D vertical menu for blogger, 101Helper blogger menus tutorials.
Rate This Article
Thanks for reading: Vertical 3D css menu for Blogger blog, Stay tune to get latest Blogging Tips.