JQUERY: Simple Accordion Drop Down Menu With Jquery & CSS
A lot of Blogger users are having problem getting the correct accordion menu to show up your blog recipes. In this tutorial I am going to show you how to add a jQuery accordion menu in blogger blog. Most of the time it is possible to create very functional website navigations with just CSS, but this time we are going to need a little jQuery magic to accomplish the accordion functionality. Before that, lets first talk a bit about why you would want to add accordion menu? Well some people think that it will help with the SEO. But we think that the main reason why you would want to use them is to offer a better user experience on your site.
This tutorial requires you to have fair understanding of HTML, CSS.
Features: V 1.0
- Standard Expand/Collapse functionality.
- Activate/Deactivate whenever a 'click' event occurs.
- The Accordion plugin provides support for unlimited number of levels.
- The plugin could easily be customized and used with any website.
- It allows multiple instances of the accordion on the same page.
and in future we will try to add some design update, functionality and much more..
How to add it to blogger blog
- Blogger: Go to Template > Edit HTML.
- Locate the
]]>
tag end of the style sheet. - Copy the code below and insert it right above the tag.
#accor-wrap{
width: 350px;
font-family:Verdana, Geneva, sans-serif;
margin-left: auto;
margin-right: auto;
}
.accordionButton {
width: 325px;
float: left;
background: #fff url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-light.png) repeat-x bottom left;
font-size: 14px;
font-weight: bold;
color: #555;
border-bottom: solid 1px #ddd;
padding: 3px 0px;
cursor: pointer;
padding: 5px 10px;
text-shadow: #fff 0px 1px 0px;
}.accordionButton span {
float:right;
margin-right: 10px;
color:#555;
border: 1px dotted #555;
display:inline-block;
}
.accordionContent {
width: 325px;
float: left;
background: #444;
font-size:12px;
display: none;
padding: 5px 10px;
margin: 0 auto;
}
.accordionContent ul {
float: left;
width:300px;
margin:0 auto;
padding:10px 10px;
}
.accordionContent li {
list-style: none;
list-style-image: none;
}
.accordionContent li a {
background: #555 url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-light.png) repeat-x 0 100%;
display:block;
font-family:Arial, sans-serif,Helvetica;
font-size:12px;
font-weight: bold;
overflow:hidden;
color:#555;
border: none;
text-decoration:none;
position:relative;
width:100%;
line-height:20px;
text-transform:capitalize;
padding:5px 0 10px 5px;
text-shadow:0px 1px px #fff;
}
.accordionContent li a:hover{
background: #b3b3b3 url(https://dl.dropboxusercontent.com/u/223738947/Demos/Jquery%20Accordion%20Menu%20For%20Blogger/Images/bg-shade-medium.png) repeat-x 0 100%;
text-shadow:none;
color: #fff;
text-decoration:none;}
- Locate the
tag in the middle of your template.
- Copy the code below and insert it right above the tag.
- Go to Layout.
- Click Add A Gadget.
- In Add A Gadget window, select HTML/Javascript .
- Copy the code below and paste it inside the content box.
- Save the gadget.
- Drag the gadget and reposition it where you want to show gadget.
- Click Save button (top right hand corner).
Top Blogger widget 2014 ▼
Top SEO Articles ▼
Top Best Blogger Template ▼
Top Blogger Resources & Tools ▼
Troubleshooting for setting up for your blog
In the above html code we have created 4 accordion menu.
- Replace Highlighted in yellow with the name of the dorp down title.
- Replace Highlighted in Green with your Link anchor text.
- Replace hash (#) sign with your article (page) link.
So now we sure you want to add another dropdown, So then just add the following code after