[farcry-dev] Re: Farcry 4 site navigation

[Stephen Moretti]

On 05/11/2007, BazD <[EMAIL PROTECTED]> wrote:
>
>
> Ive managed to get the navigation to display now. It turned that the
> import tablib was originally in the header.cfm file, and when I moved
> it to within the dmHTML file, the nav showed.
> Strange one as I would have assumed that anything called from the
> header.cfm file would automatically be made available to the rest of
> the template.
>
> Anyway, now to style up the navigation to fit my layout. Ive found in
> the main.css page that there is reference to #nav which styles up the
> navigation which relates to this skin:
>
>     <skin:genericNav navID="#application.navid.home#"
>                         id="nav"
>                         depth="2"
>                         bActive="true"
>                         bIncludeHome="true">
>
> How can I alter the genericNav skin ?


You don't actually need to change the genericNav tag, only provide the
appropriate CSS to style up a ul-style menu.

Active menu items have the class "active".
Parent menu items have the class "parent"
You can set any id for the top level UL itself using the id attribute on the
genericNav tag.

Attached is a bit of css from a simple site that's currently in development
that might help you get started.

This google search should also help you with producing pure css styles for
ul/li menus - http://www.google.com/search?q=pure+css+li+menus

Hope this helps

Regards

Stephen

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"farcry-dev" group.
To post to this group, send email to farcry-dev@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/farcry-dev?hl=en
-~----------~----~----~----~------~----~------~--~---


/**** Navigation Styles ****/
/** Styles **/

#navwrap {
	margin: 0;
	padding-top:100px;	
}

#nav, #nav ul {
	padding: 5px 5px 5px 5px;
	margin: 0;
	list-style: none; 
	line-height: 1em;
	background: white;
	float:right;
}

#nav a, #nav a:link, #nav a:visited, #nav a:active {
	display: block;
	width: 9em;
	font-size: 0.9em;
	font-weight: bold;
	line-height:1.3em;
	color: #25795F;
}

#nav a:hover {
	display: block;
	font-size: 0.9em;
	font-weight: bold;
	line-height:1.3em;
	color: white;
}

#nav li {
	float: left;
	width: 9em;
	padding: 2px 2px 2px 2px;
	background: #80b2b2;
	border-left: solid 2px white;
	border-right: solid 2px white;
}

#nav li li {
	margin-right:-10px;
	padding: 2px 2px 2px 2px;
}

#nav li ul {
	width: 9em;
	padding: 0px;
	border: 0px;
	border-top: solid 1px white;
	border-left: solid 1px white;
}

#nav li ul li {
	border:0px;	
	border-bottom: solid 1px white;	
	border-right: solid 1px white;	
}

/** Display **/

#nav a {
	text-decoration:none;
}

#nav li ul {
	position:absolute;
	display:none;
	margin-left:-3px;
	margin-top:1px;
}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	display:none;
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul {
	display:block;
}


#nav li.active {
	background-color: #257A60;
}

#nav li.active a {
	background-color: #257A60;
	color:white;	
}

#nav li.active ul li {
	background-color: #ccdede;
}

#nav li.active li a {
	background-color: #ccdede;
	color: #257A60;
} 

#nav li.active li a:hover {
	color: white;
} 

#nav li.active li.active a {
	color: white;
	background-color: #ccdede;
}