Vertical Menu

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
Rubio

Vertical Menu

Post by Rubio »

Hello, I need help to create a vertical menu.
I realized my template with artisteer 3.0 and CSS that handles created its menu.
to operate the menu needs an external file:

Code: Select all

 <__script__ type="text/javascript" language="javascript" src="jquery.js"></__script>
This allows the lower levels of opening.
I thought of starting from the operator menu "simple_navigation.tpl" and customize it to call my CSS.
Unfortunately I can not.
Can anyone help me? ??? ???
I am attaching the file menu and CSS:

simple_navigation.tpl

Code: Select all

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{assign var='number_of_levels' value=10000}
{if isset($menuparams.number_of_levels)}
  {assign var='number_of_levels' value=$menuparams.number_of_levels}
{/if}

{if $count > 0}
<__script__ type="text/javascript" language="javascript" src="jquery.js"></__script>

<ul>
{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}

{if $node->parent == true or $node->current == true}
  {assign var='classes' value='menuactive'}
  {if $node->parent == true}
    {assign var='classes' value='menuactive menuparent'}
  {/if}
  {if $node->children_exist == true and $node->depth < $number_of_levels}
    {assign var='classes' value=$classes|cat:' parent'}
  {/if}
  <li class="{$classes}"><a class="{$classes}" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->children_exist == true and $node->depth < $number_of_levels and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="parent"><a class="parent" href="{$node->url}"><span>{$node->menutext}</span></a>

{elseif $node->current == true}
<li class="currentpage"><h3><span>{$node->menutext}</span></h3>

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

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

{else}
<li><a href="{$node->url}"><span>{$node->menutext}</span></a>

{/if}

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

Code: Select all

<ul class="vmenu">
	<li>
		<a href="#" class="active"><span class="l"></span><span class="r"></span><span class="t">Home</span></a>
	</li>	
	<li>
		<a href="#"><span class="l"></span><span class="r"></span><span class="t">News</span></a>
		<ul>
			<li>
                <a href="#">Top 10</a>

            </li>
		</ul>
	</li>
	<li>
		<a href="#"><span class="l"></span><span class="r"></span><span class="t">Archive</span></a>
		<ul>
			<li>
                <a href="#">2008</a>
		<ul>
			<li>
                <a href="#">January</a>

            </li>
			<li>
                <a href="#">February</a>

            </li>
			<li>
                <a href="#">March</a>

            </li>
		</ul>

            </li>
			<li>
                <a href="#">2007</a>
		<ul>
			<li>
                <a href="#">January</a>

            </li>
			<li>
                <a href="#">February</a>

            </li>
			<li>
                <a href="#">March</a>

            </li>
		</ul>

            </li>
			
		</ul>
	</li>	
	<li>
		<a href="#"><span class="l"></span><span class="r"></span><span class="t">Forum</span></a>
	</li>
</ul>
Here is the link where you see the menu that I have to make
http://www.santuarioaltino.it/demo/
THANK YOU for those who can help me
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Vertical Menu

Post by Dr.CSS »

Something like this?..

http://multiintech.com/default/index.php?page=jquery

Click Default Extensions, then modules, then tags...
Rubio

Re: Vertical Menu

Post by Rubio »

Ok, so it should work, but where can I find file to download to use it??
staartmees
Power Poster
Power Poster
Posts: 1049
Joined: Wed Mar 19, 2008 4:54 pm

Re: Vertical Menu

Post by staartmees »

simply use one of the standard templates e.g. Top simple navigation + left subnavigation + 1 column see http://multiintech.com/default/index.php?page=top_left that comes with your cms made simple.
Locked

Return to “Layout and Design (CSS & HTML)”