netoops blog

Add Beautiful Fixed Slide Out Navigation Menu in Blogger


This Tutorial will show you How To Add Beautiful/Nice vertical fixed Slide Out navigation menu using jQuery and CSS To Blogger. This menu is partial hidden and will be visible only when you hover your mouse over it.



SLIDE OUT NAVIGATION MENU DEMO


Live Demo

HOW TO ADD SLIDE OUT NAVIGATION MENU IN BLOGGER

  • Go to Blogger Dashboard --> Design --> Edit HTML
  • Backup your Template before making any changes to your blog
  • Now  Expand Widget Templates
  • Find the code shown below using [ctrl+F]

]]></b:skin>

  • Now Paste the Code shown below just above/before it

ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .home a{
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIXYNUKIab2HoybpvPrZf8NmT6ZcvbPq1MAd6eVCnbUnVy9MWRJiyfmXet2JC28BR2e0og_Q-qXBJLgCdOm2IeRLsS9VgJbTV13GDBrK4d6zlRkuPyoQiOBg7wgaaBJ8TBQ1TqCxQnWE/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcEQDS5Cp4YEu3CacwTRZGYwGSniNfKCbYzQYD5eTlYnB3ZqKajtgvexfhyphenhyphenYPD_dNpGULG4Yoemd81Q5BOQ-v8H7GIs05OzAJ6T7i1_WfxNO4XaLOiH8cPGnbnGYWpfK9OMp5oH6QVxeo/s1600/idcard.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLMFpjM7zkSOSegwuEH1Dn-qqY9pBsWDBrPEubpTfVAaS45ZgESaDc48MLt3kN62uVjglPOquvn8ETvFk5EoYDc3uhFcTnGiTBOkKPuuZk-jXDuLyRjPNg5qjhBPkdCLK3MYVpk5qmm7E/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGXdzP1fAqL_prliZfrEx3a3wnPkBXsVKHRv4KgOtoVDlGQLQ9Y8uonY1cf7wcyJXUSZHFEO7yDtJfGNV6xYCgBHwxF3-v9alvSGmt_L_NDuOzy6qGUJwz1XZPdWkQSpGCACkdgmVf_MM/s1600/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn0DNMsl39-znW7Dw8tLXdaoV5L0g7Whyphenhyphen9qVsV-E51EINKITI8Dx7_zDxjWKMQb4neSHEAh1YHeub-NqgQ3uL6cnjAnWDczIbzRyMVGCYQTAm4pjq6v8K04Yh6LWO2UzGhPqd-W2nP244/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVl3Pyt8v_OTAHkAqCZSu1KPUZljAv-N_gHzam6BPNhTF2gpG_kVYLHOBYNK8BgsJkKT5O84nT-VPZQMZ4IWaMq4jovnM6Ov8tlM_WO7191t33uaSeC7qcTRS0oio87QtTuqP5FlOEDh0/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpluN1j4uqhdGNO_TUF70WM2Qf4SBA_zemCTKj2sCtktnVopVU0yaoG-rHNISd5oLgwpQCC5ugi_WeU_XeggnFpY-IYdKfDyC3acyVj923Z46GR6nlYQt3sAiDZQ8AuMCrM368bPwMZY/s1600/mail.png);
}


  • Now Find the code shown below using [ctrl+F]

</head>
<body>

  • Now Replace it with the code shown below

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>
</head>
<body>
<p style="display:none;"> Navigation Menu by<a href="http://www.latesthack.com">Latest Hack</a></p> 
<ul id="navigation">

            <li class="home"><a href="" title="Home"></a></li>

            <li class="about"><a href="" title="About"></a></li>

            <li class="search"><a href="" title="Search"></a></li>

            <li class="photos"><a href="" title="Photos"></a></li>

            <li class="rssfeed"><a href="" title="Rss Feed"></a></li>

            <li class="podcasts"><a href="" title="Podcasts"></a></li>

            <li class="contact"><a href="" title="Contact"></a></li>

        </ul>  

  • Now save your template

No comments: