Adjusting spacing in Accordion menu

  • 1
  • Question
  • Updated 9 years ago
  • Answered
When you go to my home page (www.mcran.com), and select one of the Accrdion items you will notice that I have a spacing problem. How can I make it so that the spacing automatically adjusts based on the content in each accordion?
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • unsure

Posted 9 years ago

  • 1
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Randy

I'm not sure which Accordion items you are referring to. When I navigate to your Bennet Archives page, and select one of the letters, what I get is a scroll bar which helps me to move up and down your menu. I've attached a screenshot of what I see:



Please let us know if this is okay for you?
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
The Bennett page is fine. It's the Home page Accordion. The Home page looks rather empty and lonely. At least to me.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Perhaps instead of collapsing the items on your home page, you could simply add your text to a text widget and fill up the home page space that way? You could also create anchor links on your page. So, if you had the titles along the top of the page:

The Early Years Discovering Music Radio Years Current Stints, etc..

Then, when a person clicks on one of the titles, they will be taken to the correlating paragraph.

If you're interested in creating anchor links, here's how to do this:
Step 1: Creating the link

1.Drag and drop and HTML widget onto your page where you would like the text to appear for your visitor to click on, for this example it will be at the top of the page.

2.Enter this code in the HTML widget: <a href="#News">Read Current News Stories</a>

What this bit of code is saying is: News is the specific place on the page I want to jump, and Read Current News Stories is the text I want the link to display.

Step 2: Marking the Spot

1.Drag and drop an HTML widget onto your page where you would like the link created in Step 1 to take the clicker, for this example it would be wherever the News section of the document is.

2.Enter this code in the HTML widget: <a name="News"></a>

What this bit of code is saying is: Here is the place named News, and a link with this place specified needs to go here.

Give these a try and you will see that you can easily have your visitors jump all over your page!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
This sounds pretty cool Sanja! I will definitely try it on my test site. Right now, I think I screwed up the menu I created on my site. I tried a multi-level menu which I don't need anymore, and took out some code. Go to my site and you will see that the menu does not display correctly (www.mcran.com)

Could you please send me some code for just a plain horizontal menu. I will redo my menus with that code. I would assume that there is a CSS file that comes along wit the code that I can post on my hosting server if I ever want to make any style changes. Thanks!!

I'll let you know how the anchor link thing goes. I know how to create anchor links but yours look different, so this is exciting for me!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Sanja,

I tried what you suggested but am confused as to where things go.

Do I enter all of my text into one text widget? I think I know where you are going with this. By clicking on an anchor link, it will jump to the beginning of the text where the referenced text starts. Right?

So, I create one text widget to hold all of the radio bio text?
I know I have to create a couple of HTML widgets, but after this, this is where I get lost.

Thanks Sanja!!!!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I think for now I am just going to try out different templates that have horizontal menus. Bu for the other stuff for the Home page, I will try out what you suggest when I get further instructions from you.

Thanks Sanja!!
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Randy,

Sanja's offline right now, but I think your idea to shop for a style with a horizontal menu is a great idea. Good luck and keep building!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Laura!

I found a very simple one (www.mcran.com). I love simple and clean although it may look boring to some people, it's less complicating. :)
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Oh I agree completely, I love your new style. Clean is very modern and far from boring!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Laura,

My main goal is to make it as visually and navigationally appealing as I can. I really love simplicity when I look at web sites.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I prefer the new look too Randy.

Couldn't resist clicking on the Drummerworld link to check out the best drummer in the world. I'll give you a clue... he plays for a Canadian rock band. Take a flyer...
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hey Boomer!

Thanks for your comments. Would his name be Neil what's his name ;)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Bingo!...You know your stuff Randy ;-)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Last one, and Im going to bed ...
Who is the best guitarist on Get Satisfaction??
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Boomer is the best guitarist!

I saw Rush in 1974 open up for Nazareth and Rory Gallagher. What a night that was. Rory was headlining. I really miss him!
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Ok, I'll give you a clue....
His name starts with a "J", he's a Champ, he has a dead tree for an avatar and it looks like he's gone and taken the music off his site :-(

At one stage I think I had every album Rush ever made.
I was burgled a few years back and most of my CD collection was stolen.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Not sure who that is. I will keep an eye out for that avatar. Only person that comes to mind are Jeremy and John.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Boomer,

How long have you been using Yola? Have you tried any other CMS's loke Joomla, ModX, Wordpress etc...? I tried those and found them way to involved for my needs, although I must confess that since going with Yola, I have used a considerable amount of HTML and some CSS as well. I hated HTML/CSS a couple of years ago but decided to try and use it more and understand it more.

Now I can really appreciate the power behind using it.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Randy

What you would do is drag over an HTML widget and paste in Step 1's code. You can add more than 1 a href tag in this section. Just be sure to give each one an unique name.

Then in your text widget, where you have your blurb, click on the HTML button on your text toolbar, then add in the code from Step 2 at beginning of your blurb.

It may be easier to divide up your sections into separate text widget boxes but it is not necessary. For each new section, then you can add your a name tag, making sure that it corresponds with the respective a href tag in the section above.

I hope this makes sense! Please let me know if I need to clarify further.

p.s. Your site is looking fantastic! :)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Sanja!

I am really trying to keep my site as simple as possible for people visting my site. The only thing I don't like is the Bennett page, when you go there, it looks naked until you click on a letter. I have to find another way of presenting it. Ideas?

I also want to change all the link colors from green to black with no underline. Also I would like to change the green underline in the main navbar from green to blue. How would I do this?

If this is not possible, is there a free template similar to the one I am using that has blue in it? I will check as well.
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Randy,

Well, It looks far from naked to me in its current state. The only thing I don't care for is the way you've displayed the same image twice. I actually prefer the look of the content section better in the rev Sanja posted above. Attached is a screen shot with a few of my observations.

Also, I really prefer the look of the green links as they tie back to your navigation bar, but Sanja said she'd hop in here with some feedback on that front.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks so much for the feedback Laura. I realize I have to find another picture of Gordon but I like your idea of using ony one photo and expanding the text. Tat would nice as well and I will do that.

That menu in the upper left hand corner is something I am working on and am having trouble with the code. I really need to get that working. Are you able to help me with it?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
I'm afraid I'm no coder. If you can let us know the problems you're having I can run it by the team and see if anyone knows how to help.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Great. That's fine. I am not a coder as well. I just try to get by and understand as much as I can.

Here are two screenshots of the code.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Randy

If you're trying to set up a floating menu, you can try this code from Dynamic Drive:

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="1" width="130" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center"><b><font size="4">Menu</font></b></td>
</tr>
<tr>
<td width="100%" bgcolor="#FFFFFF">
<p align="left"> <a href="http://www.dynamicdrive.com&quot;&gt;... Drive</a><br>
<a href="http://www.dynamicdrive.com/new.htm&q... New</a><br>
<a href="http://www.dynamicdrive.com/hot.htm&q... Hot</a><br>
<a href="http://www.dynamicdrive.com/faqs.htm&...;
<a href="http://www.dynamicdrive.com/morezone/... Zone</a></td>
</tr>
</table>
<!--END OF EDIT-->

Please let me know if you have any questions.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Sanja,

Yes that is exactly what I am trying to get working. A Floating menu. I will try the code you provided but how will that link to the txt I have on my page. I think rather than go back and forth, I will make a short video you can look at. Is that OK?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Sure Randy! Send it our way. :)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Looks like I won't have to. It's working and I LOVE it!!!! Let me know what you think when you go to the Bennett Archives page. Not all the letters work at the moment because I am still entering content. I am so happy!! Should I pick a specific color for the floating alphabet bar? Any suggestions?

This is the perfect solution for me. Thanks to Lee. He has this on his web site and told me how to do it.

www.mcran.com
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Oh looky there, that looks fantastic. Great changes all around! I'm still partial to the green myself. :0)
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Laura!! I really want my site to be functional and look good. If only I could get rid of all of that green!!

Are there any free templates that come with multi-level horzontal menu support?
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Hi Randy,

I have a tool that may fit your site quite well.
It's called "Snap Shots". It allows your viewers to view extra content on the net
without leaving your site. It works well for extra info like Wikipedia articles and
video content like music videos etc.

You can see an example of it on this page of my site: http://travelsa.cc/map-wc.php
Click on "Cape Town" and then hover over the red video icons.

If you find a use for the tool, you can find out more here: http://www.snap.com/
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Boomer! I will take a look at that. Right now I am looking for a site that allows me to create multi-level horizontal menus. I need to replace the one that came with the template I am using. Any suggestions?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Randy

Unfortunately, if you are wanting a multi-level horizontal menu, you will need to use a custom code to create these.

Here are the two suggestions I have where you can find such custom codes:

http://www.javascript-array.com/scrip...

http://www.cssplay.co.uk/menus/
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Sanja!!

I will take a look at these for sure. I found a menu that I am using on my page at the moment but for some reason it creates a new browser window when I click on any of my pages. Must be something in the code that is doing this?

I am always looking for other menus to try out though.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey Randy.. I've answered you on your other thread: http://forum.yola.com/yola/topics/new...