A quick simple way to navigate my pages

  • 2
  • Question
  • Updated 4 years ago
  • Answered
This page contains links to my radio show archives http://www.mcran.com/show-archives.php

When you click on any year link, it takes you to a page with the shows for that year. So far so good and I like having individual pages to display my shows. I'm still in the process of populating them. When you are on for example the 2013 year page, lets say you want to go to the 2008 year page. The way it is now, you have to click on the Show Archives link and then click on the year. It would be nice for a user to just be able to go to another year without having to go back to the show archives page all the time.

I tried putting code on one of the year pages but that would mean that I would have to put it on all of the year pages. If I have to make an update to the code I have to change it on all the year pages. Very cumbersome. It would be nice to have the code in one place and then when I make changes to it, it will be applied to all of the year pages only. Would it be possible to put all this code into a style.css file? This way I only have to change it once.


<style>
#navlist li
{
display: inline;
list-style-type: none;
padding-left: 1px;
}
</style>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.mcran.com/it2013.php" id="current">2013</a></li>
<li><a href="http://www.mcran.com/it2012.php">2012</a></li>
<li><a href="http://www.mcran.com/it2011.php">2011</a></li>
<li><a href="http://www.mcran.com/it2010.php">2010</a></li>
<li><a href="http://www.mcran.com/it2009.php">2009</a></li>
<li><a href="http://www.mcran.com/it2008.php">2008</a></li>
<li><a href="http://www.mcran.com/it2007.php">2007</a></li>
<li><a href="http://www.mcran.com/it2011.php">2005</a></li>
<li><a href="http://www.mcran.com/it2010.php">2005</a></li>
<li><a href="http://www.mcran.com/it2009.php">2004</a></li>
<li><a href="http://www.mcran.com/it2008.php">2003</a></li>
<li><a href="http://www.mcran.com/it2007.php">2002</a></li>
<li><a href="http://www.mcran.com/it2011.php">2001</a></li>
<li><a href="http://www.mcran.com/it2010.php">2000</a></li>
<li><a href="http://www.mcran.com/it2009.php">1999</a></li>
<li><a href="http://www.mcran.com/it2008.php">2998</a></li>
<li><a href="http://www.mcran.com/it2007.php">1997</a></li>
<li><a href="http://www.mcran.com/it2011.php">1996</a></li>
<li><a href="http://www.mcran.com/it2010.php">1995</a></li>
<li><a href="http://www.mcran.com/it2009.php">1994</a></li>
<li><a href="http://www.mcran.com/it2008.php">1992</a></li>
<li><a href="http://www.mcran.com/it2007.php">1991</a></li>
</ul>
</div>


Any other ideas are more than welcome!!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
  • really frustrated by all of this.

Posted 5 years ago

  • 2
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Might I be better off using an Accordion menu on one page instead of messing around with multiple pages? I can make each accordion menu item a year page. Sound good?
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hi Randy

What I could offer you is the code and js file for a quick navigation drop down as you can see it on this website (language selector on the right-hand side). You could add your years as list options to such a drop down menu on your pages. However, I couldn't figure out how to add the years, i.e. the list options, to the js file, so you'd need to copy the code to each page, and if you add or remove a year, you'd need to edit it for each page.

As this is probably not what you'd like to use, I've asked Sanja if she has an idea and to comment on this thread. Our tech-savvy users are more than welcome to add on this thread, too!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thank you so much for getting back to me. Adding to a drop down menu is not a problem but I want to get away from users having to click on another menu and then click again to select a year. Call me obsessive but when I design my site I want it to be so fluid when it comes to navigating so that the person visiting my site is not caught up in constant mouse clicking.

It would be so nice if Yola had this feature:

Select the pages you want to make the changes to. Make the changes to those pages only. This way you would only have to make the changes from one place, instead up updating every page.

I know I can put a style.css file in the file manager and make a single change there that would affect only the pages I choose to change. What I'm not sure if you can do this with html as well. Is there such a thing as a central html file like the style.css file that I would only have to change once and it would affect only selected pages?

The reason I am asking is because if I add a new year page, let's say 2014 and maybe change the css for the year pages, I would like to make the change once for any navbar's or whatever I am going to use.

Another option I thought of was to get rid of every year having it's own page and just have an accordion menu with the year pages in it. This way you just have to click on the year in the accordion menu. This way it would be as simple as having a nice accorion menu on my show archives page with all the years in the accordion menu. See what I am getting at? Maske sense? What does Sanja think.

Now if I go the route of the Accordion menu, how do I implement it? What do I have to do regarding the code and widgets I have to use?

Thanks Stefan!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Another thing I was thinking about regarding my show archives page is this:

Have horizontal links along the top of the page or somewhere in that area like below. When you click on one of the links, in the area below the page for that link will be displayed with all the links to my shows for that year. Click on another year link in the example below and the same thing would happen for that year. Is this possible? I hope you can see that I am really trying to simplify things here.

So, a visitor to this page would click on a year link, and the page for that year would be displayed below the horizontal links bar. This way, everything stays on the same page. Since I already have pages set up for each year, it would just be a matter of displaying that page below the horizontal links menu. Make any sense?

2013 2012 2011 2010

Displayed year page
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Randy,

You could try placing the codes into the Header section of your site. This means that the year indices would show in the header of each page. (including pages that you may not intend them to be displayed). It's a simple global technique but non-discriminatory so that if it suits: well and good; if not , there's very little manipulation you can do to smooth it.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Thanks Gop. Right now I have a functioning Accordion menu. I'm just trying to figure out how I can make it work for me.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
This is what I have been playing around with as a possible option for displaying my shows on a single page. I would like to tweak it some more but first I have to know if I am on the right track. For now I am only concerned with the structure of the Accordion menu.

Comments, suggestions?

Is the code I am using correct?

Are there simpler ways of doing this? With or without having to use tables in my code.

Is there a way when you go to this page that all the accordion items are closed?

http://accordionmenu.yolasite.com/#
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Randy,

The menu is looking good and works well.

I think that you have an option here of reducing the displayed contents dramatically by at least 80% and that could be done by including the Monthly periods as a sub-accordion, so that clicking on the Month within a year then this would drop to open the four (average?) entries for that month; you could even group the sub-items as two monthly groupings and display the music icon on the same page set at the right hand margin by using for example an iframe to pull it onto the same page.. I know that this is a very personal preference but may stimulate a new way of looking at the issue. This would also remove the need for structuring the data as a table.

I would be surprised if you couldn't have a default "closed" introduction. Can you give me the reference to the accordion menu that you are basing yours on and am happy to look further into it if you like?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Randy,

It sounds like you might want to use something like this: Accordion Menu.

Another one to check out is: Vertical Accordion

I hope that helps!
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Hi Gop!

This the the site I got the code from.

http://viralpatel.net/blogs/create-ac...

I think your comments are exactly what I am trying to achieve. I already have year pages set up and what I really wanted to do was just have them display on the same page when you select a year item from the accordion menu. Maybe display within the accordion menu? Using an I frame sounds like this really is possible and I welcome your help in achieving the desired effect in the simplest way possible and if that means eliminating tables, so be it.

Keep in mind that has the years go by, I will be adding new years to whatever the final result is. So, I would like something that is quick, simple and easy to manage.

Thanks again Gop for helping me with this!!!!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Randy,

It says that you can have the default as open or closed so there's a solution there.

Inserting a ul inside a ul is not clear from reading but the question has been asked by another and as yet unanswered so unclear if the menu will support another level. It is also problematic it seems with IE7, 8 and 9. Suggest you search for another accordion? Search:"nested accordion menus"

It may also help if you can describe your vision of the visual style of the menu as this can help focus on a good result. It can be changed subsequently with alteration to the menu CSS so your prelim vision isn't locked in stone.

Adding additional entries should not be a problem it really is just inserting lines. The iframe could be called in to the right hand side of a column divider widget but will need to workout the parsing of the menu selection over to the iframe argument. This will need research but should be possible. I think you mentioned that each recording is stored on a separate page?
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Basically what I want is when someone goes to the Show Archives page, they will click on a year (2013 for example) and then (I presume this is where the iframe comes in) the 2013 web page (http://www.mcran.com/it2013.php) will be displayed right below. The user just has to click on one of the shows listed. That's it. Bottom line is to try and keep everything on the same page rather than have users going from page to page to view the Year pages.

A single page solution so to speak.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
OK so first thing is to find a suitable accordion as suggested and I think a recent creation as this is more likely to cover the sins of quirky browser versions that tend to be a bit of an issue.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
I will upload a very basic drawing of the options I am thinking of later.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Here is a very rough drawing of the kind of options I am thinking of.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Randy,

I can't see option 2 working with the use of an accordion menu as the content interrupts the menu. It necessarily has to be out of the menu section.

The diagram above seems different to your test site in that there are entries within the year sections specific show entries and access to the content is made via the sub-entries?

2013
jan a
Jan b
Jan c
Jan d
Feb a
...
etc
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
What about Option 1? My test site was just for brainstorming ideas as to how I might be able to have this al on one page.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
The actual Year pages I am using currently on my site are done with the DL tag. It looks really nice because everything is nicely divided when you go to any of the year pages on my site. I had to use tables on my test site to:

1. See if that would work (looks kind of messy to me actually
2. To get an idea of what I would like to achieve

What I had in mind and you said that it would not work was to somehow have the year page display in an accordion when you clicked on the year in the accordion.

The way my shows archive page is set up now, the person has to select a year and then the relating page for that year displays. Very nice I think, but then if the person wants to view another year, they have to click on the shows archive link in the top navbar to go back and select another year. Maybe I'm over thinking this and should just leave well enough alone? I am always striving to make my site as easy to navigate as possible.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
A naccordion menu would work with minimal click throughs.

eg:

2013
2012
2011
2010
....
etc

and expanding on that

2013
Jan-Feb
March-April
May-June
July August
.
.
...
2012
2011
2010
...
etc

and further expansion

2013
Jan-Feb
Jan a
Jan b
Jan c
Jan d
Feb a
Feb b
Feb c
Feb d
March-April
May-June
July August
.
.
2012
2011
2010
...
etc

Selecting any of the specifc shows then could activate the recording playback within an iframe and most easily to the right hand side of the accordion menu.

This would keep the menu options in immediate reach without a need to step back to a preceeding page. Just simply select a year, a month grouping and a show again, yhus keeping everything on the one page.

To do this you would need to install a nested accordion menu. This would allow you to have minimal selections exploded and thus keep the apparent options to a small size.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
That sounds very interesting Gop. I'll have to figure out how to do this and see if it works for me.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
Gop,

I have a question for you. When you go to my show archives page and click on the 2013 button for my shows, that page is using the DL tag. Is it possible to achieve the same visual layout using tables instead? I was just curious about this.

www.mcran.com
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Randy,

The dl tag is really a kind of tables formatting which allow for 2 sub tags to highlight subordinate aspects.

You could use a tables layout similarly for this as you have really only used the first sub-ordinate level: dt sub-tag.
Photo of Randy

Randy

  • 643 Posts
  • 8 Reply Likes
The question I have about tables is how would I get the spacing I (currently have using the dl tag) between the months with tables? I don't believe that there is CSS that would allow for this. I thought that maybe padding the tr tag would achieve the same spacing effect I get with the dl tag. Not sure if you can do this or not.
Photo of David

David

  • 4 Posts
  • 0 Reply Likes
Randy and Gop, pardon me for jumping into this discussion.


This discussion is the most recent discussion of accordion menus that I've found (others are so old I doubt Yola still works the way they describe), and Randy's http://accordionmenu.yolasite.com/ is the only working example I've found on a Yola site. Way to go, Randy!


What is the code for http://accordionmenu.yolasite.com/ and where do I put it? I'm a Silver user, on a long day 1 of attempting to move my live site to Yola.


I want to have a nested accordion menu on bottom part of http://wellnesspersonalfreedom.yolasi... where it is by default collapsed and showing only Recruiting, Division Leaders, Sales, Marketing, Wellness Consulting, and Referrals. A click on one of those should show the next level of bullets (level 1) underneath it. A clock on one of those level 1 bullets should show the next level of bullets (level 2) underneath it.


I've been able to transfer my site to Yola in one day, but haven't gone live because I've been unable to figure out accordion menus. The primary reason I switched to Yola was because Google searches suggested that I could do accordion menus on Yola, whereas I couldn't on Weebly, WordPress.com, Google Sites, etc.


I would very much appreciate any help either of you (or anyone else) can give me.
(Edited)
Photo of Stefan

Stefan, Official Rep

  • 4448 Posts
  • 190 Reply Likes
Hello David

I can't see any accordian menu on http://accordionmenu.yolasite.com/. Have you tested our Flyover Menus? You can have them with any free Style Template. Here's an example of a real Yola customer, just hover over the "Products" link: http://chyllout.co.za/.

Otherwise, a link about how to create accordion menus which Gop posted a while ago may be helpful: http://www.sitepoint.com/css3-vertical-accordion-using-target-selector/#fbid=4yriBOjTk5H.
Photo of David

David

  • 4 Posts
  • 0 Reply Likes
Thanks, Stefan.

The Flyover Menus don't meet my needs because 1) my accordion text isn't in the menu and 2) the expanded text wouldn't be able to be printed or copy/pasted.

Click the years on http://accordionmenu.yolasite.com/ to see the accordion text in action. A visual cue that you're in accordion text would make it better. I figured I might be able to add the visual cues if I could get the code that made the accordion text work there.

Thanks for the link to the CSS approach. I haven't used CSS yet so would appreciate any tips on where to put each piece of code. I don't know the scope of your support work, but if you could create a working example at http://accordiontext.yolasite.com/ with instructions on how to install it, I'm sure it would be much appreciated by the community given how many people over a lot of years have been asking for accordion text.

Thanks for your help.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello David,

The jquery version of the accordion content on the mentioned site is a collection of code. If you right click on the page and select "view page source" all the code will appear. If you now scroll down, down, down to where you see:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><TITLE>Simplest Accordion Menu using jQuery - DEMO</TITLE> this is the beginning of the relevant accordion stuff.

The first few lines:
 table,td,th {border:0px solid black;}
table {width:100%;}th {height:20px;border: 0px solid red;overflow: hidden;width:100px;}td {border: 0px solid green;overflow: hidden;width: 100px; text-align: center}
aren't relevant unless you wish to include a table in the content. 

You will see entries for the headings and these are wrapped in <li> tags. Immediately following each of these is the data to be displayed when the heading is clicked.

Following all the data are a couple of lines for the accordion script, in effect the engine for the open/close view:

<SCRIPT>$("#accordion > li").click(function(){if(true==$(this).next().is(':visible')){$('#accordion > ul').slideUp(300);}$(this).next().slideToggle(300);});$('#accordion > ul:eq(0)').show();</SCRIPT>
That's it in a nutshell.
If you wish to explore the CSS method then have a look at the reference and see if it is intelligible to you. If you wish to have some help with any specifics of this then let me know here.
Photo of David

David

  • 4 Posts
  • 0 Reply Likes
Gop and Randy, thanks for your help.

The accordion I've built in Yola is at the bottom of http://wellness.personalfreedom.net/jobs . View Source shows what I did.

http://jqueryui.com/accordion and the pages referenced from there set me on a track that was easier for me to understand. They can help others further customize what I've done.
(Edited)