vertikales Menü

[no remorse]

Hallo

Hat jemand eine Gedankenanstoss, wie ich folgende Navigation in phpwcms anwenden kann?
Welchen Navi-Tag ist hier anzuwenden?

http://www.cssplay.co.uk/menus/breadcrumb.html

CSS:

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/breadcrumb.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menu, .menu ul {
	padding:0;
	margin:0;
	list-style:none;
}

.menu {
	
	border:1px solid #ddd;
	border-width:1px 0 1px 1px;
	position:relative;
	z-index:500;
}
.menu table {
	border-collapse:collapse;
	padding:0;
	margin:0 0 -1px 0;
	width:0;
	height:0;
	font-size:1em;
}
.menu ul {
	position:absolute;
	left:-9999px;
}
.menu li {
	width:180px;
	height:42px;
	float:left;
	
}
.menu li a {
	display:block;
	width:100%;
	height:42px;
	line-height:42px;
	color:#777;
	text-decoration:none;
	font-size:12px;
	font-family:"lucida grande", arial, sans-serif;
	text-indent: 50px;
	float:left;
}
.menu li.sub a {
	background:url(breadcrumbs/grey.gif) no-repeat 150px center;
}
.menu li a:hover {
	white-space:nowrap;
	position:relative;
	color:#06f;
}
.menu li.sub a:hover {
	background:url(breadcrumbs/blue.gif) no-repeat 150px center;
	color:#06f;
}
.menu li.sub a b {
	display:block;
	color:#06f;
	font-weight:normal;
}
.menu li:hover {
	position:relative;
}
.menu li:hover.sub > a {
	background:url(breadcrumbs/blue.gif ) no-repeat 150px center;
	color:#06f;
}
.menu li.home {
	background:url(breadcrumbs/home.gif) no-repeat 10px center;
}
.menu li.products {
	background:url(breadcrumbs/graph.gif) no-repeat 10px center;
}
.menu li.services {
	background:url(breadcrumbs/services.gif) no-repeat 10px center;
}
.menu li.shop {
	background:url(breadcrumbs/flower.gif) no-repeat 10px center;
}
.menu li.contacts {
	background:url(breadcrumbs/mail.gif) no-repeat 10px center;
}
.menu li.privacy {
	background:url(breadcrumbs/lock.gif) no-repeat 10px center;
}
.menu :hover ul {
	width:120px;
	height:auto;
	left:165px;
	top:7px;
	background:#fcfcfc;
	border:1px solid #ddd;
}
.menu :hover ul :hover ul, .menu :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul, .menu :hover ul :hover ul :hover ul :hover ul :hover ul {
	width:120px;
	height:auto;
	left:115px;
	top:-1px;
	background:#fcfcfc;
	border:1px solid #ddd;
	border-width:1px 0 1px 1px;
}
.menu :hover ul ul, .menu :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul ul, .menu :hover ul :hover ul :hover ul :hover ul ul {
	left:-9999px;
	width:0;
	height:0;
}
.menu :hover ul li, .menu :hover ul li a {
	width:120px;
	height:25px;
	line-height:25px;
	text-indent:10px;
	float:none;
}
.menu :hover ul li.sub a, .menu :hover ul :hover ul li.sub a, .menu :hover ul :hover ul :hover ul li.sub a, .menu :hover ul :hover ul :hover ul :hover li.sub a, .menu :hover ul :hover ul :hover ul :hover ul :hover li.sub a {
	background:url(breadcrumbs/grey.gif) no-repeat 100px center;
	color:#777;
}
.menu :hover ul li.sub a:hover, .menu :hover ul :hover ul li.sub a:hover, .menu :hover ul :hover ul :hover ul li.sub a:hover, .menu :hover ul :hover ul :hover ul :hover ul li.sub a:hover {
	background:url(breadcrumbs/blue.gif) no-repeat 100px center;
	color:#06f;
}
.menu :hover ul li.sub:hover > a, .menu :hover ul :hover ul li.sub:hover > a, .menu :hover ul :hover ul :hover ul li.sub:hover > a, .menu :hover ul :hover ul :hover ul :hover ul li.sub:hover > a {
	background:url(breadcrumbs/blue.gif) no-repeat 100px center;
	color:#06f;
}
.menu :hover ul li a, .menu :hover ul :hover ul li a, .menu :hover ul :hover ul :hover ul li a, .menu :hover ul :hover ul :hover ul :hover ul li a, .menu :hover ul :hover ul :hover ul :hover :hover ul li a {
	background:#fcfcfc;
	color:#777;
}
.menu :hover ul li a:hover, .menu :hover ul :hover ul li a:hover, .menu :hover ul :hover ul :hover ul li a:hover, .menu :hover ul :hover ul :hover ul :hover ul li a:hover, .menu :hover ul :hover ul :hover ul :hover ul :hover ul li a:hover {
	background:#fcfcfc;
	color:#06f;
}
.menu li.sub a b, .menu :hover li.sub a b, .menu :hover ul :hover li.sub a b, .menu :hover ul :hover ul :hover li.sub a b, .menu :hover ul :hover ul :hover ul :hover li.sub a b, .menu :hover ul :hover ul :hover ul :hover ul :hover li.sub a b {
	display:block;
	color:#06f;
	font-weight:normal;
}
.menu li.sub a.selected b, .menu :hover ul li.sub a.selected b, .menu :hover ul :hover ul li.sub a.selected b, .menu :hover ul :hover ul :hover ul li.sub a.selected b, .menu :hover ul :hover ul :hover ul :hover ul li.sub a.selected b, .menu :hover ul :hover ul :hover ul :hover ul :hover ul li.sub a.selected b {
	display:block;
	background:#fcfcfc;
	color:#06f;
	font-weight:normal;
}

Im Wiki hab ich auch schon nachgelesen, komm aber nicht weiter (http://www.phpwcms-howto.de/wiki/doku.p ... av_vert_fo)

Vielen Dank

[nameless1]

servus,

wo exakt kommst du den im wiki nicht weiter?

gruß

nml1

[no remorse]

Hallo

es gibt mehrere Probleme.

Lassen wir mal das obgenannte vorläufig weg. Wenn ich genau nach Anleitung vorgehe und das im Wiki verwendete css benutze, dann funktioniert das Fly-out Menü. Allerdings wird Home (ID O) mir nicht angezeigt. Alles geht wunderbar ab ID=1.

Was muss ich machen, dass mir alles angezeigt wird:

- root (index.php ID=0)
--- Home
--- Ebene01
--- Ebene02
--- Ebene03
--- Ebene04
--- Ebene05
--- Ebene06

Tag ist: <div class="menu">{NAV_VERT_FO:0,4}</div>

http://www.phpwcms-howto.de/wiki/doku.p ... av_vert_fo

[Uwe367]

Ich habe dieses Menü auch teilweise im Einsatz und habe eine zweite Ebene mit dem Titel "Home" erstellt. Diese lasse ich auf die richtige "Home" (ID 0) weiterleiten. Soweit ich ich weiß ist das anders nicht möglich.

[no remorse]

Ok vielen Dank für den Tipp. Probiere es gerade mal aus...

[nameless1]

bzgl. dem beitrag von uwe367:
so wird es ja auch im entsprechenden teil der howto von knut beschrieben.

gruß

nml1

[flip-flop]

Ich habe vorhin eine horizontale Variante freigegeben, die auch "HOME" einbezieht.

Eigentlich sind die vertikal- und horizontal Variante vom generierten Code fast identisch ...... Die CSS-Datei machts.

Knut

[no remorse]

Hallo

und was muss ich im CSS (das aus dem WIKI) ändern, damit HOME einbezogen wird?
Im Wiki steht unter NAV_HORIZ_DD:ID,Ebenentiefe folgendes:

V1.01:

Weiterleitung von root nach home nicht notwendig, im Script kann der Link ein/ausgeschaltet werden (in ==== Custom var ====)
Generierter code:

Code: Select all

<li id="cat-id_0" class="drop home"><a class="first" href=".... 

Was ist da genau gemeint? Ich als Laie kann es nicht wirklich nachvollziehen...


danke

[flip-flop]

Hi,
das meinte ich zwar nicht (gehe mal eine Ebene tiefer ....), ist aber auch gut.

Im Script findest du diese Stelle an der du eingreifen kannst. (Mit einem einfachen AscII-Editor).

Code: Select all

// ============ Custom var ===========
 
   $home_link = false;   // [true|false] = [enabled|disabled]
 
// ============ END Custom var =======

Knut

[no remorse]

Sauber. Hab Dank! Funktioniert

PS: eventuell für die Nachwelt im Wiki unter NAV_VERT_FO:ID,Ebenentiefe auch ergänzen/erneuern

[no remorse]

servus,

wo exakt kommst du den im wiki nicht weiter?

gruß

nml1

Hallo

probiere zZ folgendes Menü: http://www.cssplay.co.uk/menus/breadcrumb.html

aber irgend was geht nicht (wird wohl nicht mit dem rt_nav_vert_fly_out.php Skript zusammenhängen).

Bin eben nicht der php-Profi. Ist es aber theoretisch möglich, so ein Menü nur mit Grundkenntnissen zum laufen zu bringen?

[flip-flop]

Das sollte klappen. Schau in das PHP-Script:

Code: Select all

//    IDs fuer jedes li ======= Wenn sie die ID Klassen benötigen, bitte dekommentieren/kommentieren
//      $l  = str_repeat('   ', $counter+1) . '<li'. $class . ' id="cat-id_' . $value['acat_id'] . '">';
      $l  = str_repeat('   ', $counter+1) . '<li'. $class . '>';

Um die Bilder in der CSS zuordnen zu können brauchst du eine Identifikation jedes Links.
Stu verwendet dazu Klassen, du verwendest dann eben IDs.

Knut

[no remorse]

Hallo

Habe im Script folgendes auskommentiert:

Code: Select all

 $l  = str_repeat('   ', $counter+1) . '<li'. $class . ' id="cat-id_' . $value['acat_id'] . '">';

Im CSS
alt:

Code: Select all

.menu li.products {background:url(breadcrumbs/graph.gif) no-repeat 10px center;}

Und jetzt muss da die ID der Kategorie rein zB ID:1. Doch da scheitere ich schon wieder

neu:

Code: Select all

.menu li.????? {background:url(breadcrumbs/graph.gif) no-repeat 10px center;}

[flip-flop]

Hi,

Code: Select all

//    IDs fuer jedes li ======= Wenn sie die ID Klassen benötigen, bitte dekommentieren/kommentieren
      $l  = str_repeat('   ', $counter+1) . '<li'. $class . ' id="cat-id_' . $value['acat_id'] . '">';
//      $l  = str_repeat('   ', $counter+1) . '<li'. $class . '>';

Du solltest dich auf jeden Fall mit CSS auseinandersetzen.
http://www.drweb.de/magazin/css-id-oder-klasse/
http://css-tutorial.1keydata.com/de/class-id.php

Knut