Change the normal pages widget into a responsive dropdown menu in Blogger

This is the continuation of my responsive design series and in this post I'll tell you how to the normal pages widget into a responsive dropdown menu in Blogger.As you know that pages you create in Blogger are displayed in the pages widget but how to make that widget responsive so let see.

Responsive Design

Change your Blogger template into a responsive design intro

Add CSS into your style sheets for different screen sizes

Change the normal pages widget into a responsive dropdown menu (Current Post)

Top checkers to check your responsive site

If you've noticed that pages widget automatically changed into drop down when you select the mobile template in the template setting but in my previous post I had told to disable it.So to take out the drop down menu from the page widget you need to change the code of page widget.To change it follow the steps below.

• Go to Template > Edit HTML 
• Click on Jump to widget and select PageList1
• Expand the widget script by click the arrow on the left side of the code.

Below is the whole script of page widget

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
          <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>
    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
        </b:widget>

In above script I've highlighted the code,it is the condition that told to change the normal page list into drop down when it is a mobile device but if we remove the condition and enclose it in a div with a id='mobnav' and normal page list into another div with id='normalnav' so it will show the drop down menu.As I've changed it below

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
     <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
<div id='mobnav'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>
    </div>
 
<div id='normalnav'>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    </div>
    <b:include name='quickedit'/>
  </div>
</b:includable>
   </b:widget>

But the problem is that it will show the both navigation the drop down and the normal so simply add the following line in your CSS

#mobnav
{
display:none;
} 

The above snippet will hide your drop down navigation and in responsive design CSS,set the normal navigation to display:none and set the #mobnav to display:block; like I've done below.

@media screen and (max-width : 800px)
{
#mobnav {display:block;}
#PageList1_select {width:100%;}
#normalnav {display:block;}
}

Use of above snippet will hide your normal navigation in mobile devices and show your drop down menu.And #PageList1_select is the element of drop down menu so make sure it is set to width:100%.But it will not work until you add the following Jquery script in template.

<script>
jQuery(document).ready(function($) {
      $(&quot;<option/>&quot;, {
         &quot;selected&quot;: &quot;selected&quot;,
         &quot;value&quot;   : &quot;&quot;,
         &quot;text&quot;    : &quot;Menu&quot;
      }).appendTo(&quot;.PageList .widget-content select&quot;);
      $(&quot;.nav .PageList a&quot;).each(function() {
       var el = $(this);
       $(&quot;<option/>&quot;, {
           &quot;value&quot;   : el.attr(&quot;href&quot;),
           &quot;text&quot;    : el.text()
       }).appendTo(&quot;.PageList select&quot;);
      });
      $(&quot;.PageList select&quot;).change(function() {
        window.location = $(this).find(&quot;option:selected&quot;).val();
      });

});
</script> 

Finally your responsive drop down navigation in ready.