About

Labels

slider

Recent

Navigation

How to turn Blogger pages widget menu into a drop-down menu in small screens 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[
 /*! http://tinynav.viljamis.com 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(h.is("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."+c.active))+")").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);
  $(function(){
    $(".dropdown ul,.PageList ul").tinyNav({
      header:"Navigation"
});
//]]>
</script>
Now find for //]]></b:skin> and paste the following code above it.
@media screen and (max-width : 700px) {
.PageList ul{
display:none;
}
.tinynav{
display:block;
}
}
Just replace the highlighted media query above to set it according to your template. 
Share
Banner

Muhammad Hamza

Themelet provides the best in market today. We work hard to make the clean, modern and SEO friendly blogger templates.

Post A Comment:

0 comments: