Blogger menus

Horizontal 3D css menu for Blogger blog

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:



3D menu for blogger | 101helper blogger menus


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:



How To Add 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. 



How to add 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 button after 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. 


No comments:

Post a Comment