Customizing the simple_navigation template for css.Need help

[rasmita]

Hello I have started using a template called simple navigation for menu horizontal, I did some changes in the this template, and likewise in css too but I getting problem while link in horizontal menu is visited, no css is affecting it, can u suggest me, what to do???
In hover it is correct but when the tab in horizontal menu is selected, no effect of css is seen, please help and i also need to give seperators like "|" in between the tab menu item, such as item 1 | item2 | item3. Can't sort it out. Please help........


my css

Code: Select all

.suckertreemenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
width: 138px;
white-space: nowrap;
background-color: #F3F3F3; /*overall menu background color*/
/*border-right-color:#FFFFFF;
border-right-style:solid;
border-right-width:1px;*/
background-image:url(images/img_menu_hover_bg.gif);
background-repeat: no-repeat;
background-position: right;
/*border: 2px #FFFFFF solid;*/
padding-right:0px;
}

/*Top level menu link items style*/
.suckertreemenu ul li a
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	color:#FFFFFF;
	white-space: nowrap;
	display: block;
	width: 140px; /*Width of top level menu link items*/
	padding: 1px 8px;
	/*border: 0px solid black;*/
	border-left-width: 0;
	text-decoration: none;
	background-image:url(images/img_menu_bg.gif);
	background-repeat:repeat-x;
	height:38px;
	line-height:38px;
	text-align:center; 
}
	
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{ 
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
text-align:center;
}

.suckertreemenu ul li a:hover{

color: #000000;
z-index:100;
background-image:url(images/img_menu_hover_bg.gif);
background-repeat:repeat-x;
background-position:bottom;
background-color:#a34f2e;
text-align:center;

}
.suckertreemenu a.active:hover
{
	color: #000000;
	z-index:100;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	white-space: nowrap;
}
.suckertreemenu ul li.active a
{
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px; 
background-color:#a34f2e;               
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
	
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */

and then the template code taken from simple navigation

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 *} 

{if $count > 0}
<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->current == true}
{*Code for current menu's page*}
<li>{$node->menutext}

{elseif $node->parent == true}
<li><a href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->menutext}</a>

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

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

{else}
{*Code for submenu and menu links*}
<li><a href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->menutext}</a>

{/if}

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

[uniqu3]

Hi,

with no link to view your problem i can only guess what exactly you mean but i think you will need a class in oyur css like this

Code: Select all

.suckertreemenu ul li a:link, .suckertreemenu ul li a:visited{
yourstyle: for first level menu;}

to add separator you can either use in your css border-right: 1px solid #yourdesiredcolor; or add it in menu template before or before if you want it the same style as link text.

[tyman00]

Thank you for posting your stylesheet and template, but I will agree with Uniqu3... in order to propely understand what you need, we will need to see a link to the page in question.

[rasmita]

Thank you I got it!

But now another problem, while I click to submenu items, the design of main menu changes. what to do, please help!!!!!

What is the use of Accessibility and Cross browser compatibilty css??

[Dr.CSS]

Most likely when hitting the sub menu item the main menu item becomes menuparent or some such class, you really need to learn to right click and view source as it will tell you a lot about the changes that take place in the menu when going to diff. pages...

The cross browser accessibility style sheet is set with calls that are mostly in the default content templates like it will hide these from all browsers but screen readers... but the thing you may need it for are the calls in menus as it will move these off the page but leave them for other browser types to use...

[rasmita]

Hello, Thanks a lot for guiding me!!

Another problem that i am stucked with is the separators again, how to give a condition for it so that it can be seen as the design is. In my design a extra separator is added before the menu text content. Please help me.....

I have attached the design below for how the separators to be used in between the contents, one for header and other for footer respectively. There are some slanting separator also in footer, how to do make it. Please go through it.

I had given a separator image for the menu separator in css, used for simple navigation template. Please help me out, how to delete the extra image separator.

[uniqu3]

Well you will either need a background image with border on the right like in your screenshot or you will need to change .suckertreemenu ul li a {line-height: height of your desired right border; border-right:1px solid #fff;}

But as i already said before, without seeing the working site i cant say much you just need to play around with CSS