Add vertical fixed Slide Out navigation menu To Blogger

I personally love this slide out jquery menu and i think after adding this you'll love it too. It's a good way to display your site's menu if you're using a template which doesn't suit any other menus. 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 
  • Click on DropDown Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML --> Proceed --> Expand Widget Templates
  • Press Ctrl + F and search the code shown below

]]></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/AVvXsEjsdiLDu8dwhExxaHSZn_Jdj1jIvjbAEFmMyBFDmf38WLnl77-GANi_IYVA7A82lCpY5iqkt3S_ONum6BVfyN-t2LO-XhD8AFSET78SFchcMqtMdJ_PXiSFbFIkuvZ70vNJSJVCIM3U8Pc/s1600/home.png);
}
ul#navigation .about a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEPRPbafsDUHaupz7ZK4Xlr3E9OrHisGGysdzvor3XOmyMfyVtNqfUAoL3zwwRph-C1kEcj4nb0l0Q2hz4bLY9SdYnH93N4I9qpYMD2fyDKEiv4fMJtRZMS3BiwXjD7zIRZ3UAsz44HEU/s1600/idcard.png);
}
ul#navigation .search a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJYMsKTex0ETiiL6b4dra1FggWMCPUoet52Mzfc42ZOHFgjFVj1vTTYvNz32T2O4QEa8W8Lr9TwrU2G7A4CAvxwO9IjYFHBk27MByO8Cag2wRM1hCivlSurELaqj3k3RsS27FcRdLvd0/s1600/search.png);
}
ul#navigation .podcasts a      {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfgERVTSdBWuNAJSQLvyVly0Z1puAMGYgpJsMJP1wbf3CNVxmxWLmz3_HmtfzQ6MoRaXs4hW1PHR39oaOoJlnpZ_xTDfZNAGCEzfgFIftSKnozjZKsksH_4iFctuDW6jStV6uWGPoAvQg/s1600/ipod.png);
}
ul#navigation .rssfeed a   {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFv2mC_i6IbMKGGrV7FAOG8NUtxIDe9WNGl_xuW897slHtTy5CrRm4e_U122lXqOdsZglXAJyh31DrvRk6TN66pfQSmppTR2N7wROU8HMTG-_w2NdXrA3kFCWzsrm7MMFseS7CI0lrPSQ/s1600/rss.png);
}
ul#navigation .photos a     {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd-y_7fo3RpzHfpQNxtwTO5URTvTyS0j8XvZnOJXopcLu_HWq5IVu-aVKQuVrgbVo6dkXvI9F2LhlnKQG8TQBzXcSPuXoOo1PUz09cD-m2RXuRiGalGNzUMXvK_Cs8jv7_VFRt5cZ8iMU/s1600/camera.png);
}
ul#navigation .contact a    {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1BnuZF5o7Ca5M6TO0WEbavOPZzUHPrYDQbtIYPEdvLE7rYLmFlsHEAdgel1pT08jbmnxj31MYX08Yjvb04UPIuK3egBq3VMsuaZCfOZ58lWonEdtdBTUs1fsGgxo4QsnOZ-rXyyUD2QU/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

Like it? Share it.

11 comments

Reply
Beben Koben
11 May 2012 at 07:33

nice blog, very impressive and so clean ;)
why we should use the script, if there is now a CSS3 feature!
Add this in ul#navigation li a

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

set 1s to taste

and add this too...

ul#navigation li a:hover {
width: 100px;
height: 70px;
margin: 0px;
opacity: 1;
}

Nice to meet you ☻

Beben Koben si bloglang anu ganteng kalem tea \m/

Reply
Unknown
11 May 2012 at 11:36 Author

i Add it bt the menus in not sliding in n out plese help menu is displaying bt not working as shown in demo pls reply to mohit787@ymail.com

Reply
Unknown
11 May 2012 at 23:18 Author

@mohit patelIt works fine in your blog

Reply
Unknown
22 May 2012 at 08:59 Author

@tak selaFixed and sent back to you

Reply
Saikrishna Tipparapu
13 June 2012 at 21:55

Its not working buddy. The animation effect is not working correctly, By default it should hide but its showing every time.

Reply
Unknown
14 June 2012 at 05:35 Author

@Sai krishna You have done somthing wrong , this widget works fine

Reply
Saikrishna Tipparapu
14 June 2012 at 06:23

@sonu

I have done everything fine. Please check my test site
ibloggins.blogspot[dot]com

I can also mail you if you require the template file.
Waiting to have your reply.

Reply
Matematisyen
19 June 2012 at 14:11

mt blog templates there is no head and body. just head and then body onLoad='Menubar()'
div id='outer-wrapper' div id='wrap2'
is coming.
what must i do for slide menu?
anybody help ? thanks

Reply
Unknown
20 June 2012 at 05:36 Author

@Gurkan İlhan You have already installed this widget in your template

Reply
Anonymous
5 September 2012 at 07:07

Hello sonu,
This hack is not working on my template. It should be hiding, but the tabs are fixed.
I have been following your instructions.
What went wrong?

Reply
Unknown
5 September 2012 at 07:26 Author

@Robertier Below ]]></b:skin> add this plugin
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

Click to Add a New Comment

  • If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
  • Do NOT add links to the body of your comment as they will not be published.
  • Only the comments posted in ENGLISH will be approved.
  • If you have a problem check first the comments , maybe you will find the solution there.

Subscribe to: Post Comments ( Atom )