Saturday, July 6, 2013

How to Create a Simple Drop Down Menu (DDM) in Blogger Blog / Website

Adding drop down menu to your blog / website is the best way to arrange your blog’s / website’s important links. It helps readers to easily navigate through your blog / website which will definitely increase your site page views and impression.
When I were using the blogger during my initial days for my blogs, I tried a lot in creating and implementing the CSS codes of drop down menu.
Finally, I got succeeded and designed a drop down menu tab for my blog. After few months, I reminded myself, that I could make a blog post out of it, so that it will help other people in creating and implementing the drop down menu to their blogs / websites.
How to Add the Drop Down Menu

Step 1
Go to your blogger dashboard.
Click on "Design" > "Edit HTML" back up your template.
Use ctrl F to find ]]></b:skin> and paste the following code above/before it.

/*----- Drop Down Menu BY www.mirrayees.blogspot.com----*/
#rrmnavbar {
background: #2a2626;
width: 100%;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-bottom:5px solid red;
height:35px;
}
#rrmnav {
margin: 0;
padding: 0;
}
#rrmnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#rrmnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#rrmnav li a, #rrmnav li a:link, #rrmnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;    margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#rrmnav li a:hover, #rrmnav li a:active {
background: #6c6464;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#rrmnav li {
float: left;
padding: 0;
}
#rrmnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 200px;
margin: 0;
padding: 0;
}
#rrmnav li ul a {
width: 180px;
}
#rrmnav li ul ul {
margin: -25px 0 0 161px;
}
#rrmnav li:hover ul ul, #rrmnav li:hover ul ul ul, #rrmnav li.sfhover ul ul, #rrmnav li.sfhover ul ul ul {
left: -999em;
}
#rrmnav li:hover ul, #rrmnav li li:hover ul, #rrmnav li li li:hover ul, #rrmnav li.sfhover ul, #rrmnav li li.sfhover ul, #rrmnav li li li.sfhover ul {
left: auto;
}
#rrmnav li:hover, #rrmnav li.sfhover {
position: static;
}
#rrmnav li li a, #rrmnav li li a:link, #rrmnav li li a:visited {
background: #6c6464;
width: 160px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#rrmnav li li a:hover, #rrmnavli li a:active {
background: #2a2626;
color: #FFF;
display: block;     margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
To change the color of your background menu, simply edit #2a2626
To change the background color of the menu on mouse hover, then edit #6c6464
To change the background color of the drop down menu, edit #6c6464
Click "Save Template" when you are done with your editing.

Step 2 
Now 2nd Step is to add the html code

Go to "Page Elements", click "Add a Gadget" below your header.
Choose "HTML/JavaScript" from the list of the options and paste the following code in the content box leaving the title blank.

                  <div id='rrmnavbar'>
                    <ul id='rrmnav'>
                      <li>
                        <a expr:href='data:blog.homepageUrl'>
                          Home
                        </a>
                      </li>
                      <li>
                        <a href='#'>
                          Downloads
                        </a>
                      </li>
                      <li>
                        <a href='#'>
                          Multimedia
                        </a>
                      </li>
                      <li>
                        <a href='#'>
                          Islamic
                        </a>
                      </li>
                      <li>
                        <a href='http://mirrayees.blogspot.in/p/sitemap.html'>
                          Sitemap
                        </a>
                      </li>
                      <li>
                        <a href='#'>
                          Tools &#8595;
                        </a>
                        <ul class='children'>
                          <li>
                            <a href='#'>
                              Weather
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Website Speed Checker
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Hex Colour Code Generator
                            </a>
                          </li>
                          <li>
                            <a href='http://facebook.com/rayeesrehmanmir'>
                              Facebook
                            </a>
                          </li>
                          <li>
                            <a href='http://twitter.com/RayeesRehmanMir'>
                              Twitter
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href='#'>
                          About &#8595;
                        </a>
                        <ul class='children'>
                          <li>
                            <a href='http://mirrayees.blogspot.in/p/about-me.html'>
                              About Me
                            </a>
                          </li>
                          <li>
                            <a href='http://mirrayees.blogspot.in/p/privacy-policy.html'>
                              Privacy Policy
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              FAQ&#39;s
                            </a>
                          </li>
                          <li>
                            <a href='#'>
                              Dis
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li>
                        <a href='http://mirrayees.blogspot.com/p/contact-me.html'>
                          Contact Me
                        </a>
                      </li>
                    </ul>
                  </div>
Replace all occurrence of # with the link/url of each page you want to point the menu to.
Replace all text highlighted in Fuchsia                      with the title of each menu.
Click "Save" and if you need any further help, please feel free to ask using the comment box, and i will get back to you as soon as possible.

 Note: If you observed that your sub-menus (Sub Pages) are hidden, kindly read the below tutorial too:

How to Add Drop Down Menu (DDM) in New Blogger Template

Template editing have been so much difficult ever since blogger introduce new blogger template designer, especially picture window template and watermark, which have cause a great headache for most blogger newbies.
In my next post i will be publishing how you can add a drop down menu to your blog, and i know most newbies are going to experience a little difficulties in implement the code, so i think i have to share this with you before releasing my awesome drop down menu widget.

Now follow the below Steps to Add Drop Down Menu in New Blogger Template
Go to your blogger dashboard
Click on "Design" > Edit HTML" > back up your template
Now find your tab/menu tag code, it will look very similar to the code below, you can scroll through your template until you find it:

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: transparent;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid #ffffff;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em .75em;
font: normal bold 17px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #ffffff;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a {
border-right: 1px solid #ffffff;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: #990000 none repeat-x scroll 0 -100px;
color: #ffffff;
}

Remove the comment quote (*/) from the top and add it the bottom of your tab tag like the example below.
 /* Tabs
-----------------------------------------------
.tabs-outer {
overflow: hidden;
position: relative;
background: transparent;
}
#layout .tabs-outer {
overflow: visible;
}
.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;
border-top: 1px solid #ffffff;
}
.tabs-cap-bottom {
bottom: 0;
}
.tabs-inner .widget li a {
display: inline-block;
margin: 0;
padding: .6em .75em;
font: normal bold 17px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #ffffff;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
height: 16px;
line-height: 16px;
}
.tabs-inner .widget li:last-child a {
border-right: 1px solid #ffffff;
}
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: #990000 none repeat-x scroll 0 -100px;
color: #ffffff;
}
*/

Click "Save Template" and that's all. You can reverse the case anytime.

Now you can add any drop down menu to your navigation bar without any difficulties. Hope this post has helped you? Please take few seconds to share this with your friends.
You can also Subscribe to receive our free posts update into your email.

Site Developed, Designed and Maintained by Rayees Rehman Mir. Copyrights © Rayees Rehman Mir, 2010 - 2016. Best viewed on Firefox and Google Chrome.