FYI: Posts will be sparse around here until I replace my laptop.... Coming back to work after Christmas break apparently was too hard and it quit on me!

19 April 2011

Tuesday's Tips -Expandable/Collapsible Toggle Menu

Brooke, here is the requested tutorial! I learned how to do this by Olivia's tutorial over at Robin Blogs. Unfortunately she took her tutorial down, but she did give me permission to write my own tutorial.
I do have to warn you all that this is one of those more advanced tutorials, that will take a lot of patience, time, and trial & error. =) That said, let's get to it!
If you'd like to take a look at what we'll be making turn your attention to the menu at the top of my sidebar. =)

1}
adding the script behind the code

First of all search for this little bit of code:
]]></b:skin> 


Right underneath that copy/paste this:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://photographybyemilygrace.bracehost.com/accordionButton.js' type='text/javascript'></script>
This is what makes the toggle menu work.  =)  So if you mess this part up, the whole thing won't work. But if you just copy/paste it should work just fine.  (one note, it took some time for mine to start working, so don't panic if the menu doesn't work right after you install it)

now for the creative part...

2}
adding the code behind the menu

This is what controls what the menu looks like.
First of all search for this little bit of code(again):
]]></b:skin> 


Right above that copy/paste one of these codes (I'm giving you a few examples to show you how you can change the design--please feel free to tweak it however you'd like, infact I encourage you to make it as much 'yours' as possible):
.accordionButton {
width: 250px;
height: 25px;
float: left;
background: #EEF0F1;
background-image:url(//70.38.54.187/h/404/d4d8c700-2855-485e-94a0-5de81b9f1329.jpg);
background-position: 0% 0%;
background-attachment:fixed;
border: 1px solid #999;
margin-top: 1.5px;
margin-bottom: 1.5px;
padding-top: 3px;
cursor: pointer;
color: #666;
font-family:"century gothic", verdana, arial, sans-serif;
font-size:20px;
text-transform:none;
letter-spacing: 0px;
}
.accordionContent {
width: 250px;
float: left;
display: none;
font-family:"Century Gothic";
font-style: none;
font-size: 12px;
letter-spacing: 1px;
text-transform:none;
letter-spacing: 0px;
margin-bottom:3px;
}

.accordionButton {
width: 250px;
height: 25px;
float: left;
background: #d94b51;
border: 1px solid #999;
margin-top: 1.5px;
padding-top: 3px;
cursor: pointer;
color: #fff;
font-family:"century gothic", verdana, arial, sans-serif;
font-size:20px;
text-transform:uppercase;
letter-spacing: 0px;
}
.accordionContent {
width: 250px;
float: center;
border: 1px solid #999;
display: none;
font-family:"Century Gothic";
font-style: none;
font-size: 12px;
letter-spacing: 1px;
text-transform:none;
letter-spacing: 0px;
margin-bottom:3px;
}




.accordionButton {
width: 200px;
height: 25px;
float: center;
background: #FFFFFF;
border-bottom: 0px solid #a6ba7c;
cursor: pointer;
color: #a6ba7c;
font-size:14px;
text-align: center;
text-transform:none;
letter-spacing:4px;
}
.accordionContent {
width: 200px;
float: center;
display: none;
font-size:12px;
text-align: left;
letter-spacing: 1px;
border:1px solid #a6ba7c;
}





3}
adding the menu

Add a new HTML/Javascript widget and paste this into it:
<div class="accordionButton">
TITLE
</div>
<div class="accordionContent">
CONTENT
</div>

Replace TITLE with your title and CONTENT with your content, respectively.
Copy and paste that code as many times as you need for however many buttons you want your menu to have.


Extra Tip
If you'd like to make one of your buttons link to a page instead of a drop-down follow this example:
<a href="http://emilygrace-blog.blogspot.com"><div class="accordionButton">Home</div></a>

Ta-da! You did it! =D
If you have any questions, feel free to let me know and I'll get back asap.

In Christ,

27 comments:

Becky

Cool! I'm excited to try this out! Thanks!

Eve

Thanks for the tutorial! I'll try adding one of those to my photography blog. :)

Keaghan

Thanks for the tutorial! Can't wait to try it out on my blog! :)

Eve

Sorry for the trouble, but I have a little problem here...
I completed the tutorial, step by step. The menus show up and everything, but when I click on one it doesn't drop down. Nothing happens. Could you please give me a few tips on what to do? I'm pretty sure I didn't get anything wrong.

Also, I was wondering, if I want to make the menu titles bold do I just type in "font-style: bold;"?

Thanks,

Eve

Emily Grace

Eve - "font-style: bold;" will work perfectly to make your font bold.
I'm sorry it isn't working right away for you. Double check and triple check to make sure you don't have any little typos. The same thing happened to me, I just had to wait a few hours. I have no idea why. Hopefully it will work soon!

Jennoelle

You. are. amazing. :) :) I've been looking for a tutorial on this for ages and couldn't find a good one. I'm totally trying this out sometime!! <3

Brooke

Thank you, thank you, thank you! :D Mine's on my blog, but not working yet, so hopefully it'll start soon!

Sky

Yay! Thank you for this tutorial, Emily! I'm excited. :) Mine is on my blog. It's not working yet and I installed it yesterday afternoon. I'm pretty sure I did all the steps correctly, so I'm not sure what's wrong. I guess I'll just wait for it to start working. :P

Love,
-Kylie

Brenna

Thank you so much for this tutorial. I have been looking for it everywhere!

hannahlouise

Hey Emily Grace, where abouts in the template HTML will you find that first bit of code? the ]]><b:skin ?

Emily Grace

hannahlouise - That piece of code should be near the end. Search(ctrl+f) for it and you should be able to find it. If not, let me know and leave a link to your blog. Then I'll look at your code for you. hope this helps!

Grace Anna

Emily, you are wonderful!!! I'm trying to learn more about HTML and your site is the best I've found so far!

I have a little problem. :( After I do steps 1 and 2 and I try to save it, it keeps telling me:

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The end-tag for element type "script" must end with a '>' delimiter.

Help???

If it would be any easier for you, you can email me at: fracefulnotesblog@gmail.com

Emily Grace

Grace Anna -

My guess is that there is a mistake with step one. It sounds like you missed the '>' symbol at the end of the code for step one. Make sure you copied and pasted all of the code given and didn't miss an ending or beginning piece. Double check and see if that is the case.
If that didn't work and you would like to, you can make me an admin on your blog and I can insert the code pieces. Then you can customize them however you want.
Hope this helps!

- Emily Grace

Grace Anna

That did it! Thank you, thank you!!!

P.S. I just noticed that I CANNOT type! My email in the above comment is gracefulnotesblog@gmail.com! :)

Gloria A.

I put mine up today over at my blog, www.discovercaptivating.blogspot.com, but it doesn't drop down when I click on it. I waited for a few hours (7 exactly) but it still doesn't work. Can you help?

Emily Grace

Gloria A. - I went to your blog and everything looks fine. I had to wait three days before mine started working. Sorry! I don't know exactly what the problem with that is.

p.s. your blog is beautiful! :) what font did you use on your button? it is lovely and I'm just curious. ;)

Gloria A.

The font I used for my button: I went onto Picnik.com and I used MigrainSerif for the font, and then I went and enlarged periods and used them to dot the "i"s. Thanks for answering!

Emily Ruth

what if I want there to be links like Grace has on this blog: http://gracesgardenwalk.blogspot.com/?

Emily Grace

Emily Ruth - Simply add the link in the content area of the button html code widget.
Example:
(div class="accordionContent") (a href="URL")LINK TITLE(/a) (/div)
replace all '()' with '<>'

Refer to this post for more information on links. =)

Emily Ruth

Thanks so much!

Emily Ruth

So, I changed the style of the menu. I thought that if I was using one of the codes in this post and just replacing what was there it would still work right away. However, it isn't. I installed it a couple of days ago and it isn't working yet. Did I do something wrong?

Emily Grace

Emily Ruth & anyone else who is trying this tutorial - For some reason my javascript code is not working. I tried creating a new one and using that, but it still didn't work. So, use the one Hannah gave in her tutorial here.


REPLACE:
[script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'][/script]
[script src='http://photographybyemilygrace.bracehost.com/accordionButton.js' type='text/javascript'][/script]

WITH:
[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]

and replace [] with <>

Emily Ruth

Thank you so much, Emily! It works now. :)

Hannah E

Hi Emily! I was just wondering what kit/website you got the damask paper behind the first menu? It's really pretty! :) Oh, and by the way, thanks for answering my question about the bird stamp on your header. ;)

Hannah at Hannah, Herself

Emily Grace

Hannah E - It is from the Sweet Springtime kit by Summer Driggs. You're welcome. =)

marcia

Hey, Emily. I am trying to change the font on my menu, but I won't change. I've tried several fonts and it just doesn't work. Can you help me with this?

Emily Grace

Marcia - Send me an email with the code that you're using and the name of the font you'd like to use. I'll try to find the problem. =) {alifeworthyoftheLord(at)gmail(dot)com}

Post a Comment

Leave your thought...