Announcement

**gabrielcrowe** · 05-Aug-2008, 01:04 PM

i look forward to see any cool menus that people have designed with this.

note that in the code i gave to fibby that was posted, the only real difference was the database connection string, its the same for each version otherwise.

for those people who's brains are exploding with the complexity of this, i'll be turning the first post, into a tutorial, for all versions, with nice pics, soon.

thanks fib, for prompting me to make this fix.

**fibonacci-d** · 06-Aug-2008, 08:37 AM

no - thank YOU(!!)

**gabrielcrowe** · 06-Aug-2008, 10:30 AM

I have updated the first post, and added a downloadable pack containing everything you'll need, to make it happen.

No longer does this navigation use actinic_main.php. Instead, templates in Actinic are used. I urge everyone to use this technique, over the actinic_main.php idea, its much more stable, and easier to edit.

**gabrielcrowe** · 06-Aug-2008, 12:10 PM

more uses than just left hand navs:

how about replacing the sitemap?
http://www.skateasylum.co.uk/acatalog/sitemap.html

...its not beautiful, but it'll do.

**TraceyHand** · 06-Aug-2008, 01:13 PM

it's a damn sight nicer than the standard Actinic sitemap, Gabe!
Nice one

**Rich Brady** · 06-Aug-2008, 01:32 PM

It works a treat Gabe. Thanks for all the effort!

The Active Links (Background and Text) are all White, so it appears like there are gaps in the list once selected, but I'm trying to resolve this.

I have it up and running here (Editted: Re-moved Link)

Slowly modifying the CSS to get the look I want, so don't focus on the style just yet.

Ultimately, I want the Subsections to be hidden until a hover, so I'll keep you posted on it's progress.

**jont** · 06-Aug-2008, 01:43 PM

Rich - when I click on "parachutes" from the home page the link to parachutes disappears from the list when in the section (white on white)

**Rich Brady** · 06-Aug-2008, 01:46 PM

I know:

Originally posted by DenbighArmySurp View Post

The Active Links (Background and Text) are all White, so it appears like there are gaps in the list once selected, but I'm trying to resolve this.

Gabe, It's actually the Current Section and the Parent Section that is white on white. I've not moded any of the code that would give that result, just a few background colour changes and a:hover in the CSS. Can you shed any light?

Has anyone else implemented this and are you seeing the same issue?

I'm working on an a:active element as we speak... type... whatever...

**gabrielcrowe** · 06-Aug-2008, 01:57 PM

Originally posted by DenbighArmySurp View Post

It works a treat Gabe. Thanks for all the effort!

The Active Links (Background and Text) are all White, so it appears like there are gaps in the list once selected, but I'm trying to resolve this.

I have it up and running here

Slowly modifying the CSS to get the look I want, so don't focus on the style just yet.

Ultimately, I want the Subsections to be hidden until a hover, so I'll keep you posted on it's progress.

ah yes sorry. the css example i gave was made before the '_selected' addition to the code. post yours when you're done?

try making styles for:

HTML Code:

.li1_selected { }
.li1_selected a { }
.li2_selected { }
.li2_selected a {

**gabrielcrowe** · 06-Aug-2008, 02:39 PM

here is an example of it running with simple styles for these elements:
http://www.interact-studio.co.uk/aca...r_Flavour.html

**Rich Brady** · 06-Aug-2008, 02:48 PM

Heres the CSS I'm currently Running at www.denbigharmysurplus.co.uk:

Code:

/* php nav */
.navcontainerment {
	font-size: 12px;
}
.navcontainerment a{
	color: #FFFFFF;
	text-decoration: none;
}
.navcontainerment ul{
	list-style-type: none;
	padding: 0px;
}

.ul1 {
	font-size: 12px;
	margin: 0px;
	padding: 0px;
}
.li1 {
	background-color: #003300;
	padding: 4px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCFF66;
	font-weight: normal;
}
.ul2 {
	font-size: 11px;
	margin: 0px 0px;
	padding: 0px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-bottom-color: #000000;
}
.li2 {
	background-color: #CCFF66;
	padding: 3px 0px 3px 8px;
	font-weight: normal;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #003300;
}

.li2 a:hover {
	color: #000000;
	
}

.li1_selected {
	background-color: #003300;
	
}

.li2_selected {
	color: #CCFF66;
	background-color: #003300
}
.li2_selected a {
	color: #CCFF66;
	background-color: #003300;
	padding: 0px 0px 0px 8px;
}

.li2 a {
 color:#222;
}

It Inlcudes the '_selected' elements to remove the white on white problem.

**gabrielcrowe** · 06-Aug-2008, 02:49 PM

if Actinic Towers want to talk about corporate licensing for V10, then you need to talk to my agent.

**gabrielcrowe** · 06-Aug-2008, 02:51 PM

Originally posted by DenbighArmySurp View Post

Heres the CSS I'm currently Running at www.denbigharmysurplus.co.uk:

It Inlcudes the '_selected' elements to remove the white on white problem.

can i suggest this instead?

HTML Code:

/* php nav */
.navcontainerment {
	font-size: 12px;
}
.navcontainerment a{
	color: #FFFFFF;
	text-decoration: none;
}
.navcontainerment ul{
	list-style-type: none;
	padding: 0px;
}

.ul1 {
	font-size: 12px;
	margin: 0px;
	padding: 0px;
}
.li1 {
	background-color: #003300;
	padding: 4px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCFF66;
	font-weight: normal;
}
.ul2 {
	font-size: 11px;
	margin: 0px 0px;
	padding: 0px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #000000;
	border-bottom-color: #000000;
}
.li2 {
	background-color: #CCFF66;
	padding: 3px 0px 3px 8px;
	font-weight: normal;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #003300;
}

.li2 a:hover {
	color: #000000;
	
}

.li1_selected {
	background-color: #003300;
	padding: 4px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCFF66;
	font-weight: normal;		
}

.li2_selected {
	color: #CCFF66;
	background-color: #003300
	padding: 3px 0px 3px 8px;
	font-weight: normal;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #003300;	
}
.li2_selected a {
	color: #CCFF66;
	background-color: #003300;
}

.li2 a {
 color:#222;
}

**Rich Brady** · 06-Aug-2008, 02:57 PM

Originally posted by gabrielcrowe View Post

can i suggest this instead?

You can suggest what ever you want, you're officially my Hero

I'd only just noticed the borders and was about to change the CSS, but my Fat fingures obviuosly don't type as quick as your slender digits.

**gabrielcrowe** · 06-Aug-2008, 03:03 PM

Here is my css from:
http://www.interact-studio.co.uk/aca...r_Flavour.html

Click around the major sections to see the 'side tab' effect it adds to the site.

HTML Code:

.navcontainerment ul {
	padding: 0px;
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}

.navcontainerment a {
	font-size: 12px;
	color: #000000;
	text-decoration: none;
}

.li1 {
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #333333;
}
.li1_selected {
	font-weight: normal;
	color: #888;
	list-style-type: square;
	list-style-position: inside;
	padding: 5px;
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #333333;
	border-bottom-color: #333333;
	border-left-color: #333333;
}


.li2_selected {
	font-weight: normal;
	color: #000000;
	list-style-type: square;
	list-style-position: inside;
}

Announcement

freebie: popout section aware nav.

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment