Menu with subnavigation

[cnymike]

I'm having a problem figuring this out and could use some direction...

I'm designing a site for a plant nursery and want to use a horizontal top menu with left subnavigation and one column.

Across the top I want Home, About Us, Our Gardens, Ordering and Shipping, Catalog

On the left subnavigation, I want a list of menu items such as Plants A, Plants B, Plants C, Plants D.

The problem is that I cannot figure out how to have the same left subnavigation menu appear for all of the top Main Navigation items.

I want the top navigation items to have their own content, but each top navigation item page should have the same subnavigation menu.

Is this possible to do?

[Dr.CSS]

Which Ver. CMSMS?

To get just certain pages, 2 methods depending on your page structure, mind showing how you want the structure...

It sounds like you are looking for something like this  http://kompas.co.za/cmsmadesimple/

[cnymike]

I'm using version 1.0.2

Yes, the website you provided a link to is exactly what I want to accomplish. How is that done?

Michael

[Dr.CSS]

The page structure has all the horiz. menu items under a section header at the top of the pages...
1. hide
1.1 page1
1.2 page2
1.3 page3
etc.

2. page7
2.1 page8
3. page9
3.1 page11
3.1 page12
3.3 page13

page 1. hide has the "Show in Menu:" set to no show so it and all the pages under it don't show in the vert. menu
then the tag for it is...
{cms_module module='menumanager' template='flex3col'  items="page1,page2,page3,page4,etc."}

the vert. menu is  {menu template='newmenu'}

both of these are custom menu templates the first was standard with the primary-nav changed to primarynav so i could style it diff. then  the vert., the other is the standard cssmenu template with no changes I just made a copy in case I needed to change it...

[cnymike]

Mark, thanks very much for trying to explain it.

It's a lot for me to get my head around right now, but I'll fiddle with things over the weekend and see if I can sort it out. If not, I'll be back for a bit more guidance. Thanks again.

Michael

[cnymike]

So Mark,

I think you're saying that I need to create two custom menu templates? Do do that I would go to...
Layout>MenuManager>FileTemplates and then create the new templates... is that what you mean?

Then after I do that I need to somehow add the appropriate menu tag in each page that corresponds to the top horizontal menu items?

Is this sort of what is happening?

Michael

[Dr.CSS]

For the top horiz menu you will need to create a new menu template by going to Layout » Menu Manager>File Templates and clicking on the arrowed paper icon and naming it.

Then change the <ul id='primary-nav' to <ul id='primarynav' or whatever you like.

I chose that so it was easier to use the original styles in the menu CSS just changing the calls for primary-nav to primarynav.

To use the new menu template, in the template you will put...

template being the template for your page...

{menu template='yournewtemplatename'}


For the vert. menu just use this tag...

{menu template='cssmenu.tpl'}

Then use the vert. menu css... Navigation: CSSMenu - Vertical, you may want to copy it so you can make changes to the way it's styled as in colors, sizes, etc.,

It is a good idea to make copies of any default CSS or Template you are going to modify so you always have an original to look back on in case of any problems.

[cnymike]

Mark, when I go to the Menu Manager, there are no menus listed. Shouldn't there already be some menus there? I where are the menus coming from that are used in the default installation?

So I guess I don't know how to create template content... is this just CSS to make a menu from an unordered list for instance?

I didn't realize I'd have to get so much into code to do this.

Michiael

[Dr.CSS]

You should be able to see file templates on the second tab, those are the ones in use default, if you want to make a new one click the little icon on the right side.

[cnymike]

Dcoumentation is sketchy on this so I'm trying to figure it out based on your replies. But so far no luck.

Let me try to sort this out....

I'm using the template "Top simple navigation + left subnavigation + 1 column"

Next I go to MenuManager > File Templates and see three .tpl files there...
  simple_navigation.tpl
  minimal_menu_tpl
  cssmenu.tpl

You mentioned that I need to create a new menu template. Should I copy one of the existing templates and then modify it as needed? If so, which template should I modify to get the result I need to get? I have no clue how to create one from scratch.

Once I create this new menu template, am I then supposed to import it into the database by clicking on the "Import Template to Database" button?

Then you said...

Then change the <ul id='primary-nav' to <ul id='primarynav' or whatever you like.

Where do I change this? Is it in one of the CSS files and if so, which one? Is it just one line of code, or are there multiple instances of where this needs to be changed in the same file.

I'm sure that once I get this clear in my head, it will be an "a-ha" moment. But right now it's not making any sense to me.

I do appreciate your help with this.

[Dr.CSS]

Ok so depending on how you set up your page structure and how you want it to display.

Fly out type menus need the cssmenu.tpl template, and the "Top simple navigation + left subnavigation + 1 column" doesn't.

The vert. nav in the default template on fresh install where the 2nd level items go below the top level uses the simple_navigation.tpl.

And I believe the template you are using uses simple_navigation.tpl for both, if you don't want to have fly outs you can just reorder your page structure in Content>Pages to put all the ones you want up top under a new section header called hide and set it to not show in the menu, second tab Options.

Then in your template, for the top nav. use {howeveritssetnow  items="page1,page2,page3,page4"}  these are the alias' for them, while in the options you can see and change the alias.

For the vert. menu just leave it, as it won't show the 'hide' page or any under it.

This way you won't need to make a new menu template or change any CSS.

Hope I'm not confusing you too much using fly out/dropdown menu is the reason I made new templates.

Making new templates, just find the menu template you want to customize and click the little icon to the right and it will come up with a rename box, rename and it will appear in the first tab of menu manager.

To customize it just click it's name and it shows up in a box like the templates/CSS do.

[cnymike]

Mark, I know I'm not the sharpest tack in the box, but I am just not getting this.

I want to have a horizontal  menu and a vertical sub-navigation menu. Most importantly, I want each link in the horizontal menu to have the same grouping of links showing in the vertical sub-navigation menu. I will never want to have any item in the horizontal menu have a different subnav menu.

I have tried to follow your last suggestions. I created a new "page", and gave it a title of "hide",  page alias name of "hide", and a menu text name of "hide".  What wasn't clear to me was what to select, if anything, as the parent...so I just left it at none. I also deselected the "show in menu" box.

The newly created page named "hide"  appeared at the bottom of the page list, so I moved it to be the top, so it would be the #1 item. Am I doing this correctly so far?

Then I went into the template and created the horizontal menu items using the alias names as you suggested. So far so good. i can now see the horizontal menu as I intended.

Now the problem is the vertical menu. I still am not getting it. Let's just assume that I want the vertical menu to contain the pages, Plants A, Plants B, Plants C. I've created those pages. Where are they supposed to be in the pages heirarcny? Under what page are they children of?

[cnymike]

Here is a screen shot of my pages
http://www.michaelerb.net/senecahill/pages.jpg

Here is a shot of my homepage. No vertical menu of Plants A, Plants B, Plants C
http://www.michaelerb.net/senecahill/homepage.jpg

What am I doing wrong?

[Dr.CSS]

Seeing that helps... a picture is worth a 1000 words...

1. hide
1.1 home
1.2 about us
1.3 our gardens
1.4 open days
1.5 ordering and shipping
1.6 gift cert.
1.7 catalogs

2. plants a
3. plants b
4. plants c
5. etc.

this will get you what you want

horiz. menu...
{menu template="simple_navigation.tpl" items="home,about-us,our-gardens,open-days,ordering-and-shipping,gift-certificates,catalogs"}

remember to use the alias for each page, not sure of the exact wording so check and correct...

vert. nav should work fine as is...

[cnymike]

This is slowly driving me crazy.

I've done what you've said and now the vertical menu is a duplicate of the horizontal menu. I don't see the plants a, plants b, plants c anywhere. But on the pages list, they are

Code: Select all

1 	Hide 	Top simple navigation + left subnavigation + 1 column 	Section Header 
	1.1 	-   Home 	Top simple navigation + left subnavigation + 1 column 	Content
	1.2 	-   About Us 	Top simple navigation + left subnavigation + 1 column 	Content 
	1.3 	-   Our Gardens 	Top simple navigation + left subnavigation + 1 column 	Content 
	1.4 	-   Open Days 	Top simple navigation + left subnavigation + 1 column 	Content 
	1.5 	-   Ordering & Shipping 	Top simple navigation + left subnavigation + 1 column 	Content 
	1.6 	-   Gift Certificates 	Top simple navigation + left subnavigation + 1 column 	Content 
	1.7 	-   Catalogs 	Top simple navigation + left subnavigation + 1 column 	Content
	2 	Plants A 	Top simple navigation + left subnavigation + 1 column 	Content 
	3 	Plants B 	Top simple navigation + left subnavigation + 1 column 	Content
	4 	Plants C 	Top simple navigation + left subnavigation + 1 column 	Content 

But when I look at the page, I see that the horiz and vertical menu are the same and there are not Plants A , Plants B, Plants C.

So what the heck am I dont wrong now?

Am I supposed to deselect "show in menu" 1.1, 1.2, 1.3, 1.4, etc?

I notice that when Catalogs is clicked on, the next page breadcrumb says "Plants A" and when I click on "Plants A" from the breadcrumb, then the verttical menu goes empty and the next page breadcrumb then says "Plants B".

Here are screen shots showing this...
http://www.michaelerb.net/senecahill/screen1.jpg

And the next...
http://www.michaelerb.net/senecahill/screen2.jpg

And here is the code from the template for Navigation and Subnavigation, which seems to be correct but I'm not positive...

Code: Select all

  <!-- Start Navigation -->
   <div id="menu_horiz">
      <h2 class="accessibility">Navigation</h2>
  <!--changing menu template as a test    {menu template='simple_navigation.tpl' number_of_levels='1'}-->
{menu template='simple_navigation.tpl' items="home,aboutus,our-gardens,open-days,ordering-shipping,gift-certificates,catalogs" number_of_levels='1'}
   <hr class="accessibility" />
   </div>
   <!-- End Navigation -->


   <!-- Start Search-->
   <div id="search">
          {search}
   </div>
   <!-- End Search -->

   <!-- Start Breadcrumbs -->
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
   <hr class="accessibility" />
   </div>
   <!-- End Breadcrumbs -->


   <!-- Start Content (Navigation and Content columns) -->
   <div id="content">

      <!-- Start Sidebar -->
      <div id="sidebar">

      <!-- Start Sub Navigation -->
      <div id="menu_vert">
         <h2 class="accessibility">Sub Navigation</h2>

          <!-- NB! The <ul><li> below is only added because several default templates use the same menu stylesheet, to "force" the subnavigation to act as if it's the second level in a list -->
          <ul><li>{menu template='simple_navigation.tpl' start_level='2' collapse='1'}</li></ul>
      <hr class="accessibility" />
      </div>
      <!-- End Sub Navigation -->