The title "Slide in menu for blogger" expresses that the menu which I am sharing in this post must slide in when a button is clicked or hovered. Well, this menu is a unique type of menu designed with awesome colors and has a responsive design. How does it work? it is a pure css menu and when it is added to a blog the trigger of menu takes its position automatically no matter what is the blog's width. The trigger holds the top right corner position of blog and floats when the page is scrolled and when the trigger is hovered the menu slides in and covers the whole blog's page, now the blog page looks like it has fade away now only menu options are shown but if the background is focused only a fading background could be seen. Its a very interesting menu for those blog's which have responsive design.
One more thing about this menu that rocks is when the menu covers the whole screen then on top left corner another trigger appears having a close icon. So when the close icon is hovered by mouse the menu is closed. Unfortunately I don't have a live demo so I am sharing an animated image below:
As it is a pure css menu so it is very easy to add this menu in your blog and you can customize it too. I will show you how to customize this menu in the end of this post. If you like this menu follow below steps to try it in your blog:
Step 1: Go to blogger dashboard and choose layout in the menu on left side.
Step 2: Click on add a gadget and find Html/javascript.
Step 3: Copy below code and paste it in the Html/javascript window:
<div class="menu-outer">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Product</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</nav>
</div>
<a class="menu-close" onclick="return true">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
</a>
<style>
/* Stuff I added */
.menu-outer:hover ~ .menu-close {
margin-right:-100px;
background-color:#444;
}
.menu-outer:hover .bar { background:rgba(100,200,240,.9); }
.menu-outer > nav ul { top:5%; }
.menu-outer {
overflow: hidden;
position: fixed;
top: 0;
font-family: 'Montserrat', serif;
z-index: 998;
width: 100%;
left: 100%;
margin-left: -100px;
height: 200%;
background: rgba(100,200,240,.9);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-outer:hover {
background: rgba(100,200,240,.98);
left: 0;
margin-left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu-icon {
z-index: 999;
position: absolute;
top: 58px;
left: 15px;
width: 30px;
pointer-events: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-icon .bar {
background: rgba(250,250,250,1);
width: 100%;
height: 5px;
margin: 0 0 5px;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
opacity: 0;
}
nav ul {
position:absolute;
width:100%;
padding: 0;
left: 10%;; /*prevents possible click when not oppened*/
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
.menu-outer:hover > nav ul {
left: 0;
}
nav li {
list-style:none;
text-align: center;
text-transform: uppercase;
}
nav li a {
font-size: 2em;
color: #fff;
text-decoration: none;
margin: 0 auto;
padding: 20px;
display:block;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
nav li a:hover {
color:#fafafa;
text-decoration:none;
}
@media screen and (max-width: 600px), screen and (max-height: 600px) {
nav ul {font-size:.75em;}
nav ul a {padding: 10px;}
}
.menu-close {
z-index: 9999;
position: fixed;
top: 0;
right: 100%;
width: 200px;
height: 200px;
background: rgba(250,130,70,1);
cursor: pointer;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-close .menu-icon {
right: 15px; left: auto;top: 68px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-close .bar {
background: rgba(250,250,250,1);
width: 100%;
height: 5px;
position:absolute;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
}
.menu-close .bar:first-child {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-close .bar:last-child {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
</style>
Step 4: Replace links of tabs with your blog links and customize the text of tags according to your choices.
Step 5: Click on save and you are done.
Customization:
All the customizable things in the menu are highlighted by bold black color in the code.
- Replace hashes(#) with your blog links.
- To change font size of buttons customize font-size: 2em; in the code.
- To customize top position of buttons customize nav ul { top:5%; } in the code
- To customize the text color before and after hover make changes in green colored part of code.
If you have any other question about customizing this menu ask me in comments.
Hope you like this menu. For more blogger menus updates sign-up to newsletter below. Share this post with others if you like it. Thank you for visiting 101Helper.
Search tags: Slide in menu, slide out menu, responsive floating menu for blogger, Slide out menu for blogger, Slide in menu for blogger, Css menu for blogger, 101Helper blogger menus.
No comments:
Post a Comment