[SOLVED] css menu conversion help needed

[elkman]

I'm trying to learn how to convert a css menu for use with menu manager.

The menu I am trying to convert looks like this. I have included the menu manager template that I would like to use for this menu:

Code: Select all

    <div id="buttons">
      {menu template='minimal_menu.tpl' number_of_levels='1'}
      <!--<a href="index.html" class="but"  title="">Home</a><div class="but_razd"></div>
      <a href="blog.html" class="but" title="">Blog</a><div class="but_razd"></div>
      <a href="gallery.html"  class="but" title="">Gallery</a><div class="but_razd"></div>
      <a href="about_us.html"  class="but" title="">About&nbsp;us</a><div class="but_razd"></div>
      <a href="contact_us.html" class="but" title="">Contact&nbsp;us</a>-->
    </div>

The CSS associated with this menu is here:

Code: Select all

#buttons{
	text-align:center;
	height: 25px;
	margin: 0px auto;
	padding: 18px 0px 0px 36px;
	background: url([[root_url]]/uploads/water/images/buttons.gif) center top no-repeat;
	width: 978px;
}

#buttons a {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 18px;
	display: block;
	float: left;
	text-decoration: none;
	color: #006CAD;
	text-align: center;
	padding-top: 0px;
	font-weight:100;
}

.but_razd { width: 78px;
	height: 20px;
	background:url([[root_url]]/uploads/water/images/but_razd.gif) center 2px no-repeat;
	float:left;}

#buttons .but:hover {
	text-decoration:underline;
	}

I am hoping that someone with much more experience can actually show my by this example how to convert this menu for use with menu manager. This would be extremely helpful for those of us with less experience converting these menus.

Converting these css menus take me ten to twenty times longer to convert then an entire template. I am sure it can't be as hard as I am making it.

Elkman

[Dr.CSS]

I would need a working example to be of any help, which I'm sure once I saw it in action I should be able to make it work...

[elkman]

Dr. CSS,

Here is a link to the template I chose to experiment with:
http://www.metamorphozis.com/free_templ ... review.php

[Dr.CSS]

There is no need for all the divs etc. all can be done with CSS...

Use the page alias as a class or this menu template which will give the last li item a class of last then in css call an image to the li on the right side and li.last no background image...

{if $count > 0}

{assign var='last_top' value=''}
{foreach from=$nodelist item=node}
{if $node->depth == 1}
{assign var='last_top' value=$node->id}
{/if}
{/foreach}


<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node name='menu'}

{assign var='last' value=''}
{if $last_top == $node->id}
{assign var='last' value='last '}
{/if}

{if $node->depth > $node->prevdepth}
{repeat string='<ul class="unli">' 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 and $node->haschildren == true)}
<li class="{$last}menuactive menuparent">
<a class="menuactive menuparent" {elseif $node->current == true}
<li class="{$last}menuactive">
<a class="menuactive" {elseif $node->haschildren == true}
<li class="{$last}menuparent">
<a class="menuparent" {elseif $node->type == 'sectionheader'}
<li class="{$last}sectionheader"><span class="sectionheader">{$node->menutext}</span> {elseif $node->type == 'separator'}
<li style="list-style-type: none;"> <hr class="menu_separator" />
{elseif empty($last)}
<li>
<a
{else}
{* last menu item *}
<li class="{$last}"><a {/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
{if $node->target}target="{$node->target}" {/if}
href="{$node->url}"><span>{$node->menutext}</span></a>
{elseif $node->type == 'sectionheader'}
><span class="sectionheader">{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string='</li></ul>' times=$node->depth-1}
</li>
</ul>
<div class="clearb"></div>
</div>
{/if}

[elkman]

Thank you for the code and explanation Dr.CSS. I'll experiment with this and practice variations.

Elkman