Page 1 of 3

NAV_LIST_UL horiz. mit flyout farbig!?

Posted: Tue 3. Jul 2007, 20:01
by fopulu
Hallo zusammen!

Ich habe folg. kleines großes Problem.
Wie auf dem Bild ersichtlich, möchte ich ein horizontales Menü realisieren, das 4 Hauptmenüpunkte hat und unterschiedlichen Farben zugeordnet sein soll. So weit so gut, das funktioniert schon wunderbar.
Jetzt hätte ich gerne aber ein flyout, sobald ich über einen der Menüpunkte drüber fahre und das natürlich in der entsprechenden Farbe des Menüpunktes.... und daran scheitere ich gerade.... :cry:

Image

Ich nutze dazu die NAV_LIST_UL,F-Variante.

Hat irgendeiner eine Idee oder einen Ansatz mit dem ich weiter komme?

Posted: Thu 5. Jul 2007, 08:49
by fopulu
Keiner eine Idee? :?

Posted: Fri 6. Jul 2007, 21:12
by Klappstuhl28
Als flyout kenne ich so auf die schnelle nur:

http://www.phpwcms.de/forum/viewtopic.p ... eluxe+menu

Auch wenn ich mich mit der NAV_LIST_UL,F-
bisher nur sehr oberflächlich beschäftigt habe,
glaube ich nicht, dass das dynamisch funktioniert.
Im Regelfall läuft sowas ja mit Java-Skript oder
zumindest mit einigen Umbauten, damit sowas
auch im IE läuft.

Sonst musste mal warten, bis Knut wieder vorbeischaut.


Lars

Posted: Sun 8. Jul 2007, 08:45
by Oliver Georgi
Ich bringe demnächst eine etwas erweiterte Variante des Flyout Menüs, welches dann auch zuverlässig auf IE funktioniert. Ist zwar very tricky und extrem hart an der Grenze, aber es läuft sehr zuverlässig - auf allen Browsern.

Asonsten bemühe ich mich um eine JavaScript Variante auf Basis von jQuery oder Mootools - so dass auch Effekte usw. nutzbar sind. Aber das wird wohl noch...

Oliver

Posted: Sun 8. Jul 2007, 20:39
by Klappstuhl28
... bingbingbingbing :D

Posted: Sun 8. Jul 2007, 20:42
by fopulu
Danke für die Antworten...

Re: NAV_LIST_UL horiz. mit flyout farbig!?

Posted: Tue 24. Jul 2007, 11:50
by Nordlicht
fopulu wrote: Wie auf dem Bild ersichtlich, möchte ich ein horizontales Menü realisieren, das 4 Hauptmenüpunkte hat und unterschiedlichen Farben zugeordnet sein soll. So weit so gut, das funktioniert schon wunderbar.

Image

Ich nutze dazu die NAV_LIST_UL,F-Variante.
Wie hast du den einzelnen Hauptmenüpunkten eine eigene Farbe zugeteilt?

Posted: Tue 24. Jul 2007, 12:09
by Oliver Georgi
versuchsmal mit folgendem frontend_render Code:

Code: Select all

<?php

$content['all'] = str_replace('{NAVI}', buildNavi(), $content['all']);

function buildNavi($start=0, $counter=0) {
	
	$t = array();
	
	$struct = getStructureChildData($start);
	
	if($counter == 0) {
		$last = count($struct) - 1;
	} else {
		$last = 0;
	}
	
	$x = 0;
	
	foreach($struct as $value) {
	
		//if( isset($GLOBALS['LEVEL_KEY'][ $value['acat_id'] ]) ) {
		
		/*	$p1 = ' path';
		} else {
			$s  = '';
			$p1 = '';
		}
	
		if($GLOBALS['content']['cat_id'] == $value['acat_id']) {
			$a1 = ' active';
			$a3 = 'active';
		} else {
			$a1 = $p1;
			$a3 = '';
		}
		*/
		$s = buildNavi($value['acat_id'], $counter+1);
		if($s) {
			$g  = '<!--[if IE 7]><!--></a><!--<![endif]-->';
			$g .= $s;
			$g .= LF . str_repeat('	', $counter);
			
			$class = $counter ? ' class="fly"' : ' class="drop"';
			
			$close_li = str_repeat('	', $counter+1);
			
		} else {
			$g  = '</a>';
			$class = '';
			$close_li = '';
		}
		
		if( $last && $last == $x ) {
			$enclose = ' class="enclose"';
		} elseif( $x || ($counter == 0 && $x == 0) ) {
			$enclose = '';
		} else {
			$enclose = ' class="enclose"';
		}

		$l  = str_repeat('	', $counter+1) . '<li'. $class . ' id="cat-id_' . $value['acat_id'] . '">';
		$l .= get_level_ahref($value['acat_id'], $enclose) . html_specialchars($value['acat_name']);
		$l .= $g;
		
		
		
		$l .=  $close_li . '</li>';
		
		$t[] = $l;

		$x++;
		
	}
	
	if($counter) {
		$A = LF . str_repeat('	', $counter) . '<!--[if lte IE 6]><table><tr><td><![endif]-->';
		$B = LF . str_repeat('	', $counter) . '<!--[if lte IE 6]></td></tr></table></a><![endif]-->';
	} else {
		$A = '';
		$B = '';
	}
	
	
	$t = implode(LF, $t);
	if($t) {
		$t =	$A . LF . str_repeat('	', $counter) .	'<ul'.($counter?'':' id="pmenu"').'>' . LF . $t . LF . str_repeat('	', $counter) . '</ul>'.	$B ;
	}
	
	return $t;

}
?>
Hier die zugehörige CSS (Beispiel):

Code: Select all

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/simple_vertical.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, 
#pmenu ul {
	padding:			0; 
	margin:				0; 
	list-style-type:	none;
	z-index: 1;
}

/* Set up the link size, color and borders */
#pmenu a, 
#pmenu a:visited {
	display:			block;
	width:				160px;
	font-size:			11px;
	color:				#575757;
	line-height:		13px;
	text-decoration:	none;
	padding:			3px 5px 3px 5px;
}

/* Adopt width of first level links */
#pmenu a.first1, 
#pmenu a.first1:visited {
	width:				55px;
}
#pmenu a.first17, 
#pmenu a.first17:visited {
	width:				160px;
}
#pmenu a.first35, 
#pmenu a.first35:visited {
	width:				62px;
}
#pmenu a.first74, 
#pmenu a.first74:visited {
	width:				82px;
}
#pmenu a.first84, 
#pmenu a.first84:visited {
	width:				62px;
}


#pmenu a.first1, 
#pmenu a.first1:visited,
#pmenu a.first17, 
#pmenu a.first17:visited,
#pmenu a.first35, 
#pmenu a.first35:visited,
#pmenu a.first74, 
#pmenu a.first74:visited,
#pmenu a.first84, 
#pmenu a.first84:visited {
	padding:			1px 5px 1px 5px;
}




#pmenua a:hover {
	color:				#575757;
}

/* Set up the sub level borders */
#pmenu li ul li a, 
#pmenu li ul li a:visited {
	color:				#ffffff;
}
#pmenu li ul li a.enclose, 
#pmenu li ul li a.enclose:visited {
/*	border-top:			1px solid #f2f2f2; */
}

/* Set up the list items */
#pmenu li {
	float:				left;
	background:			#dddddd;
	border-left:		1px solid #f2f2f2;
	border-bottom:		0;
}
#pmenu li ul li {
	float:				left;
	background:			#dddddd;
	border-left:		1px solid #f2f2f2;
	border-bottom:		1px solid #f2f2f2;
	border-right:		1px solid #f2f2f2;
}


/* For Non-IE browsers and IE7 */
#pmenu li:hover {
	position:			relative;
}
/* Make the hovered list color persist */
#pmenu li:hover {
	background:			#acacac;
}

#pmenu li ul li:hover {
	background:			#5d5d5d;
}


#pmenu li:hover > a {
	color:				#FFFFFF;
}
#pmenu li:hover li > a {
	
}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {
	display:			none;
}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {
	display:			block;
	position:			absolute;
	top:				-3px;
	left:				155px;
	padding:			3px 15px 15px 15px;
	background:			transparent url(img/leer.gif);
	width:				185px;
}
/* Position the first sub level beneath the top level links */
#pmenu > li:hover > ul {
	left:				-16px;
	top:				13px;
}

/* get rid of the table */
#pmenu table {
	position:			absolute;
	border-collapse:	collapse;
	top:				0;
	left:				0;
	z-index:			100;
	font-size:			1em;
}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {
	position:			relative;
	color:				#FFFFFF;
}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active,
#pmenu li a:focus {

}

/* Set up the pointers for the sub level indication */
#pmenu li.fly {
	/* background:			#dddddd url(http://www.cssplay.co.uk/menus/fly.gif) no-repeat right center; */
}
#pmenu li.drop {
	/* background:			#dddddd url(http://www.cssplay.co.uk/menus/drop.gif) no-repeat right center; */
}
#pmenu li.drop li {
	background:				#bbbbbb;
}


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {
	visibility:			hidden;
	display:			block;
	position:			absolute;
	top:				-6px;
	left:				155px;
	padding:			5px 15px 15px 15px;
	background:			transparent url(img/leer.gif);
}

/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul {
	visibility:			hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul {
	visibility:			hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul {
	visibility:			hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
	visibility:			hidden;
}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
	visibility:			visible;
	left:				-15px;
	top:				11px;
	lef\t:				-16px;
	to\p:				11px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul { 
	visibility:			visible;
	top:				-5px;
	left:				155px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul { 
	visibility:			visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul { 
	visibility:			visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { 
	visibility:			visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */

Missing ID could be implemented very easy

Oliver

KH_NAVI

Posted: Thu 26. Jul 2007, 11:51
by flip-flop
Leute das Teil ist richtig gut.

Die "overrun" Funktion macht das Menü jetzt absolut brauchbar. (Klappt nicht sofort zu beim Abrutschen mit dem Mauszeiger rechts oder unten).
Darstellung in den verschiedenen Browsern ist ok.
Kein JS für den IE notwendig.

Die Ursprungsversion ist hier in Aktion: http://www.cssplay.co.uk/menus/simple_vertical.html

Wer es brauch:
------------------------------
#pmenu a.first1,
#pmenu a.first1:visited
------------------------------
ändern nach
------------------------------
#pmenu #cat-id_1 a,
#pmenu #cat-id_1 a:visited
------------------------------
usw.

Auf den ersten schnellen Blick könnte das auch umgesetzt werden auf die NAV_LIST_UL.

Knut :D

Posted: Sun 29. Jul 2007, 14:01
by E.A.Murphy
Moin,
ich würde gerne wissen, ob man auch hierbei das Menü erst ab einer bestimmten Artikel-ID anzeigen kann?

ich hatte sowas auch zunächst mit NAV_LIST_UL:VCSS versucht, was im IE gar nicht lief (habe ich dummerweise erst nach zwei Tagen bemerkt, da ich am Mac sitze :roll: )
Hatte mein Problem hier schonmal beschrieben: http://www.phpwcms.de/forum/viewtopic.php?t=15315 und flip-flop hat mir ganz gut weiter geholfen.

(btw: bei der Liste hatte ich den generierten Code aus dem Quelltext am Ende der CSS eingefügt und sie im Template eingebunden - dann mit ..._UL:F aufgerufen. Allerdings kam dann nur noch ein Asklappmenü (2. Level usw), wenn man das 1. Level angeklickt hatte. Is zwar off topic - aber wenn jmd was weiß, sonst mach ich nen neuen thread)

Posted: Sun 29. Jul 2007, 14:07
by E.A.Murphy
Ohh, Kommando zurück. :!:
habs gefunden:

Code: Select all

function buildNavi($start=0, $counter=0) { 
"start" ist die Level-ID mit der begonnen wird.

Posted: Sun 29. Jul 2007, 15:31
by Blueberry
Hallo,

Ich hab auch mal eine kleine Frage bzw. ein Problem mit dieser Navigation.
Im Internet Explorer ist alles uper und wird auch so angezeigt, wie es sein soll. Im Firefox ist die Navigation da wo sie sein soll aber der Inhaltsbereich der Seite um die Breite der Navigation nach rechts verschoben. Ich hab bisher nichts an den Einstellungen verändert und hab so gar keine Idee, wo ich da genau ansetzen muss.

Vielen Dank schon einmal
LG
Nicole

Posted: Sun 29. Jul 2007, 17:54
by pepe
...vielleicht anschließend (nach der NAVI) ein

<div style="clear:both;"> </div>

im Template setzen :idea:

Posted: Sun 29. Jul 2007, 18:33
by Blueberry
pepe wrote:...vielleicht anschließend (nach der NAVI) ein

<div style="clear:both;"> </div>

im Template setzen :idea:
:lol: yaaaahhhhh genau das wars
ein riesen DANKESCHÖN an dich !!!

Wenn du mal schauen willst, wie ich dein Template nun ver(un)staltet habe, sag Bescheid, dann geb ich dir die Zugangsdaten :wink:

Posted: Sun 29. Jul 2007, 20:20
by pepe
Als langjähriger phpwcms user ist "WARTEN" mein 2. Vorname..... 8)

Also warte ich, bis deine Site online geht . Gespannt bin ich aber natürlich schon sehr :lol: