Page 1 of 1
[Solved] Need some help customizing my menu
Posted: Wed Jul 14, 2010 5:56 pm
by The Shadow
I want to add a greater than sign to all of the parent items that have children, but only on the drop-down menu; not on the main menu. This string of CSS I that I want to add,
>
This is how I would like the menu to look like. I just don't know what the main menu items are called.
My menu template looks like this:
Code: Select all
{if $count > 0}
<ul id="nav" class="sf-menu">
{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 and $node->haschildren == true)}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext}</a>
{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext}</a>
{elseif $node->current == true}
<li><a href="{$node->menutext}">{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{else}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext}</a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}
Re: Need some help customizing my menu
Posted: Wed Jul 14, 2010 9:34 pm
by The Shadow
So there's no way how to this via the Menu Manager?
If making my menu template look like this:
Code: Select all
{elseif $node->haschildren == true and $node->type != 'sectionheader' and $node->type != 'separator'}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext} ></a>
Then my menu will like like this:
But when if I were to add
>
Then my menu will like this (which is not what I want):
Re: Need some help customizing my menu
Posted: Thu Jul 15, 2010 11:57 am
by uniqu3
Not tested but you could try
Code: Select all
{elseif $node->haschildren == true and $node->depth == 2}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext} <span style="float:right;">></span></a>
But it can also be done with CSS
for example
Code: Select all
.yourmenuclass li a span.classforspan /*First level */{
visibility:hidden;
float:right;}
.yourmenuclass li li a span.classforspan /*Second level*/ {
visibility:visible;}
Re: Need some help customizing my menu
Posted: Thu Jul 15, 2010 2:13 pm
by The Shadow
Code: Select all
{elseif $node->haschildren == true and $node->depth >= 2}
<li><a href="{$node->url}" {if $node->target}onclick="target='newwindow'" {/if}>{$node->menutext} <span style="float:right;">></span></a>
Worked perfectly!!! I changed the $node->depth == 2 to $node->depth >= 2 that way if I do another level depth, then it will have a > sign. If I just left it as $node->depth == 2 then only the second level would have a > sign.
Major thanks!
My web site is located
here
Re: Need some help customizing my menu
Posted: Mon Jul 19, 2010 3:21 pm
by The Shadow
I thought that my menu was finished, but when I tried my site in IE6 and IE7 the menu looks like this:
My menu looks great in IE8, FireFox 3.6.4, Safari 5, Opera 10.60, and Chrome 5; just not in IE6 (figures) and IE7. So what is the best way to resolve this issue?
Re: Need some help customizing my menu
Posted: Mon Jul 19, 2010 3:29 pm
by Ziggywigged
You might have to add those as images for best results.
Re: Need some help customizing my menu
Posted: Mon Jul 19, 2010 4:15 pm
by uniqu3
Actually IE6 is the only one showing this correctly by logic.
For example:
li is styled to wrap link -->
link has display:block means width100% and no float --> Tuition
means span element gets pushed by display block property --> >
You gave width to element, not sure didn't test it but you could try placing outside and play with width.
Re: Need some help customizing my menu
Posted: Mon Jul 19, 2010 5:15 pm
by owr_bgld
Ziggywigged wrote:
You might have to add those as images for best results.
I also think it's the best solution.
make the '>' as picture and background. no-repeat and position right center should work
but maybe you chould think about the different colors (for hover pe.)
But maybe also this works:
>Tuition
I had someimes success by putting the right before the left. but don't aksk me why
Re: Need some help customizing my menu
Posted: Mon Jul 19, 2010 5:41 pm
by Dr.CSS
When floating right the thing after it will go left everything on the web starts in the left top corner, and clear the right side...
I would have gone with an image first before trying the >, you can make it a transparent png but ie6 won't like it, so I would make 2 one for normal state and one for hover/active...
Re: Need some help customizing my menu
Posted: Mon Jul 19, 2010 8:23 pm
by The Shadow
owr_web wrote:
But maybe also this works:
>Tuition
Thanks everyone, and especially owr_web! Your suggestion worked perfectly in all of the browsers that I checked.
Thanks again everyone!