How to Add a Drop Down Menu Navigation in Blogger
I have been trying to create drop down menus in blogger like your blog has for your reviews. I have tried a couple different tutorials and nothing seems to be working. Do you know how to do this? Thanks so much for your help, Ashley!Rebecca Lockhart
I stressed over this question for WEEKS! The problem is that there is no easy way to do this in Blogger. You have to write your own HTML and CSS to get it working, and for me that isn’t a problem, but trying to explain it to non-coders is REALLY difficult. And then there’s the problem of me trying to code it for multiple different blog designs.. it just isn’t easy!
Then I found a great site that suddenly made my tutorial so much easier!
But keep in mind that you will still have to edit your template CSS and HTML a lot.
Step #1: Create Your Menu
First, head on over to CSS Menu Maker and create your navigation menu! Pick one of the pre-made styles they have and click “Customize”. Then you can add links to the menu, drag them around, change the titles, and insert the URLs. For each menu item you have to put in the URL of the page. You will need to copy and paste this from your Blogger site!
When you’re done, click the “Download” button.
Step #2: Adding the CSS
After hitting “Download”, you should have a .zip file on your computer. Unzip it so that you have access to the files inside. There should be a folder in there called “menu_assets” and a file called “style.css“. Open up that file in some kind of text editor (like Notepad, Notepad++, or Textwrangler). You will need to copy the code and put it on your blog. For now, leave it open in the text editor, and open up a new page to your Blogger blog.
You have to click on the tab to go to “Template”. Before we do anything, you need to back up your template! Since we’re editing code it’s really important that you back it up beforehand in case you make any mistakes and need to revert them. So, in the top right corner, click on “Backup / Restore“, and then click the button to “Download full template”.
Once you have your template backed up, click on the button to “Edit HTML”. Look for the bit of code near the top that looks like this:
Click on the text that says <b:skin>…</b:skin> to expand it. Then scroll aaaaall the way down until you find the </b:skin> tag again.
Make a new line BEFORE the </b:skin> line. This is where we’re going to put our first bit of code! So go back to your text editor with the style.css document and copy everything. Then, paste it in your template on that new line we made. Then, save your template. You might want to refresh the homepage of your blog to make sure nothing is broken. Nothing should look different after adding this code! So make sure everything is working as expected.
Step #3: Adding the HTML
Next up, we have to add the HTML. Go back to the files you downloaded from CSS Menu Maker. There should be a file called instructions.html. Double click that file to open it in your web browser. Ignore all the instructions except for #3:
3. Copy and paste the html below where ever you want your menu to show up.
Copy all the text in the box below that line. This is your HTML! Now we just have to put it into Blogger…
THIS IS THE HARDEST PART OF THE TUTORIAL!!
This is literally one of the reasons why I dreaded writing this tutorial. The question is: where do we put the HTML? The answer: it depends on your template. That’s why this tutorial sucks. Even more so if you have a custom made template.. the HTML may vary. So, I’m sorry that this is so hard to explain because it seriously depends on where YOU want your navigation (above or below the header?) and what template you’re using.
On the Template page, click Edit HTML. Now you need to go digging through the template to paste the dropdown code HTML in somewhere. Yep, I’m not even joking. If you’re using a default Blogger template and want the dropdown above your header, a good place to put it is right below this line:
<div class='content-outer'>
Right below that, enter the dropdown HTML text.
Want it below your header? Here’s a good place:
</header> <!--menu HTML goes right here--> <div class='tabs-outer'>
Paste in the HTML where I’ve written “menu HTML goes right here”. In between the closing </header> tag and the <div class=’tabs-out’> tag.
Aaaand you’re done!
Assuming you’ve followed all the steps correctly, you should now have a working dropdown menu! Check out my result:
Comments have been closed because I’m no longer able to provide individual blog assistance with these menus. If you’re having trouble with your drop down, try reading through the comments to see what helped other people.
Don't miss my next post!
Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).
text-align: center;
}
float: none !important;
display: inline !important;
}
display: inline-block !important;
}
top: 16px !important;
}
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
*width: 100%;
}
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
*width: 100%;
z-index: 2000;
}
float: none !important;
display: inline !important;
}
float: none !important;
display: inline !important;
position: relative !important;
}
I will definitely try it out.
Is it possible to create a submenu in the drop down menu.
Thanks again for the awesome post!
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
*width: 100%;
}
#cssmenu ul ul { z-index: 500; }
#cssmenu > ul {
text-align: center;
}
float: none !important;
display: inline !important;
}
display: inline-block !important;
}
top: 16px !important;
}
float: none !important;
display: inline !important;
}
float: none !important;
display: inline !important;
position: relative !important;
}
here you go: http://minawritesfanfiction.blogspot.com/
I followed your steps and the HTML version works but the CSS doesn’t. I tried many things (modifying the tabs CSS code that made changes but not what I wanted). I would be so glad if you could take a look at my site and share your idea. Thx
I had probs like unable to click the dropdown links,but I followed ur comments nd got it sorted though there is one problem…
When I center the tabs,I am unable to click on the links again
also is there a way to have a colour for drop down menu instead of transparent??
still the transparent thing is not sorted
Finally learned how to do it
th@nx
-Dropdown menus get hidden underneath the body of the blog and so are not clickable as they disappear too quickly
-The colour of the box appears to have turned black/grey though i set it to white on the designing website, cant quite pin down which value to change to make it white/silver though i managed it on the dropdown menus, just not the navbar itself.
Thanks
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
add this line:So, is there a way to automatically scale down my blog for each monitor size, or could we just shrink the dropdown menu regarding its horizontal dimension to 985 px wide (its original width)?
Sorry for bothering you with so many questions and thanks again for all your time and effort with your answers.
#cssmenu .has-sub li a {margin: 0 !important;
padding: 8px 5px;
width: 100%;
}
#cssmenu .has-sub li {
margin: 8px 0;
}
#cssmenu .has-sub li a {
color: #848764;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
What did I do wrong? Please, help..
/* Menu CSS */#cssmenu,
#cssmenu > ul {
background: url(images/highlight-bg.png) repeat;
padding-bottom: 3px;
font-family: ‘Open Sans’, sans-serif;
font-weight: 600;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: ”;
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: url(images/menu-bg.png) repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > a {
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
line-height: 18px;
}
#cssmenu > ul > li:hover > a {
background: url(images/highlight-bg.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li > a > span {
line-height: 18px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active {
background: url(images/hover.png) repeat;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(images/menu-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 64px;
left: 0;
}
#cssmenu > ul ul:before {
content: ”;
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a {
padding: 18px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
#cssmenu > ul ul li a:hover {
border-left: 4px solid #d64e34;
background: url(images/hover.png) repeat;
}
#cssmenu > ul ul li a:active {
background: url(images/menu-bg.png) repeat;
}
<!--<div id='cssmenu'> <ul> <li><a href='http://tehais-scans.blogspot.com/' rel="nofollow"><span>Home</span></a></li> <li class='has-sub'><a href='#' rel="nofollow"><span>FAQ</span></a> <ul> <li><a href='http://tehais-scans.blogspot.com/p/postshare-in-other-sites.html' target='_blank' rel="nofollow"><span>Post/share in other sites</span></a></li> <li class='last'><a href='http://tehais-scans.blogspot.com/p/retranslations.html' target='_blank' rel="nofollow"><span>Retranslations</span></a></li> </ul> </li> <li class='has-sub'><a href='#' rel="nofollow"><span>Projects</span></a> <ul> <li><a href='http://tehais-scans.blogspot.com/p/oneshots.html' target='_blank' rel="nofollow"><span>Oneshots</span></a></li> <li><a href='http://tehais-scans.blogspot.com/p/doujinshis.html' target='_blank' rel="nofollow"><span>Doujinshis</span></a></li> <li><a href='http://tehais-scans.blogspot.com/p/ongoing.html' target='_blank' rel="nofollow"><span>Ongoing</span></a></li> <li><a href='http://tehais-scans.blogspot.com/p/completed.html' target='_blank' rel="nofollow"><span>Completed</span></a></li> <li><a href='http://tehais-scans.blogspot.com/p/future.html' target='_blank' rel="nofollow"><span>Future</span></a></li> <li class='last'><a href='http://tehais-scans.blogspot.com/p/dropped.html' target='_blank' rel="nofollow"><span>Dropped</span></a></li> </ul> </li> <li class='has-sub'><a href='#' rel="nofollow"><span>Commissions</span></a> <ul> <li><a href='http://tehais-scans.blogspot.com/p/commissions.html' target='_blank' rel="nofollow"><span>What's This?</span></a></li> <li><a href='http://tehais-scans.blogspot.com/p/commission-projects-list.html' target='_blank' rel="nofollow"><span>Project List</span></a></li> <li class='last'><a href='http://tehais-scans.blogspot.com/p/request-commission.html' target='_blank' rel="nofollow"><span>Request yours now!</span></a></li> </ul> </li> <li><a href='http://tehais-scans.blogspot.com/p/recruitment.html' target='_blank' rel="nofollow"><span>Recruitment</span></a></li> <li class='last'><a href='http://tehais-scans.blogspot.com/p/contacts.html' target='_blank' rel="nofollow"><span>Contacts</span></a></li> </ul> </div>-->
<!--
-->
#cssmenu > ul > li > a:active {
background: url(images/hover.png) repeat;
text-align: center;
}
float: none !important;
display: inline !important;
}
display: inline-block !important;
}
top: 16px !important;
}
background: url(http://i1283.photobucket.com/albums/a555/VenVes/ANOTHERhighlight-bg_zps53330168.png) repeat;
http://i1283.photobucket.com/albums/a555/VenVes/thegapistooclosebetweentextandbgborder_zps95c57cec.jpg