Slide-in CSS/Javascript Menu For Blogger

Slide-in CSS/Javascript Menu For Blogger - Hallo sahabat Information About Blogger, Pada Artikel yang anda baca kali ini dengan judul Slide-in CSS/Javascript Menu For Blogger , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger menus, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Slide-in CSS/Javascript Menu For Blogger
link : Slide-in CSS/Javascript Menu For Blogger

Baca juga


Slide-in CSS/Javascript Menu For Blogger

Slide in menu for blogger | 101helper blogger menus

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:


Slide in menu for blogger demo | 101helper blogger menus

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. 
  1. Replace hashes(#) with your blog links. 
  2. To change font size of buttons customize font-size: 2em; in the code.
  3. To customize top position of buttons customize nav ul { top:5%; } in the code
  4. 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. 


That is the discussion about Slide-in CSS/Javascript Menu For Blogger

Thank you for visiting the article Slide-in CSS/Javascript Menu For Blogger hopefully always provide useful information, see you in another article.

the article you are reading is about Slide-in CSS/Javascript Menu For Blogger with the link as follows https://www.booknagar.com/2015/03/slide-in-cssjavascript-menu-for-blogger.html

0 Response to "Slide-in CSS/Javascript Menu For Blogger "

Post a Comment


Tag: how to create a free blog, how to create a website, how to create a blog website, how to create a blog for free, how to make a blog, wordpress, how to create a wordpress blog, how to create a blog page, how to start a blog, blogger, how to create a blog in wordpress, how to create a blog account, how to create a blog on wordpress, how to create a blog and make money, how to create a blog in google, how to create a successful blog