Finally – the long-awaited tutorial on menus – called drop-down, accordion, and toggle…whichever you like 
step one {analyze}
Before you start doing any copying or writing for the menu, we need to break the code down. There are three parts to make this work.
- CSS (To make the buttons look pretty)
- JavaScript (To make it actually drop down)
- HTML (To build the actual menu)
Let’s look at the basic code. (Keep in mind the color code.)
<style type="text/css">
#wrapper {
width: 200px;
margin-left: auto;
margin-right: auto;
}
.accordionButton {
width: 200px;
float: none;
background: #C0C0C0;
cursor: pointer;
color:#000000;
text-align:center;
padding:0px;
margin-bottom:2px;
}
.accordionContent {
width: 200px;
float: none;
background: #ffffff;
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">BUTTON NUMBER ONE NAME</div>
<div class="accordionContent"><p align="center"> YOUR CONTENT HERE</p></div><div class="accordionButton">BUTTON NUMBER TWO NAME</div>
<div class="accordionContent"><p align="center">YOUR CONTENT HERE</p></div><div class="accordionButton">BUTTON NUMBER THREE NAME</div>
<div class="accordionContent"><p align="center">YOUR CONTENT HERE</p></div></div>
</!doctype>
Okay! That doesn’t look to bad, does it? Not at all. Now, copy and paste it all into a widget box on your blog.
Let’s start with the styling – the CSS. Here are some principals.
#wrapper { This addresses the buttons and their content.
width: 200px; Establishes the width of your buttons and their content.
margin-left: auto;
margin-right: auto;
}
.accordionButton {
width: 200px;
float: none;
background: #C0C0C0; Establishes background color.
cursor: pointer; Makes the cursor into a little hand when you mouse over.
color:#000000; The color of the text on your buttons. (But not content)
text-align:center; Aligns everything in the center. It can also be left or right.
padding:0px;
margin-bottom:2px; Creates a tiny bit of white space between each button.
}
.accordionContent {
width: 200px;
float: none;
background: #ffffff; Background color of your content.
display: none;
}
Make any and all adjustments to that code. Now that it looks pretty, let’s add the HTML structure. (We’ll ignore the JavaScript – what I’ve done is linked to the source…I host it…and there’s no need to edit it.)
<div id="wrapper">
<div class="accordionButton">BUTTON NUMBER ONE NAME</div>
<div class="accordionContent"><p align="center"> YOUR CONTENT HERE></div><div class="accordionButton">BUTTON NUMBER TWO NAME</div>
<div class="accordionContent"><p align="center">YOUR CONTENT HEREp></div><div class="accordionButton">BUTTON NUMBER THREE NAME</div>
<div class="accordionContent"><p align="center">YOUR CONTENT HERE></div></div>
</!doctype>
This is very self-explanatory. Make sure to only erase the bold words, though – don’t touch anything else or it won’t work. Here are some principals to keep in mind when writing the code -
Adding links
<a href=”YOUR LINK”>LINK NAME</a>
adding photos
<img src=”DIRECT LINK TO PHOTO” alt="ALTERNATE TEXT, SUCH AS BIO PHOTO" />
Embellishments
<b>TEXT YOU WANT BOLDED</b>
<i>TEXT YOU WANT IN ITALICS</i>
<font color=’#000000’>TEXT YOU WANT COLORED</FONT>
Now that you’ve styled your menu, written your content, and make it pretty with photos, links, and colors, you’re all done! =D Now, unless you’re very experienced in writing code, you’ll probably make some mistakes – but don’t get frustrated! HTML and CSS are picky things to deal with. If you forget even one character or symbol, it won’t work. So if something is going wrong and you just can’t figure out what it is, let me know and I’ll help you out. ;)
Do realize that while this tutorial will work on most browsers, it won’t work on all. When I took the poll here a few weeks ago, two people out of twenty-eight couldn’t use the menu. So a small percentage of people won’t be able to use it…but most will. It’s okay – it’s part of life with different browsers. ;)
Did you use this tutorial to create your own menu?? I want to see it!! Leave a comment with the link to your blog and I’ll check it out! And congratulations on conquering the scary mountain of drop down menus. ;)
112 comments:
Hi!!
I'm iGirl, from
isputty-ihypie.blogspot.com.
I have a question about this tutorial. When I'm trying to put a picture in, all that comes up is what I call it, not the actually picture.
Is there a certain place where I have to put it in the code or something? Other than that this tutorial worked wonderfully! Thanks so much!
So glad the tutorial worked well for you, even though that pesky img tag went wrong! =D
It sounds to me like you've got a broken link.
You'll need to make sure that you have all of the direct link to your photo, including the http://. Another thing to double check would be the quotes - it's so easy to put two in, and then nothing works. You'll want to keep the img tag inside the paragraph tags, just to be safe. So right before any text.
If you still can't figure out what's wrong after playing with it, I'd love it if you'd paste the code in a comment so I can check it out! Hopefully I'd be able to spot the problem. ;)
Hi,
I put the menu on my blog succesfully, but whenever I press on any of the buttons, they drop down, but instantly go back up...what do I do?!
Bethany. :)
I just emailed you, Bethany, but I'll paste it in here, too. ;)
Could you be double-clicking? It should just take one click to bring the menu down. If that isn’t the problem, you might want to re-paste the code with the links to the javascript. That’s weird, though, I’ve never had that problem myself! =D
Let me know if it doesn't work!
Hi!
I've tried to make one of these, but I seem to have loads of trouble doing so. Whats a widget box? Where do I copy the first code to? I'm not very good at these things... I usually have someone do it for me...
Thanks for making this post :)
-Ani
Hey Ani!
I totally understand! =D It took me a few months to figure it all out, too. =) A widget box is the html/javascript box you can add to your blog in the "page elements" page (under "Design") Simply click "add gadget," and find the "html/javascript" option.
You'll be copying all the code into one of those boxes. Everything goes in there - the html, the css, and the links to the JavaScript.
Let me know if you have any more problems or questions! =D
Ok, so I did it and it works fantastic! Thanks SO much! =D I've been looking for a good tutorial for ages and never found one that actually works. Haha. Thanks for spending the time to put this together!
I did have one quick question though... can you change the font of the content and the name? If you need to e-mail me, my e-mail address is:
abby789@gmail.com
Thanks so much!!
Abby
FollowGod
Hey Abby! Oh, I'm so glad you were able to use this! =D Yes, you can definitely change the font - you'll do that by going to #wrapper and adding the following code right below it:
font-family:times new roman, century gothic, georgia, arial, verdana, sans-serif;
Change the first font name to whatever you want. The reason that there is more than font name is so that any computer can read the text - Mac users will be able to read your text even if they don't have century gothic font. But in general you'll want to use a common font so that almost everyone will be able to see it. =D
Do you mean changing the name on each button? You definitely can! You'll do this in the html section of the code. In my setup the name of the top button is "button number one name." Just change that to whatever you want! =D
Let me know if you have any other questions! =D
Thanks so much! It worked great. =) Wow, thanks for responding so quickly! =D
Yay! Glad it worked. Haha you're very welcome! =D
I'm working with it on my test blog, but I do have one problem. I want a link to go to my profie (http://www.blogger.com/profile/14805934251996246255), but instead it went to it as a blog page, like
http://natalia-mytestblog.blogspot.com/blogger.com/profile/1480593425199624 .
And then it says, "this page is not available".
Any tips?
Thanks!
Hey Natalia! Well, it sounds to me like a broken link...try this code -
profile
Let me know if you still have problems with it! =D
I got it fixed, but then I was working on some HTML -- trying to make it a different color -- and now the menus won't go down at all!
I promise you, I'm not being stupid. I've worked with HTML before, but I don't know if something's wrong with the javascript? I just copied and pasted it, and it wouldn't work.
Sorry! If you could either get back to me here, on my blog, or by email -- thelesliesisters {at} gmail {dot} com , that would be great. Thanks!
Oh, that's weird! =P Well, the JavaScript itself is functioning - I copied and pasted the code and everything worked just fine. If you copy and paste the section that has the links to the JavaScript again, that should fix it. Oh, did the menu work beforehand? If not, it might be your browser that's causing the trouble...
If things still aren't working, would you mind if I took a quick look at it? Maybe a fresh pair of eyes could be a little help... =D
I still cannot get it right. Would you be able to email me? Thanks!
Hi Hannah,
I tried to put the menu on my other blog, and it works perfectly! YEA!! But it's tiny (height wise). Is there a way to make the boxes bigger?
Bethany. :)
Hey Bethany! Yay! =D Yep, you sure can make them bigger! All you need to do is increase the padding in the .accordionButton section...increasing it to about 3 to 5 pixels should do the trick! =D
Alannah - I'll be happy to email you! I will do that tonight. =)
Thankyou sooooo much for this tutorial. I've been looking for something like this for so long. It works perfectly for me.
~india
www.heaveninmyheart96.blogspot.com
Thanks! I'll see if it works. :)
I spoke to soon. :) Whenever I put in any links, when you click on them, it always says that the page on my blog I was looking for is not found. But most of them are not even blog pages! I wanted my profile and links to my other blogs. I've tried a few times but it won't work. Any ideas?
Thanks.
India - I think you have some broken links there. Be sure that all your links are in the following form -
http://yourlinkhere.com/
and be sure that they're surrounded by quote marks like this -
"http://youlinkhere.com/"
Let me know if you still have problems! =D (Oh, and another thing - be sure that the link tags are spelled correctly (i.e. href, not herf. ;)) I make that mistake all the time.)
Sorry to have another problem! And if there's not way to fix this, it's totally ok. =) If you check out my blog and click on "the author" bar, the picture goes in a little and thin slides back up. I've used a smaller photo, a bigger photo, and the exact size as my menu, but it still does that. I was wondering if you knew what the problem was? Thanks!!
Abby
I'm sorry, I think I do this every time to you! I actually just figured it out. Ok, so I didn't figure it out. But I did something and now it doesn't have that problem. Haha. Anyways, thanks!
Abby
Haha it's fine! =D I'm glad you got it fixed. From what you described, though, it sounds like the width of your text was a bit smaller than the overall width, which made the picture get cut off when the text scrolled up. =)
Hi Hannah,
Thanks for your comment answering me. I'm afraid to say that I tried it all many times and it still won't work!
Sorry to be a bother,
India
Hey India! Oh, I'm sorry to hear that. =P I just checked out your code and saw that this is what one of your links looked like - (I've left off the "<>" because otherwise blogger would translate it into a link. ;) )
a href="%E2%80%9Dhttp://heaveninmyheart96.blogspot.com/p/about-me.html%E2%80%9D"
I don't know if Blogger inserted the "%E2%80" before and after the code, but try removing both of those. It should be
a href="http://heaveninmyheart96.blogspot.com/p/about-me.html"
If you keep having trouble, email me at info@beautydesignstudios.com and we can look at the code in more detail! =)
Hannah,
I tried your tutorial on my test blog and I got the buttons on my blog but the boxes won't drop down... ??
My test blog is http://libbytest11.blogspot.com/
Hi, Hannah!
First of all, thanks so much for the tutorial. I've been looking for a simple one to follow.
I filled in all the required information, following all of your steps, and when I publish it on my blog, the buttons are there, but when you click on them, nothing happens. I have followed your tutorial at least five times and have been careful to keep the code the same, not changing anything.
Your help is much appreciated.
Blessings,
Grace
Hey Libby! Try this code - (you'll have to copy/paste it) http://hrpblogdesigns.webs.com/menu.css
Let me know how it goes! It should work - I tried both yours and this one on one of my test blogs, and this worked. =)
Hey Grace! I think I know what the problem is - it's actually my fault. I messed up some of the paragraph tags, and I didn't even notice it until today! Check out this link - you can use the code as your base menu. It will work correctly. Sorry about all that! =D
http://hrpblogdesigns.webs.com/menu.css
Hannah,
Thanks SO much for this tutorial! I've been looking everywhere on how to make these :)
I am having some trouble with getting links to work too- when I press the link, it says "sorry, this page in the blog ambitious homemaker was not found..." Any ideas?
Thanks so much :)
You're very welcome, Gabby! =D Check and make sure that you have only one pair of paragraph tags per button. You'll have one at the very beginning, and one at the end, even if you have images and links in between. If you still have everything right, but it won't work, feel free to email me your code at info@beautydesignstudios.com, and I'll help you out! =D
THANK YOU THANK YOU THANK YOU THANK YOU!
i've been looking everywhere for this tutorial. it works perfectly for me. ♥
hey Hannah! I used your tutorial on my new photography blog:
http://selah-photoblog.blogspot.com/
Thanks so much for this tutorial! It's so simple! ;-)
Just one thing: beneath that #wrapper bit of code, where you can make your buttons wider or thinner...well, it doesn't work. :( I even tried making it 1000 pixels. :) But it's not a big deal, if you don't have any solution of the top of your head! :)
Hey Guinevere! Good, I'm glad it helped you out! =D
You'll need to put the pixel width in the #wrapper section, the .accordionButton { section, and the .accordioncontent { section. That should fix it up! =D
Hi, I have a question. I know someone asked this already, but how do you fix the buttons not coming down? I don't know where to put the link you talked about. Thanks :)
chunkeymonkey-chunkeymonkey.blogspot.com
Hey Renata! Well, everything should be working properly, but go to this link - http://hrpblogdesigns.webs.com/menu.css, copy the text that's there, and paste all of it into a new html/javascript box in your page layout. Let me know if you still have problems! =D
Hannah-
This works pretty well for me! Thanks so much for putting it up!
A couple things, though:
Do I need to resize photos the same size as my menu, or will that automatically?
And, also, how can I make more buttons on my menu?
Hope
Thanks, I tried it and it worked! I have one more question, like Bethany Hanna Lousie- The buttons go down, but come right up. I tried deleting it, but it still does it. Any ideas?
Hey Hope! You're very welcome!
You don't need to scale your image down in an editor, but you do need to specify widths and heights if you want the photo to be smaller than it actually is. You'd do that by including the following code -
width="a number px" height="a number px"
right after your direct link. So you'll have all this -
src="direct link" width="a number px" height="a number px"
Remember to keep everything scaled properly so that the photo won't go out of proportion. =)
To add new buttons, all you need to do is copy the section of code from the div class="accorionbutton" to the /div (Note that I've left of all the <>s so blogger will accept this comment) Copy that code and paste it in, and you'll have a new button! =D
Renata - I just checked your code, and couldn't find the problem. So I re-did it, and it works now! =D I'll email you the code. =D
How do I change where they are positioned? I have one a little off centered. Very helpful, BTW.
http://rejoicing-evermore.blogspot.com/
Bethany
Hey Bethany!
Paste the following code underneath the accordionButton section -
margin-left: auto;
margin-right: auto;
That should fix everything. If it doesn't, let me know. ;)
Oh, you know what Bethany, I just checked out your site, and I think your problem is different. You have your wrapper set to 210px - you'll need to change that to 200, so it matches everything else. And you'll need to go into the code and fix the unclosed paragraph and div tags - I'd paste the revised code in here, but Blogger won't accept it. =P Let me know if you need more help! =D
Thanks for your help, Hannah - except it didn't work! I'm sorry for taking your time. What else do you think I could try?
Thanks!
Bethany Joy
I don't know if you got my other comment -- if you did, you can delete this one.
That didn't work at all...it is still positioned strange. Any other ideas? Thanks.
Bethany
Thanks so much for the tutorial! I had the same problem that another had, that the button wouldn't come down- but the link you gave completely fixed it! This was the only sight where I could find an understandable tutorial, let alone an actual html code. Thanks again!(:
http://katies-favorite-things.blogspot.com
I am so excited that I finally put in the time to use your accordion menu!!! THANK YOU for hosting this wonderful tutorial, and answering everyone's questions - I had some of the same!
Want to see the finished product?
http://teagannicholle.blogspot.com
Bethany - sorry for taking so long to reply. I've gone through and fixed your code - I'll send it to you via email. ;) Thanks for your patience! =D
Teagan - oh, I'm so glad it's helped you!! =D Your menu looks amazing - and I love how you have the pieces of a photo as the background for each button. Very unique!! =D
Katie - yay! I'm happy you enjoyed the tutorial! =D (your menu is lovely, by the way. =) )
Bethany - you know what, I was just heading on over to your profile so I could email you, but it looks like you've disabled access to it. So if you could email me at info@beautydesignstudios.com with your current menu code, that'd be great. =D I'll send you the revised code - your only problem are some unclosed divs and paragraph tags! =D
Hannah - I tried sending you what you wanted...but it did seem to go through. You could check your e-mail to see if you got it. If you didn't get it, you could comment on my blog and tell me. Then I'll come here and give you my e-mail address. Sorry, this has been so confusing!
Thanks!
Bethany Joy
Bethany - weird - the email is correct. Okay - I'd forgotten that you'd given me the link to your blog. =) Thought I'd accessed it through your profile.
Hannah - I'm very sorry. Once again, it said that my e-mail could not go through. Would it work for me to comment on this post with the code, have you fix it, and then you comment on my blog with the fixed code?
Thanks!
Bethany
I wonder if it's a problem with Hotmail - well, here's what I'll do. Since I originally thought that I could only get to your blog through your profile, I thought I needed you to send me the code. However, I have the link to your blog, so I'll get the code from there, upload the revised code to a web host, give you the link, and you can copy and paste it in. (Blogger won't let me paste it here)
I'll go do that right now! =D And thanks for your patience with me - this hasn't been totally smooth. =P
So, do you need me to do anything right now?
Thanks so much for your help on this!
Bethany
Nope! =D I'll post the link in about five minutes.
You're very welcome! =D
Alrighty, here's the link!
http://hrpblogdesigns.webs.com/dropdownmenu-bethany.txt
Just copy the code and paste it into your widget box! Let me know if you have any more problems with it. ;)
Quick question:
I don't delete my whole code that I have right now, do I? Just the top section of it. Right?
Thanks SO much for your help? I'll try it once you answer...
Bethany
You'll need to replace all of it with the new code - what I did is take all of your code and ended up changing one line of the CSS and a few spots in the HTML.
Haha you're welcome!! =D
It worked, it worked *hops up and down*
I cannot thank you enough for your help! It was a little annoying to me having them off-centered like that! THANKS SO MUCH, HANNAH.
Bethany
Yay!!! =D Haha yep!! glad I was able to help you out! =D
Thanks for the comment on my blog :) I like getting comments from new people [grin]
Bethany Joy
Yeah! Haha so do I! =D
Sorry to keep bothering you, but I'm having major trouble with the links on my drop down. I used the code you posted, but every time I clicked on it, I was sent to a "this page was not found", and the URL is my blog's URL attached to the link I want. Bottom line, how am I supposed to put a link in and it be separate from my blog/not combining my blog's link and the link I want to post. Hope I make sense, I'm beginning to confuse myself. D:
http://katies-favorite-things.blogspot.com
mine is not working!! could you help me out please??? Thanks a million
florecity.blogspot.com
email: florecity@gmail.com
-flor
Hey Katie! Here's the code you'll need - and you'll need it in between these two characters - <> (I can't put the actual code in because Blogger will interpret it literally.)
a href="http://yourlink.com/">Link Name</a\
Let me know how it goes! =D
Hey Flor! Try going to this link - http://hrpblogdesigns.webs.com/menu.css, copy the code there, and paste it into your html/javascript box. Everything should work just fine! Let me know if you need more help with it. =D
Hey!
So I've just set the toggle menu and its great but I still have a couple of questions for you. First of all, I don't know where to insert the image code. Secondly, I would like to resize my buttons to be around Katie's size but I'm having trouble figuring it out.
Thanks for your Time!
Ani xx
Hey Ani!
You'll want to insert the menu code just after the first paragraph tag. This will ensure that the image is positioned properly. So it'll be the div tag first, then the paragraph tag, then the image code! =D
To resize the buttons, change the number width in the wrapper and accordionButton areas. So instead of width:200px;, you could change it to width:300px;. If you want it taller, increase your padding in the accordionButton area. i.e. padding:10px; instead of padding:5px;.
You're very welcome! =D
Hey again!
I wasn't successful with the image code, so could you give me an example of a whole button that would include an image and a bio?
Thanks for your patience!
Ani xx
Hey Ani! Yep, I sure can! If you email me at info@beautydesignstudios.com, I'll send you some example code. (I can't post it here because Blogger will translate the code)
Hey Hannah. I'm afraid I'm having quite a few problems with my menu. (www.loveisthethingwithwings.blogspot.com)
First off, how can I place my blog button w/ grab box correctly inside? I used the "image" code, but, as you can see the grab box sticks out!
Then, I can't seem to place a picture correctly in the "about kimberly" area. I'm using picasa, and it just doesn't show up...
Then, the "contact" box is off-center.
Sorry I'm having so many problems. :(
Thanks anyway!
Kimberly
Hey Kimberly! When you commented you caught me right in the middle of a major transition - I just completely changed hosts, design, and website content. That's why it's taken me so long to get to you. =D
I just checked out your blog and drop down menu - it looks like you've gotten everything fixed except for the bio photo. I'd recommend either re-sizing the photo to 200 pixels wide, and/or make sure the image code is contained in centered paragraph tags.
Hey Hannah!
I have one more small question for you...hopefully, it's small :)
If you look on my top toggle menu, the picture and the words aren't lined up. Do you know how to fix that?
Thanks!
Bethany Joy
Hey Bethany! Make sure that you have your image centered, and that your text is also centered. Another thing would be to check and make sure your padding is the same on each side of the content.
Hmmm...all things look normal that you said. Oh, well....
I just checked your code - add align="center" to your img code, and put a br tag in there after the img code. ;) (remember to add the <>s to the br!)
Okay, one more thing, then I'll stop asking you questions :)
What's a br tag?
You can see that I have no knowledge in the HTML "world" =)
Haha it's fine! =D
A br tag looks like this - < br > except without the spaces. It corresponds to one line of blank space - so the more you add, the more space you have! =D
This is awesome, but I still am unable to do one thing: add a link! I've copied and pasted it exactly, but for some reason, it takes me to a broken blogger page! Could you please give me a hand? I would appreciate it so, very much!
Thanks a bunch, I know you're probably bombarded with tons and tons of questions daily, but I suppose it's because you're awesome like that.
Hope you can help, and if you prefer to email me my email is: florecity@gmail.com
-Flor
florecity.blogspot.com
Hi Hannah! I cannot get the links to work for me! I'm doing an about me, and I did the words and wanted to link to my about me page on my blog, and my blogger profile in a separate link, but neither of them will work.
Hey Flor and Francesca! Sounds like you both have the same problem...but don't worry, it's easy to fix. =D You'll want to make all your links look like this -
< a href="http://www.bloggerblog.com/" >
You'll notice that I have spaces before and after both <>s - be sure to delete those, so that there are no spaces in the final code. The reason I put them in is so that Blogger won't translate the code literally.
Thanks SO much!! Now they work!!
Hannah, so sorry, but I have another question. how many tabs can the menu have because i tried using 8 and after the 4th one, links wont work for me!
Hey Francesca! That's okay! =D What you need to do is to look very carefully at the original code for each button, and be sure to duplicate it exactly. Even one misspelled or misplaced character can ruin the whole thing. If things still aren't working, send me an email at info@beautydesignstudios.com and we'll work it out. ;)
my second problem still isn't fixed yet, but i have a 3rd problem, i have 4 tabs that worked then i did some editing and now the 4th tab wont show unless the 3rd tab is open. I checked the HTML and everything is the same as yours so i'm not sure whats wrong!
Hey Hannah!
Thanks for your tutorial! :)
I was wondering though, how did you host/create the JavaScript for the accordion menu? I've been into CSS and HTML for awhile, but JavaScript is still a bit of a mystery to me. I'd love to learn though, so I wanted to ask you if you could post a tutorial about how you created the Javascript for the menu, and how you hosted it? Or you could also e-mail me at swordmaidenforchrist(at)gmail(dot)com.
Thank you so much, I really appreciate it! :)
Eve
Hey Eve!
You're very welcome! =D I didn't create the JavaScript (though I know just a tiny, tiny bit about writing it) - I got it online. It's a pretty basic code that is used pretty extensively with menus. I hosted it on Webs.com - you can create an account for free, and then upload the JavaScript file. =D
Seems simple enough!
Mind if you e-mail the JavaScript to me? I want to have a look at it, and maybe try hosting it, just to see if it'll work! :)
Thanks!
No problem! =D I'll go do that...
And yeah - studying code is just about the best way to learn it. ;)
Hello Hannah!
I want to say a million thanks for this tutorial. I haven't before, but I use it for all the designs I do and I send many, many people your way.
I've customized pretty much everything for it.
Although I do know how to manually add a link, make text bold, italic, make text center, etc, when I'm in a hurry, I just do the text in a blogger draft and copy the HTML into the accordion area. :){did that make sense??}
Lazy, but it saves much time. :)
Thank you for posting this tutorial.
Hey Ashley! I am very glad it's been useful for you!!
Yes, that does make sense! =D You're very welcome. =)
Thank you! It took me a little while to get it right but I got it now! :)
You're very welcome, Anna!
Hey, Hannah!
First of all, you're awesome!!!
Second, I have a small question. When I click my button and it slides open, there is a small green border around the content. Is there a way to get rid of it???
Nevermind my question. I figured it out! :)
Thanks again!
Hey Grace!! Haha glad you stopped by! =D
Yep!
Turns out I do have a question!
How/Can I make the title on the buttons bigger?
You sure can! =D Increase the font size underneath the .accordionButton { heading. So you'll have something like this -
.accordionButton {
width: 200px;
float: none;
font-size:17px;
(etc., etc.)
Hi, there!
This tutorial was intrduced to me by my friend. For I've been looking for this for months.
Uhmm...how could I change the font? It seems doesn't work in mine.
Thanks for this! :)
I have another problem...my link to view my profile doen't work: http://www.blogger.com/profile/00604544135866395399
And like Natalia's prob. at first.
Could you give me a code too?
Hey Hannah!
Firstly, thanks SO much for this awesome tutorial. It took a little head scratching, but I have finally got everything down...except a few things:
first of all, my buttons are also coming down, then going instantly back up. Is there a reason for this?? Also, how do I made the text in the CENTER of the background, instead of on the bottom of each box?
Thanks so much!!
-Lucia
Hey Christela!
Change your font by adding this code to the wrapper sections -
font-family:times new roman, sans-serif;
Be sure to use fonts that are basic, because otherwise they won't work. ;) You typically want to list two or more fonts, so that if one person doesn't have the first font on their computer, the second will work.
Look over your link code - make sure that it's exactly right. It should look like this -
< a href="http://yourlink.com" >Profile< / a >
(remove all spaces)
Here's a link to the code - http://hrpblogdesigns.webs.com/menu.css
Hey Lucia! You're welcome - I'm glad it's helped you! =D Try using the code here - http://hrpblogdesigns.webs.com/menu.css
Some people said they were having the same problems with the content not coming down and staying down, and this code has seemed to fix that problem. ;)
To move your text on the buttons to the center, just decrease your padding by about two or three pixels. It should move right up to the center! =D
I had the same problem with the broken link, but I fixed it by simply removing the quotes before and after the link and it was instantly solved. So it should look like this:
< a href=YOUR LINK>LINK NAME< / a >
Make sure to remove all the spaces except for the space between a and href and you'll be good to go! :)
Thank you for posting this! I am really happy with my drop down menus.
xoxo,
--Abi
Hi Hannah
A friend recommended this tutorial to me, and I find it very helpful, but I am not good at codes and this sort of thing, and the only thing I have achieved is the name of the tabs, but not even the button background.
With the first part of the code (CSS) these are my questions - do you add anything to the '#wrapper {' part of the code?
With 'background: #COCOCO;'' is 'COCOCO;' a colour? Or do I need to change the code? can I type in green after the COCOCO, or instead of?
Do I change the 'cursor pointer' at all?
And do I add anything to the 'colour:#000000' part of the code?
And do I change any thing to the 'background: #ffffff;' part of the code?
With the purple part of the code (JavaScript) I didn't do any thing to it, what do I need to do?
I am pretty sure that I did everything I could to the blue part of the code.
I am very sorry for asking so many questions. I am such a dunce at blogging! The tutorial was very good, I just don't get this technical code stuff ( ;
From Lauren
http://jillahorse.blogspot.com
Hey Lauren! No problem. =D Don't worry about asking too many questions - you're not!
The #wrapper section is talking about what the menu looks like as a whole. Anything you put in there will apply to both the buttons and the content. That's why we put width:200px; in there - we want the whole thing to be that wide. So you don't need to add anything to that section.
Yes. #cococo is a color - it's a dark blue that's almost black. Typically, when using colors in css, you want to use actual color codes. It's very simple to find codes for different colors, though - you can just google "green color code" and you'll get a lot of codes that you can use.
No, don't change cursor:pointer; - that just makes your cursor turn into a little hand when you mouse over the button.
color:#000000; makes your text black. So you can leave it as it is, or change it to another color!
You can change background:#ffffff; to another color if you want - it will change the background color of your content.
No, don't do anything to the JavaScript. You don't have to mess with that! =D
Let me know if you have any other questions! =D
Thank you so much!
I have the buttons, and after reading your comment I had (almost) no trouble.
My last to questions would be (I hope the last two)
1 - how do you download a photo on the one of the buttons (example - About Me Button).
2 - I have a 'Sponsors' button, and I managed to put two links on the button, but I can't put the third on properly. It doesn't space itself from the one above it. I looks a bit like this...
Bex Blog
Diamonds and PearlsMy Point of View
How can I fix it?
Lauren (http/:jillahorse.blogspot.com)
Wonderful, Lauren! =D
There are simple ways to fix both problems. ;) To insert a photo, upload it to some host and copy the direct link. (If you aren't sure how to get it, right click on the image, click "view image," and copy the link to that image) Then paste the following code into your widget -
< img src="DIRECT LINK" align="center" >
(remove spaces between arrows and letters/characters) Paste your direct link right in there (don't delete the quotes) and you'll be good to go!
To add a space between the links, simply add the following code between the two link codes -
< br >< br >
(again, remove spaces)
Let me know if you need any more help! =D
Post a Comment