How to Create Drop-Down Menus in Blogger
I know we’re all busy this weekend with Bloggiesta, but since this topic came up in the Twitter chat this afternoon, I thought I’d go ahead and finish up the post and get it posted. If you’ve finished your to-do list, here’s something new to try. (Also, let me say that, as a result of today’s Twitter chat, this is my first post using Windows Live Writer! I’m pretty impressed so far.)
PART ONE
We're going to start with the following code as our foundation. No need to copy and paste just yet. Look it over, get a little familiar with its structure, then read on:
<div id='menubar'>
<ul id='menus'>
<li><a href='LINK'>TabName1</a></li>
<li><a href='LINK'>TabName2</a></li>
<li><a href='LINK'>TabName3</a></li>
<li><a href='LINK'>TabName4</a></li>
</ul>
</div>
The above will give you a basic set of tabs, displayed in a horizontal row. To create submenu items – the ones that will eventually drop down to give users more options to choose from – we need to add a little more code inside the “TabName” under which you want the drop-down options to appear.
That additional code will look like this:
<ul>
<li><a href='LINK'>DropDownName1</a></li>
<li><a href='LINK'>DropDownName2</a></li>
<li><a href='LINK'>DropDownName3</a></li>
</ul>
See how there are three lines, exactly the same? That will give users three choices in a drop-down menu for whichever tab we attach it to. Add more of those same lines if you need more items in your drop-down menu, or delete a line if you need fewer items.
Okay... so say you want TabNames 1, 2, and 3 to be simple, normal tabs. No other menu choices, just a plain ol' clickable tab for each of those sections, like Blogger normally creates. Leave the HTML for those three tabs alone.
For our sample here, let’s make TabName4 drop-down with more options. We're going to place the extra lines of code above just before the closing </li> of TabName4. The code in our widget will now look like this (the code for the entire 4th tab is highlighted in red so you can see how it was put together):
<div id='menubar'>
<ul id='menus'>
<li><a href='LINK'>DropDownName1</a></li>
<li><a href='LINK'>DropDownName2</a></li>
<li><a href='LINK'>DropDownName3</a></li>
<li><a href='LINK'>TabName4</a>
<ul>
<li><a href='LINK'>DropDownName1</a></li>
<li><a href='LINK'>DropDownName2</a></li>
<li><a href='LINK'>DropDownName3</a></li>
</ul>
</li>
</ul>
</div>
Place the above code in an HTML/JavaScript widget (from your blog’s control panel, choose Layout >> Add a Gadget >> HTML/JavaScript) wherever you want the menu bar to appear: typically just underneath the title/header. Notice that we are not using the "Pages" gadget. If you already have "Pages" installed, you'll eventually want to remove it from your blog layout.
Right now, it's going to look like a mess on your site, all splayed out with nothing actually dropping down at all. The next step is more involved, but it will set up the look of the menu bar and have the drop-down portion working properly.
PART TWO
This part can feel kind of scary. From your blog’s control panel, choose Template.
In the upper right corner, click the “Backup / Restore” button. Download a backup of your current template, just in case something goes wrong.
Notice how each line of code starts off in a green color, and each line is numbered.
Look for the line that says: <b:skin>...</b:skin>
(In my template it's around line 13; this may vary.)
Click the little dots in between those tags.
It will expand a ton of code, and that code will appear in blue.
Scroll down, and find where the code turns from blue back to green. At that point, there is a line that says: ]]></b:skin>
Sometimes it gets displaced, so you might want to put it on its own, separate line; some of it might be blue, some might be green. Don’t worry about that: Just make sure all characters stay together: ]]></b:skin>
Now, copy and paste the following chunk of code, and paste it on a line immediately BEFORE ]]></b:skin>
/*-------- Begin Drop Down Menu -------*/
#menubar {
background-color: transparent;
width: 840px;
color: #424338;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid ##8C001A;
height:35px;
}
#menus {
margin: 0;
padding: 0;
}
#menus ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menus li {
list-style: none;
margin: 0;
padding: 0;
border-left:0px solid #1A6680;
border-right:0px solid #1A6680;
height:auto;
}
#menus li a, #menus li a:link, #menus li a:visited {
color: #FFFFFF; /* This changes the text color of visited links. */
display: block;
font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 5;
/* change margin value to 0 if you want no space between tabs */
/* change 14 to another number to increase or reduce font size */
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#menus li a:hover, #menus li a:active {
background: #424338; /* This is the main menu background color when a user hovers. */
color: #FFFFFF; /* This changes the text color. */
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#menus li {
float: left;
padding: 0;
}
#menus li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#menus li ul a {
width: 140px;
}
#menus li ul ul {
margin: -25px 0 0 160px;
}
#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
left: -999em;
}
#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li
li.sfhover ul, #menus li li li.sfhover ul {
left: auto;
}
#menus li:hover, #menus li.sfhover {
position: static;
}
#menus li li a, #menus li li a:link, #menus li li a:visited {
background: #424338; /* This is the background color for the drop down menu. */
width: 120px;
color: #FFFFFF; /* This changes the text color. */
display: block;
font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
/* change 14 to another number to increase or reduce font size */
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:0px solid #1A6680;
}
#menus li li a:hover, #menusli li a:active {
background: #424338; /* This is the background color for the drop down menu when a user hovers. */
color: #FFFFFF; /* This changes the text color. */
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
/*-------- End Drop Down Menu -------*/
That’s it! Click the orange "Save Template" button and you're done!
BONUS: CUSTOMIZING COLORS
I made notes in the code above to let you know which colors affect which aspect of the menu bar. You can customize these colors to better match your blog's design by changing the hex values (the 6-digit combination of numbers/letters that appear after #). For example, black is #000000. White is #FFFFFF.
In the huge block of text above, any text you see in between /* and */ is a comment in the code. Comments are notes a programmer (which I’m not pretending to be!) includes to help others better understand the code. In this case, I wanted you to know what sections of the code affects which parts of the menu bar, so you can hopefully make color and text changes with more confidence.
HTML Color Picker is a great resource to find the hex value for any color. You could also use the Color Palette Generator to generate a palette of colors that will complement your blog or a specific blog post based on any image you specify!
No comments:
Post a Comment