Add Animated Side Navigation Menu In Blogger

How to add a beautiful side navigation menu with animated effect - Hi guys and welcome back to my blog, today I'm going to show you how you can easily add a new and cool side navigation menu bar into your blogger blog. It's comes with some animation effect and I hope, it will look very awesome on your blog. The best part of this navigation menu is that, it will never take your blog space to fit on it. This navigation menu bar is very responsive. So click on the below demo button and take a look of this navigation menu. (Look top right hand corner on demo page)

Demo

If you like this navigation menu and want to add into your own blog then follow the below simple steps.

How To Add Navigation Menu In blogger?

First go to your blogger dashboard, you can also use this link - Login

Now go to your "Template" section and then click on "Edit html" button to make some changes in your template.

After that, In the template editor find the below code by pressing "Ctrl + F" key together from your keyboard.

]]></b:skin>

Now copy the below CSS code and paste it just before ]]></b:skin>

.navToggle {
    position: fixed;
    top: 50px;
    right: 50px;
    z-index: 10;
    text-align: center;
}

.navToggle:hover {
    cursor: pointer;
}

.navToggle:hover .menu, .navToggle:hover .menu:before, .navToggle:hover .menu:after {
    background: white;
}

.navToggle:hover .menuOn {
    background: transparent;
}

.menu, .menu:before, .menu:after {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 5px;
    background: #fff;
    transition: 0.3s;
}

.menu:before, .menu:after {
    content: "";
    position: absolute;
    left: 0;
}

.menu:before {
    top: 10px;
}

.menu:after {
    bottom: 10px;
}

.menuOn {
    background: transparent;
}

.menuOn:before {
    top: 0;
    transform: rotate3d(0, 0, 1, 45deg);
}

.menuOn:after {
    bottom: 0;
    transform: rotate3d(0, 0, 1, -45deg);
}

nav {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    padding: 50px 125px 50px 50px;
    transition: all .2s ease-in-out;
    color: #fff;
}

nav a {
    color: #fff;
    text-decoration: none;
}

nav a:hover {
    color: red;
}

nav.navOn {
    display: block;
    z-index: 5;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

nav ul li a {
    display: block;
    padding: 20px;
    font-weight: 100;
    font-size: 2rem;
    text-transform: capitalize;
}

nav ul li a:hover {
    color: #ff274d;
}

Now once again find the below code

</body>

After that, copy the below jQuery script and paste it just before </body>

<script type='text/javascript'>
$('.navToggle').click(function(){
  $('.menu').toggleClass('menuOn');
  $('nav').toggleClass('navOn');
})
</script>

And then click on the orange save template button.

Now go to the "layout" section and then click on " Add a widget ".

After that, select " Html/JavaScript ". (See the below image)

Now copy the below code and paste it in Html box.

<div class="navToggle"><span class="menu"></span></div>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Disclaimer</a></li>
    <li><a href="#">Playground</a></li>      
  </ul>
</nav>

After that, click on the save widget button to make changes. Now refresh your blog and see the magic.
I tried my best to make the installation process easy for you, however you will need some piece of mind to add this navigation menu into your blog.
You can use the above codes according to your need.

That's it! I hope you like this navigation menu! Stay tuned for more tips and tricks! Thanks for reading @Prince

Share this

Tweet

Share

Share

Share

Share

RELATED ARTICLES