Menu structur

[tcdk]

Hi

I have an idea about a menu/navigation for a site im setting up.

I should be like this:
http://www.dogsite.dk/test/default.html

Only the "subcategories" should not be listed before you clicked on the "maincategorie"

Anyone have an idea how this could be made? or a link to an excisting menu with same features.


Thanks!

[nivekiam]

Perhaps something here might help: http://www.dynamicdrive.com/dynamicindex1/indexc.html

More specifically this tree menu with some changes to CSS to use your background images.
http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

[tcdk]

Thanks, but I would like it more integrated with CMSMS.
I only wanna add a new page one place.

[lollipop27]

But isn't this a simple vertical menu?

You basically want it to unfold only when clicking on the main menu item? you can do that with the collapse="1" parameter..

Tell me if I get it wrong...

[tcdk]

Yeah, I think it's very simple, but im completly stuck in it.

It should be fully intergrated with CMSMS, so if I add a new page, there will be a new page in the menu.

[lollipop27]

Ya sure...

just use the vertical simple menu.... you can use it with this call in your template

Code: Select all

{menu template="simple-navigation.tpl" collapse="1"}

[tcdk]

Thanks.. It was mainly the collapse="1" I had a troble with.

Now another problem with the menu.

As you can see in my ex. I want the Maincategories to be a larger font then the sub categories..
Is that possible? Aka - I wanna seperate the styles in Main and sub categories, so I can make seperate font sizes.

[tcdk]

More specific - I need the Main and subcategories to be seperated. Is that possible?

[lollipop27]

each level in the menu is styled already differently in the standard css file.

don't add too much classes etc, just do it like this

ul li -> is first category
ul li ul li -> is second etc,

look for something like that, actually, its commented too, the css file

[tcdk]

in simple navigation? I don't think so..

The simple navigation template looks this way (I have comment out the functions)

Code: Select all

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul class="clearfix">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}


//Active link
{if $node->current == true}
<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>


//Active main-categorie
{elseif $node->parent == true && $node->depth == 1}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>



{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="separator" />

//Inactive links
{else}
<li><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

[nivekiam]

Quick css example to change the second level to bold:

Code: Select all

#menu_vert ul ul li {
    font-weight: bold;
}

[tcdk]

What if I don't wanna use and (think they are pretty ugly in menues )

How do I define it then?

[lollipop27]

Why are 's and 's ugly?

You can style them exactly the way you want (first thing: remove the list-style-items)

It's the way it proved to be the best to do menus, and i dont see a reason why li's should be ugly... poor them.

[Dr.CSS]

You can experiment by taking them out, but it makes it easier to control in a sense if they are ul li other wise you end up with a bunch of a links and it may be hard to bet them to line up one over the other...

[tcdk]

But it's not what im looking for.

I wan't a menu structure like this http://www.dogsite.dk/test/default.html
No li's just plain text and background images.

I can make it out of "simple navigation", I only cant get Mains and subs apart.
I want Mains with large types and bg-images, and subs with small types and no bg-images.

If only I can get the main and sub categories apart, Its easy for me..