How to create drop-down menus in Blogger

This post is a definite side-step from my usual topics, and I know the side-step won't be of interest to everyone. I apologise in advance if that is the case for you, and will be back tomorrow with a post that is food-focused rather than web-focused. For today, though, I did want to document the following for those of you who have asked about drop-down menus. It also seemed wise to document the information for my own reference.

Although this post is written for Blogger, the HTML components should be applicable to WordPress and other blogging platforms too. I just can't advise on where you should make changes, or on which sections of your template to edit.

By drop-down menus, I am referring to a set of tabs that open up to additional, drop-down tabs when you hover over them. You can see them along the top of this blog, and if you use the internet, you will undoubtedly have used them to navigate content at some stage.

This is what I'm talking about...

You can use drop-down menus to navigate to separate pages on your blog, or to navigate to sections within a page. In my case, an example of the former is the drop-down menu under 'About this blog', which allows you to navigate to 'Disclosure policy' (a separate page). An example of the latter is under 'Recipes', where you can navigate to different sections of the overall Recipes page. To make links to different sections within a page, you will need to create anchors. If you aren’t familiar with them, I recommend reading Johanna’s tutorial at Green Gourmet Giraffe, which is where I first learnt about how to create them.

Once you have created your pages and/or anchors and know what you want your drop-down menu to include, you are ready to start. Before doing so, check that under Blogger's 'Pages' (down the side menu of Blogger), you have selected to show pages as top tabs. (We will change this later but it is easier if it is on to start with.)

You now need to make changes to your Blogger template in three places.

The first change is under Layout, where you want to add a customisable ‘HTML / Java Script’ gadget. To do this, click the ‘add a gadget’ box underneath your blog header. Then scroll down to ‘HTML/Java Script’ and select it.

You will be asked to enter a title and content for this new gadget. The title can be blank. For the contents, copy the following: 

<div id='mbtnavbar'>
<ul id='mbtnav'>
  <li>
  <a href='LINK TO PAGE 1’>NAME OF PAGE 1</a>
  </li>
  <li>
  <a href='LINK TO PAGE 2’>NAME OF PAGE 2 </a>
      <ul>
      <li><a href=’LINK TO PAGE 2, SUB-PAGE 1 '>NAME OF PAGE 2, SUB-PAGE 1</a>
      </li>
      </ul>
  </li>
  <li>
  <a href='LINK TO PAGE 3'>NAME OF PAGE 3</a>
      <ul>
      <li><a href='LINK TO PAGE 3, SUB-PAGE 1’>NAME OF PAGE 3, SUB-PAGE 1</a>
      </li>
      <li><a href='LINK TO PAGE 3, SUB-PAGE 2’>NAME OF PAGE 3, SUB-PAGE 2 </a>
      </li>
      <li><a href='LINK TO PAGE 3, SUB-PAGE 3’>NAME OF PAGE 3, SUB-PAGE 3 </a>
      </li>
      </ul>
  </li>
</li></ul>
</div>

The sections in capitals need to be customised to your blog. For me, the start of the syntax looks like this: 

<div id='mbtnavbar'>
<ul id='mbtnav'>
  <li>
  <a href='http://www.bitesizedthoughts.com/'>Home</a>
  </li>
  <li>
  <a href='http://www.bitesizedthoughts.com/p/about-this-blog.html'>About this blog</a>
    <ul>
    <li><a href='http://www.bitesizedthoughts.com/p/disclosure-policy.html'>Disclosure policy</a>
    </li>
    </ul>

Save your gadget. At this stage the formatting won’t be at all right, so if you preview it, don’t worry about how it looks (it will look wrong!).

Your Layout page should now look like this:





The HTML / Java Script along the top is what you have just added.

For Step Two, go to the Template section of Blogger. You can do the following through ‘Edit HTML’ (which is actually what we did when working out what to do), but it is easier if you select ‘Customize’.

Select 'customise'

When in the Blogger Template editor, select ‘Advanced’. Scroll down to the very bottom of the list of editing options, to ‘Add CSS’.

Copy the following into the ‘Add custom CSS’ box:

.Header h1 {text-shadow: 2px 2px #FFFFFF; }
/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
/* background: #ff0000; */
width: 100%;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height: 41px;
}

#mbtnav {
background: #909092;
margin: 0;
padding: 0;
}

#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
/* border-left:1px solid #333;
border-right:1px solid #333; */
height:41px;
}

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:bold 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

#mbtnav li a:hover, #mbtnav li a:active {
background: #909092;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}

#mbtnav li {
float: left;
padding: 0;
}

#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 200px;
margin: 0;
padding: 0;
}

#mbtnav li ul a {
width: 180px;
}

#mbtnav li ul ul {
margin: -35px 0 0 161px;
}

#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}

#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}

#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #909092;
/* width: 140px; */
color: #FFF;
display: block;
font:bold 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}

#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}

.tabs-inner .widget #mbtnavbar li a {
border-left:none;
}

.tabs-outer .widget, .section {
margin:0;
}

.tabs-inner {
padding: 0px;
}

This is where you paste the above syntax

You can preview the appearance of your menu now. As the above is set to the formatting I wanted, you will probably need to change things like colour, font size, and so on to suit your own requirements. You can change these in the CSS syntax above.

Once you are happy with the format and appearance, there is one final step to do. 

Step Three is required to make it possible to navigate your blog's pages when the site is viewed on a mobile phone. Blogger’s standard way of showing pages (not a drop-down menu) automatically adjusts when someone views your blog on a mobile. You want to keep that standard system for phone views, but turn it off for computer-based views that will now benefit from your drop-down system.

To achieve this, you will need to edit your HTML. When in the Template section of Blogger, select ‘Edit HTML’ and then do a search (control + F) for ‘PageList1’.

This will bring up a line of syntax that you can edit to look like the following:

<b:widget id='PageList1' locked='false' mobile='only' title='Pages' type='PageList'/>

You should now have drop-down menus when your blog is viewed through a computer, and a phone-friendly menu version when your blog is viewed on a mobile phone.

For extra advice and information, also see this post and try searching for 'CSS only drop down menus'.

Lastly, Mr Bite offers the tip of creating a random, non-public blog (given Blogger blogs are free) that you can practice formatting changes on before transferring them to your 'real' blog. My tip is to find your own Mr B equivalent who can do that testing for you and then help you out!

Update June 2013: A few people have let me know that they couldn't get the code to work until they used double quotation marks (" ") instead of single (' ') in the link html. So, instead of the following:

  <li> 
  <a href='LINK TO PAGE 1’>NAME OF PAGE 1</a> 
  </li> 

You may want to try:

  <li> 
  <a href="LINK TO PAGE 1">NAME OF PAGE 1</a> 
  </li> 

Update July 2013: Johanna at Green Gourmet Giraffe shared her experience on adding drop down menus in this post, based on her experiences with the information outlined here and in other tutorials.

I always love receiving your comments and questions, but please note that I am not a trained programmer and I don't have the knowledge or capacity to answer detailed questions about how the above might be modified to your blog or specific needs. If you leave a question below and I know the answer, I'll certainly reply. However, I won't be able to respond to detailed or lengthy questions that are beyond what I can assist with. 

Tweet

Pin It