In my recent post I have shared floating vertical menu for blogger and before that I have shared many type of menus which are stylish, useful, responsive and easy to use. All blogger menus are shared to help those blogger who don't know how to add a menu in blogger as blogger doesn't provide any option to add a menu directly so blogger have to add menu from other sites, so here almost any kind of can be found and added to blog by following step by step tutorial. After sharing different menus I am going to share a new, unique, responsive and neat menu.
Its a 3D menu. It have cool effect that is when a tab/button is hovered with mouse it spins and shows the other dimension. It is a unique menu and I am quite sure that you haven't seen it before, you can see a demo below:
In above demo you can see its 3D design, it is a pure css menu. Javascript isn't used to make 3D effect in it. You might have noticed the text color in white but on hover it becomes dull, you can change its text hover color and also menu color. I will show you how to customize this menu at the end of this post. After sharing horizontal 3D menu I will also share a vertical 3D menu, so lets start! follow below steps to add this menu to your blog:
Adding Horizontal 3D menu in blogger:
Step 1: Go to blogger dashboard.
Step 2: Select layout in menu on left side.
Step 3: Click on add a gadget and scroll down to Html/javascript.
Step 4: Copy below code and paste it into Html/javascript window:
<div id="cssmenu" class="dropdown">
<ul>
<li class="active"><a href="#" data-title="Home">Home</a></li>
<li><a href="#" data-title="Product 1">Product 1</a></li>
<li><a href="#" data-title="Product 2">Product 2</a></li>
<li><a href="#" data-title="Company">Company</a></li>
<li><a href="#" data-title="Contact">Contact</a></li>
<li><a href="#" data-title="About">About</a></li>
<li><a href="#" data-title="Sitemap">Sitemap</a></li>
</ul>
</div>
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
font-family:Trebuchet Ms;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
font-family: Raleway, sans-serif;
line-height: 1;
}
#cssmenu > ul {
background: #3db2e1;
}
#cssmenu > ul > li {
float: left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 20px;
font-size: 14px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
background: #3db2e1;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#cssmenu > ul > li.active > a {
color: #dff2fa;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
color: #dff2fa;
-webkit-transform: rotateX(90deg) translateY(-23px);
-moz-transform: rotateX(90deg) translateY(-23px);
transform: rotateX(90deg) translateY(-23px);
-ms-transform: none;
}
#cssmenu > ul > li > a::before {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 16px 20px;
color: #dff2fa;
background: #19799f;
content: attr(data-title);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-ms-transform: translateY(- -18px);
}
#cssmenu > ul > li:hover > a::before,
#cssmenu > ul > li > a:hover::before {
background: #3db2e1;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li:hover > a,
#cssmenu.small-screen > ul > li > a:hover {
color: #dff2fa;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-ms-transform: none;
}
#cssmenu.small-screen > ul > li > a::before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 16px 20px;
cursor: pointer;
font-size: 14px;
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #3db2e1;
}
#cssmenu.small-screen #menu-button:after {
content: "";
position: absolute;
right: 20px;
top: 17px;
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 22px;
height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
border-top: 2px solid #dff2fa;
border-bottom: 2px solid #dff2fa;
}
#cssmenu.small-screen #menu-button:before {
content: "";
position: absolute;
right: 20px;
top: 27px;
display: block;
width: 22px;
height: 2px;
background: #ffffff;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
background: #dff2fa;
}
</style>
Step 5: Click on save and you are done!
Make sure to add gadget just below title of your blog otherwise it will show up in vertical form.
Customization:
You can customize everything in this menu if you have knowledge about CSS, I will show you only some common customization in this menu such as color of text before and after hovering with mouse and also buttons color before and after hovering with mouse. All you have to do is to replace the codes with desired color code. You can get code of a color by reading this post. I have highlighted different pieces in the code above to make difference between hover and active mode. To customize this menu read below, if you wish to customize something else you can ask me in comments or contact me.
This( background: #3db2e1;) represents the active color of the buttons, active color is that color which is displayed before hovering with mouse you can change it by replacing #3db2e1 with desired color code.
background: #3db2e1; represents hover color, it is the color which is shown when a tab/button is hovered with mouse.
color: #ffffff; is the color of text before hovering with mouse and color: #dff2fa; shows the color of text shown when a tab is hovered by mouse.
Adding or remove a button/tab:
I have shown only how to change color of text or button in the menu but another thing which makes confusion is adding or removing a tab. Because of being 3D menu this menu requires to add a name of menu 2 times the first one is shown before hovering and the other is shown when a tab/button is hovered with mouse. So here I want to make it clear that in 3D menu you have to add name of a tab/button 2 times otherwise it will not show text in the other dimension. So read below to learn how to add or remove a button from 3D menu:
To add a new button/tab in menu paste the below code below the button code where you want to show the button. For example if you want to add a button having title new buttonafter Home now you have to add below code after Home button code:
<li><a href="#" data-title="new button">new button</a></li>
The overall code should look like below code:
<div id="cssmenu" class="dropdown">
<ul>
<li class="active"><a href="#" data-title="Home">Home</a></li>
<li><a href="#" data-title="new button">new button</a></li>
<li><a href="#" data-title="Product 2">Product 2</a></li>
<li><a href="#" data-title="Company">Company</a></li>
<li><a href="#" data-title="Contact">Contact</a></li>
<li><a href="#" data-title="About">About</a></li>
<li><a href="#" data-title="Sitemap">Sitemap</a></li>
</ul>
</div>
Similarly to remove a button remove its code. For example to remove new button you have to remove <li><a href="#" data-title="new button">new button</a></li> from above code.
Always remember to type name of the tab 2 time otherwise it will not show name of button when it is hovered by mouse. Example is shown above.
Adding links:
To add a link to any button replace #(hash) with link.
Adding Vertical 3D menu in blogger:
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;).