HOW TO: Make a drop-down navigation menu


If you have a lot of pages and/or topics on your blog, then drop down navigation menus are a must. Blogs and websites are being viewed on mobile phones more and more, and the less clutter, the better.
As you can see, in my recent re-design, I changed my menu to a drop-down menu. Currently the only place where I really needed to use the drop down is on the "I LIKE....."  bit. But my future plans and hopes for this blog include several more pages that will be need to be placed in drop-downs....anyway, I am kind of getting off track here.
To the point:

1. ADDING AND UNDERSTAND THE FIRST BIT OF CODE
Its important to have a basic understanding of the dropdown codes before putting them on your blog, since you are going to have to use them to organize your pages. Its pretty straightforward, so here we go.
<div id='menubar'>
    <ul id='menus'>
      <li><a href='LINK TO YOUR PAGE'>TabName1</a></li>
      <li><a href='LINK TO YOUR PAGE'>TabName2</a></li>
      <li><a href='LINK TO YOUR PAGE'>TabName3</a></li>
    </ul>
  </div>
Okay, these ones here are just standard pages that go to one place, without dropdowns. The LINK TO YOUR PAGE lines will just be the url of the page you want. The TabName lines will be the title of the page. Each of these lines: <li><a href='LINK TO YOUR PAGE'>TabName3</a></li> represents on tab.You can add or remove them depending on your needs.
Now lets add some drop-downs.
<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'>DropDownTitle</a>
             <ul>
                <li><a href='LINK'>DropDownSub1</a></li>
                <li><a href='LINK'>DropDownSub2</a></li>
                <li><a href='LINK'>DropDownSub3</a></li>
             </ul>

         </li>
    </ul>
  </div>
In red I have added a drop down menu. The DropDownTitle will be the title of the drop-down, and the DropDownSubs will be the titles of the pages in the drop down itself. The links are the URLs of the pages you want shown. Each of these lines: <li><a href='LINK'>DropDownSub1</a></li> represents one page in a drop-down. Add or remove as needed. 
This code: 
<ul>
          <li><a href='LINK'>DropDownName1</a></li>
          <li><a href='LINK'>DropDownName2</a></li>
          <li><a href='LINK'>DropDownName3</a></li>
        </ul>


Can be added after any of these lines: <li><a href='LINK TO YOUR PAGE'>TabName3</a></li> to create a new drop-down.
Okay, go to Dashboard>>Layout>>Add Gadget>>HTML/JavaScript and put it wherever you want your drop-down menu to be. If you want this to replace your old "pages" widget, you will need to move the pages widget out first, to make room. You can delete it right away if you want, but I kept my old one up until I had finished my new one so that I would have easy access to my page URLs.
In the widget, paste the following code, then click save:
<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'>DropDownTitle</a>
             <ul>
                <li><a href='LINK'>DropDownSub1</a></li>
                <li><a href='LINK'>DropDownSub2</a></li>
                <li><a href='LINK'>DropDownSub3</a></li>
             </ul>
         </li>
    </ul>
  </div>
You can go ahead and do your links and titles now if you want, but they won't form into a real drop-down menu until after step two.



2. THE REST OF THE CODE
Go to Dashboard>>Template>>Edit HTML
Press ctrl+f  on windows or command+f on mac, to bring up a search box. Search for this code:
]]></b:skin>
Paste the following code just above it:
/*-------- 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; /* main text color */
    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 */
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
#menus li a:hover, #menus li a:active {
    background: #424338; /* Background color on hover. */
    color: #FFFFFF; /*Text color on hover */
    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; /* dropdown background color */
    width: 120px;
    color: #FFFFFF; /* dropdown text color*/
    display: block;
    font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
         
    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; /* Dropdown background on hover*/
    color: #FFFFFF; /* dropdown text color on hover. */
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
/*-------- End Drop Down Menu -------*/
Save your template. It probably looks fairly ugly, but go ahead and set up all your links and titles from step 1 and click around a bit to make sure everything works.
I have left comments IN the code to show you what code affect which parts of the menus, this should make customizing it easier. Anything enclosed between /* and */ is a comment, and should have no affect upon the code itself, negative or positive.
 photo theauthor_zps8356b86b.png

FACEBOOK   GOOGLEPLUS   PINTEREST   TWITTER

2 comments:

I should be most pleased if you would leave a comment. I do so love reading them and hearing what you think.
(all of it, I want to know everything you think about....wait no, that's creepy)