NAV_LIST_UL horiz. mit flyout farbig!?

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
fopulu
Posts: 359
Joined: Tue 2. May 2006, 14:19
Location: Rhein-Main

NAV_LIST_UL horiz. mit flyout farbig!?

Post 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?
fopulu
Posts: 359
Joined: Tue 2. May 2006, 14:19
Location: Rhein-Main

Post by fopulu »

Keiner eine Idee? :?
User avatar
Klappstuhl28
Posts: 833
Joined: Fri 4. Mar 2005, 01:58
Location: Hamburg
Contact:

Post 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
Lars

Don't say you don't have enough time. You have exactly the same number of hours per day that were given to Helen Keller, Pasteur, Michaelangelo, Mother Teresa, Leonardo da Vinci, Thomas Jefferson, and Albert Einstein. - H. Jackson Brown -
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Post 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
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
Klappstuhl28
Posts: 833
Joined: Fri 4. Mar 2005, 01:58
Location: Hamburg
Contact:

Post by Klappstuhl28 »

... bingbingbingbing :D
Lars

Don't say you don't have enough time. You have exactly the same number of hours per day that were given to Helen Keller, Pasteur, Michaelangelo, Mother Teresa, Leonardo da Vinci, Thomas Jefferson, and Albert Einstein. - H. Jackson Brown -
fopulu
Posts: 359
Joined: Tue 2. May 2006, 14:19
Location: Rhein-Main

Post by fopulu »

Danke für die Antworten...
Nordlicht
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

Re: NAV_LIST_UL horiz. mit flyout farbig!?

Post 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?
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Post 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
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

KH_NAVI

Post 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
Last edited by flip-flop on Sat 15. Sep 2007, 22:36, edited 1 time in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
E.A.Murphy
Posts: 81
Joined: Sun 16. Jan 2005, 00:31
Location: Köln
Contact:

Post 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)
E.A.Murphy
Posts: 81
Joined: Sun 16. Jan 2005, 00:31
Location: Köln
Contact:

Post 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.
Blueberry
Posts: 19
Joined: Thu 3. May 2007, 23:29
Contact:

Post 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
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Post by pepe »

...vielleicht anschließend (nach der NAVI) ein

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

im Template setzen :idea:
Blueberry
Posts: 19
Joined: Thu 3. May 2007, 23:29
Contact:

Post 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:
pepe
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

Post 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:
Post Reply