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[Now find for //]]></b:skin> and paste the following code above it.
/*! 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>
@media screen and (max-width : 700px) {Just replace the highlighted media query above to set it according to your template.
.PageList ul{
display:none;
}
.tinynav{
display:block;
}
}
Post A Comment:
0 comments: