Menu Template: two list different id's

[bbonora]

I have created two navigation styles - one for my main nav and one for my sub nav.  I have tried to created a template that gives my main nav on id and my sub nav a different id.  Below I have included my code.  I don't fully understand the logic and was wondering if somebody could help me with it.  I want to keep it very simple.


{if $count > 0}

{foreach from=$nodelist item=node}
{if $node->current == true}
url}">{$node->menutext}
{else}
url}">{$node->menutext}
{/if}
{/foreach}

{/if}

[Dr.CSS]

To have 2 menus you need 2 {menu} tags, with the template called in it {menu template='yourtemplate'} & {menu template='yourtemplate2'}...

So you need to make 2 menu templates with different ul ids ie,. ul id='nav' & ul id='subnav' then you can style them differently

[Richardpixel]

Hi,

I'm new to CMSMS and have so far found it really good and useful, but I'm getting a bit stuck with the menu.

I need to do something very similar i.e. style my main nav and sub nav items differently but I can't see how adding to menu templates helps. I have tried this and just get a duplication of the whole navigation?

I need to do something like the following, though the divs could probably be replaced with ul and li if easier:

Code: Select all

<div class="navItem">
	<a href="index.html" class="navLink">Home</a>
</div>
<div class="navItem">
	<a href="#" class="navLink">About Investigo</a>
</div>
<div class="navItem" onclick="SwitchMenu('sub1')">
	<a href="#" class="navLink">Our Divisions</a>
</div>
<div class="subNavItem" id="sub1">
	<div class="allSubNavItems">
		<a href="#" class="subNavLink">Overview</a><br/>
		<a href="#" class="subNavLink">Finance – Commerce & Industry</a><br/>
		<a href="#" class="subNavLink">Finance – Financial Services</a><br/>
		<a href="#" class="subNavLink">Change Solutions</a><br/>
	</div>
	<div class="navLine"></div>
</div>
<div class="navItem" onclick="SwitchMenu('sub2')">
	<a href="#" class="navLink">For Candidates</a>
</div>

Can anyone please help?

[Vin]

Am I to take it you didn't get the advantages of the menu manager and menu templates?
If so:
The CMS generates the menu from the hierarchy and position of your sections as you've ordered them in the "Content » Pages" section in admin. The menu template is the way how to tell the application to display the menu items on the page (with the help of stylesheets). The Menu manager uses Smarty template to specify what to output on certain conditions - what to do when the menu/page item (or "node") is a page/separator/link/section_header, what to do when it is a parent etc. Look at the User Handbook and into the online-help in the CMSMS.
If not:
There ought to be a default template in the CMSMS right in the package.

[Richardpixel]

Thanks for the quick reply but it hasn't really helped.

I do get the advantages of the menu manager and templates but I can't obviously see a way to achieve what I want to do, though I'm sure it can be done.

I have seen various examples in the handbook/online help, some I have tried to work from and modify but still no joy.

I basically need to style all top menu links one way, regardless if they have children or not and all sub-links need to have a different style (class).

Does that make sense? I'm sorry if I'm being dense but this is the first time I've used CMSMS.

[Vin]

OK, so your problem now is the design or the content? I mean, do you have your menu links in the right place in the html content and just want to modify the look of the links, or does it output menu links which you don't want to show up etc.(for instance, you want to have displayed the links of the active current section, not all of the sections)?
If the design is the issue, you have to control it via the stylesheet (CSS). A link to the site and/or screenshot might be useful.

[Richardpixel]

The content is fine. I'm actually still using the dummy content for the moment. I know I can adjust the style via the css but I can't seem to have a different style for the top level links and the sub links. I need to be able to apply a class on the main links i.e. class="mainNavItem" and apply a different class for a sub menu item i.e. class="subNavItem".

The site I'm working is at: http://pixel.dragonstaff.com/cmsms/index.php?page=about

I need it to ideally look like the nav on this url: http://www.pixelcreation.co.uk/preview/investigo/sub-page.html

[Vin]

Just style the first level li in css like that: #nav ul li{properties}.

[Richardpixel]

Good call! Why didn't I think of that!

I'm using the following css which is now getting pretty close:

Code: Select all

#allNavItems ul {
	list-style: none;
	margin-left: 0;
	margin-top: 1px;
	margin-bottom: 5px;
	padding-left: 1em;
	text-indent: -0.5em;
}

#allNavItems ul li {
	font-size: 1.2em;
	letter-spacing:-0.08em;
	font-weight: bold;
}

#allNavItems li ul {
	font-size: 0.65em;
	text-indent: -1.25em;
}

#allNavItems li ul a {
	color: #6fa3da;
	letter-spacing: -0.02em;
}

#allNavItems li ul a:hover {
	color: #2a537e;
	letter-spacing: -0.02em;
}

Thanks for your help.

[Dr.CSS]

To get expanding top level items you may want to look at this in the Handbook...

http://wiki.cmsmadesimple.org/index.php ... ion_expand

[Richardpixel]

Thanks. I had seen that and actually used it as a basis for my menu.