Blogger Ever

How to create Lava Lamp navigation menu and use it in Blogger native pages widget

How to create Lava Lamp navigation menu and use it in Blogger native pages widget

A few post before I shared how to create a dynamic tab with a lava lamp but,that dynamic tab consist of technique which is not a developer friendly.As developer want that lava lamp resize and moves according to the element.This time I got something that people love to add,its a lava lamp navigation menu that changes its position according to element and resize automatically.

For more,I have a snippet that can be added by Blogger users to change their normal pages widget of Blogger into a lava lamp navigation.So lets start with it:

Demo

See the Pen lava lamp navigation menu by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.
These instructions are for non Blogger users,for Blogger users the instructions are below.

HTML

<nav>
  <ul>
    <li><a href='#'>Home</a></li>
    <li class='selected'><a href='#'>Articles</a></li>
    <li><a href='#'>This one is a</a></li>
    <li><a href='#'>About Us</a></li>
    <li><a href='#'>Contact Us</a></li>
  <li class='lamp'></li>
  </ul>
</nav>
As you can see I've added class selected to a listing element,it is just for demonstration,the class selected will be added to that element of which the page is opened,means active page.Secondly,li with a class lamp has been added that is actually the lava lamp which moves.

Jquery

$(function () {
    if ($('nav ul li').hasClass('selected')) {
        $('.selected').addClass('active');
    } else {
        $('nav ul li').first().addClass('active');
    }
    var currentleft = $('.active').position().left + "px";
    var currentwidth = $('.active').css('width');
    $('.lamp').css({
        "left": currentleft,
        "width": currentwidth
    });
    $('nav ul li').mouseenter(function () {
        $('nav ul li').removeClass('active');
        $(this).addClass('active');
        var currentleft = $('.active').position().left + "px";
        var currentwidth = $('.active').css('width');
        $('.lamp').css({
            "left": currentleft,
            "width": currentwidth
        });
    });
    $('nav ul li').mouseout(function () {
        $('nav ul li').removeClass('active');
        if ($('nav ul li').hasClass('selected')) {
            $('.selected').addClass('active');
        } else {
            $('nav ul li').first().addClass('active');
        }
        var currentleft = $('.active').position().left;
        var currentwidth = $('.active').css('width');
        $('.lamp').css({
            "left": currentleft,
            "width": currentwidth
        });
    });
});
Firstly,if the class selected is present then the class active will be added to it,if it is not present then the first element which is mostly home,will have class active.Then width and the position to left will be calculated by variables that are currentleft and currentwidth.As the mouse enters to any element,the class active will be added to that element and the lamp will move towards it.Due to CSS3 transitions,the lamp will have a linear motion.

Finally,when the mouse will be out then the element with selected class (if present) or else first element (usually Home link) will have class active and the lamp will back to it.

For Blogger Users

How to create Lava Lamp navigation menu and use it in Blogger native pages widget

This tutorial is for Blogger users.

I love to go native and love Blogger.This is the reason I've chosen this tutorial to be shared.Before I did shared a tutorial that how to change a Blogger pages navigation into a responsive menu when it is a small screen size.Now this time its a bit cool stuff for you.

To change the Blogger navigation,into a lava lamp navigation just you have follow three steps.Before that make sure that this script will only work on Blogger's pages widget and you must backup your template first.If you want to create your own navigation menu then use the above method.

1.Add Jquery

Add the Jquery if it is not present in your script.To add Jquery,add the following line just after <head>
<script src='//code.jquery.com/jquery-1.10.2.min.js'/>

2.Add CSS

Add the following code just before ]]></b:skin>
.PageList ul {
    position:relative;
    list-style:none;
    padding:0;
    margin:0;
}
.PageList ul li {
    float:left;
}
.PageList ul li a {
    padding:25px 15px !important;
    background:#eee !important;
    color:#333;
    display:block;
    font-family:'PT Sans', sans-serif;
    text-decoration:none;
}
.lamp {
    position:absolute;
    height:4px;
    background:#333;
    transition:all .3s linear;
    -o-transition:all .3s linear;
    -moz-transition:all .3s linear;
    -webkit-transition:all .3s linear;
}
.PageList ul li.selected.active a, .PageList ul li.active a {
    background:#00bfff !important;
    transition:all .3s linear;
    -o-transition:all .3s linear;
    -moz-transition:all .3s linear;
    -webkit-transition:all .3s linear;
    color:#fff !important;
}
 Replace the following:

  • #eee with the background color of the link.
  • #333 with the color of the link.
  • #333 color of the lamp.
  • #00bfff for the background color of the hover or selected page.
  • #fff for the color of the hover or selected page.

3. Add Javascript

Add the following code just before </head>
<script>
$(function () {
    $('.PageList ul').append("<li class='lamp'></li>");
    if ($('.PageList ul li').hasClass('selected')) {
        $('.PageList ul li.selected').addClass('active');
    } else {
        $('.PageList ul li').first().addClass('active');
    }
    var currentleft = $('.PageList ul li.active').position().left + "px";
    var currentwidth = $('.PageList ul li.active').css('width');
    $('.lamp').css({
        "left": currentleft,
        "width": currentwidth
    });
    $('.PageList ul li').mouseenter(function () {
        $('.PageList ul li').removeClass('active');
        $(this).addClass('active');
        var currentleft = $('.active').position().left + "px";
        var currentwidth = $('.active').css('width');
        $('.lamp').css({
            "left": currentleft,
            "width": currentwidth
        });
    });
    $('.PageList ul li').mouseout(function () {
        $('.PageList ul li').removeClass('active');
        if ($('.PageList ul li').hasClass('selected')) {
            $('.PageList ul li.selected').addClass('active');
        } else {
            $('.PageList ul li').first().addClass('active');
        }
        var currentleft = $('.PageList ul li.active').position().left;
        var currentwidth = $('.PageList ul li.active').css('width');
        $('.lamp').css({
            "left": currentleft,
            "width": currentwidth
        });
    });
});
</script>
Save settings and have a look on it.

Last Words 

I want to describe each and every thing of the post in detail but if through out the tutorial if something you didn't get,then we are waiting for your comments.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.