HOW TO: Make An Accordion Menu

In my now-not-so-recent re-design, I added an accordion menu to my sidebar. It really helped me condense some of my various other widgets, and it has given the blog a much neater, cleaner look. As you can see under "Contact" I was able to add and format text (hence the bold). And under the other two, are examples of custom or third-party HTML. You can add as much content for each menu as you want, and you can have as many menus as you want, all in ONE widget. Which helped me in my organization. So, all that promo out of the way, here is how you get your own.


HOW TO ADD AN ACCORDION MENU TO YOUR BLOG

1. Dashboard>>Layout>>Add Gadget>>HTML/JavaScript
2. Add the following code:
<p>
<font face="Dancing Script"></font>
</p>
<style type="text/css">
#wrapper {
width: 200px;
margin-left: auto;
margin-right: auto;
}
.accordionButton {
width: 200px;
float: none;
background: #eeeeee; /*background color of menu title buttons */
cursor: pointer;
color:#000000; /*Text color for Title buttons */
text-align:center;
padding:0px;
margin-bottom:2px;
}
.accordionContent {
width: 200px;
float: none;
background: #eeeeee; /* background for the content */
display: none;
}
</style>


<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="http://hrpblogdesigns.webs.com/Accordion%20Menu/javascript.js"> </script>


<div id="wrapper">
<div class="accordionButton">TITLE OF FIRST MENU</div>
<div class="accordionContent"><p align="center"> FIRST MENU CONTENT
</p></div></div></!doctype>
<div id="wrapper"></div>

<div id="wrapper">
<div class="accordionButton"> TITLE OF SECOND MENU</div>
<div class="accordionContent"><p align="center"> SECOND MENU CONTENT
</p></div></div>

<div id="wrapper">
<div class="accordionButton">TITLE OF THIRD MENU</div>
<div class="accordionContent"><p align="center"> THIRD MENU CONTENT
</p></div></div></!doctype>
<div id="wrapper"></div>
3. I have put notes between /* and */ tags to help you customize, and the rest I think is fairly easy to understand.
Now, each of the individual menu thingies is held it this section of the code:
<div id="wrapper">
<div class="accordionButton">TITLE OF THIRD MENU</div>
<div class="accordionContent"><p align="center"> THIRD MENU CONTENT
</p></div></div></!doctype>
<div id="wrapper"></div>
so you can add that at the end as many times as you want menus. I have three on mine, so that is what is in the base code.

4. Save your gadget and head over to your blog to make sure that you like the way it looks. Don't forget that you can put HTML/CSS or just Text in the content area. Whatever you want.  


I hope you find this to be easy, useful, helpful, pleasing, or all of the above. Do enjoy your life in this odd little world we live in. photo theauthor_zps8356b86b.png

FACEBOOK   GOOGLEPLUS   PINTEREST   TWITTER

No comments:

Post a Comment

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)