Blogger Ever

How to turn Blogger pages widget menu into a drop-down menu in small screens using jQuery plugin?

This tutorial is dedicated to the pages or navigation widgets to which we can change into a dropdown menu using jQuery plugin.
Change your Blogger pages widget into dropdown

A few months before I gave a post on turning the Blogger pages widget into drop-down but that was a manual method and a bit for harder for newbies. But now I got something that works not only on Blogger pages widget but instead you can also apply it on any navigation even CSS3 drop-down menus. So I'm going to use Tiny Nav plugin for it have a look.
Chris Coyer discussed the same problem but the solution was not applicable on Blogger as we use Data Layout Tags to insert markup in template.

Since we are using jQuery plugin so you should have jQuery. I'm using Tiny Nav plugin for it.
So what you have to do is to:

  • Go to Blogger > Template > Edit HTML
  • Find </head>
  • Paste the following code above it.
<script type='text/javascript'> //<![CDATA[
 /*! v1.2 by @viljamis */ (function(a,k,g){a.fn.tinyNav=function(l){var c=a.extend({active:"selected",header:"",indent:"- ",label:""},l);return this.each(function(){g++;var h=a(this),b="tinynav"+g,f=".l_"+b,e=a("<select/>").attr("id",b).addClass("tinynav "+b);if("ul,ol")){""!==c.header&&e.append(a("<option/>").text(c.header));var d="";h.addClass("l_"+b).find("a").each(function(){d+='<option value="'+a(this).attr("href")+'">';var b;for(b=0;b<a(this).parents("ul, ol").length-1;b++)d+=c.indent;d+=a(this).text()+"</option>"}); e.append(d);c.header||e.find(":eq("+a(f+" li").index(a(f+" li."")").attr("selected",!0);e.change(function(){k.location.href=a(this).val()});a(f).after(e);c.label&&e.before(a("<label/>").attr("for",b).addClass("tinynav_label "+b+"_label").append(c.label))}})}})(jQuery,this,0);
    $(".dropdown ul,.PageList ul").tinyNav({
Now find for //]]></b:skin> and paste the following code above it.
@media screen and (max-width : 700px) {
.PageList ul{
Just replace the highlighted media query above to set it according to your template. 

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.