V1.27-1.29 -> NAV_LIST_UL [Update4]

[flip-flop]

Ja habe ich jetzt verstanden, geht aber in der jetzige Version des Menüs nicht, da eben diese Parameter fehlen. Außer man veranstaltet CSS-Orgien, da ist es sicher einfacher die php-Source zu patchen.

Die Menüvariante ohne IDs ist doch abgebildet, also mit copy&paste saugen.

Gruß Knut

[nora0355]

Hallo Knut,

......da ist es sicher einfacher die php-Source zu patchen.

Da wäre dann Olivers Part, sofern er es für sinvoll hält?

Die Menüvariante ohne IDs ist doch abgebildet, also mit copy&paste saugen.

Ich dachte das wäre eine alte Variante gewesen. Da es funktioniert werde ich das erstmal so belassen - oder die Bereiche, die ich für mein Menü nicht benötige, löschen.

So, das Hochladen hat doch noch funktioniert. Die roten Pfeile wären die Menüs, wo keine Untermenüs mehr folgen und somit die anderen Icons erscheinen sollten. Da ich mein Menü auf 4 Ebenen begrenzt habe, konnte ich un der letzten Ebene schon umsetzen wie ich es gerne hätte.



Danke und Gruß Rainer

[Paradroid]

Hi,

habe eine Seite aus einem anderen CMS übernommen und die Navi mit NAV_LIST_UL umgesetzt. Allerdings habe ich das Problem, dass beim IE6 der Level 1 "verschwindet" und nur der Level 2 angezeigt wird.

Replacement Tag:

{NAV_LIST_UL:F,1,,,active}

Ergibt :

Code: Select all

<ul>
	<li class="sub_no"><a href="de_startseite.phtml">Startseite</a></li>
	<li class="sub_no"><a href="de_lebenslauf.phtml">Kynologischer Lebenslauf</a></li>
	<li class="sub_no"><a href="de_news.phtml">News</a></li>
	<li class="sub_ul active"><a href="de_hunde.phtml">Hunde</a>
	<ul>
		<li class="sub_no"><a href="de_kid.phtml">ForRest Cottage Cincinnati Kid <br /> <i>Rufname: Kid</i></a></li>

		<li class="sub_no"><a href="de_connor.phtml">Bäveråsens Zeb<br /><i>Rufname: Connor</i></a></li>
		<li class="sub_ul active"><a href="de_kansas.phtml">Kansas my Melodie of golden Spirit<br /><i>Rufname: Kansas</i></a>
		<ul>
			<li class="sub_no"><a href="de_pedigree_kansas.phtml">Stammbaum</a></li>
			<li class="sub_no"><a href="de_ergebnisse_kansas.phtml">Arbeitsergebnisse</a></li>
			<li class="sub_no"><a href="de_galerie_kansas.phtml">Galerie</a></li>

		</ul>
		</li>
	</ul>
	</li>
	<li class="sub_no"><a href="de_seminare.phtml">Seminare</a></li>
	<li class="sub_no"><a href="de_guestbook.phtml">Gästebuch</a></li>
	<li class="sub_no"><a href="de_kontakt.phtml">Kontakt</a></li>

	<li class="sub_no"><a href="de_links.phtml">Links</a></li>
	<li class="sub_no"><a href="de_impressum.phtml">Impressum</a></li>
</ul>

Die eingesetzte CSS :

Code: Select all

/*========================================================================
   CSS for an vertical menu
   Template call: <div class="nlu_navi1">{NAV_LIST_UL:F,0,,,active}</div>
   Level 0 - 2;
   07.10.06 flip-flop (KH)

 
========================================================================*/
   
.nlu_navi1 {
   margin: 0;
   padding: 0 0 0 0;
   border: 0;
   text-decoration: none;
   /* ++ e.g. 11px font and 19px height // z.B. 11px font und 19px hoch */
   font: normal normal 11px/19px "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
   width: 240px;  /* ++ Width of Menu Items // Breite der Navigation*/
/*   float:left; */
}

.nlu_navi1 em { font-style: normal; }

.nlu_navi1 ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;
   width: 240px;  /* ++ Width of Menu Items // Breite der Navigation */
}

.nlu_navi1 ul li { position: relative; }


/*--- Styles for Menu Items ------------------------------------*/

/*--- LEVEL X --------------------------------------------------*/

/*----  simple link <a> // einfacher Link <a> */
.nlu_navi1 ul li a,
.nlu_navi1 ul li a:link,
.nlu_navi1 ul li a:visited,
.nlu_navi1 ul li a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   color: #50591A;           /* ++ Text color // Textfarbe */

   /* ++ background color; url of the image; image adjust e.g. left gap 10px */
   /* ++ Hintergrundfarbe; URL der Grafik  ; Grafik einrücken z.B. 10px */
   background: #BFB193 url(../../img/article/navi1_norm.gif) 10px 1px no-repeat;

   /* ++ Text adjust e.g. upper gap and left gap 25px */
   /* ++ Text justieren 1px oben und 25px von links */
   padding: 1px 0 0 25px;
  
   /* ++ Den "white-space" Fehler im IE7 vermeiden */
   /* ++ Killing the "white-space" bug in IE7 */
   \width: 240px;  /* IE5x Opera <= 5 */
   widt\h: 215px;  /* = (Width of Menu Items) - (padding-right + left) */


   /* ++ bottom line if you want */
   /* ++ Untere Linie wenn gewünscht */
   /*border-bottom: 1px solid #ccc;  ++ horiz. line between */
}

/*----  active link <a> // aktiver Link <a> */
.nlu_navi1 ul li.active a,
.nlu_navi1 ul li.active a:link,
.nlu_navi1 ul li.active a:visited,
.nlu_navi1 ul li.active a:active {
   color: #50591A;           /* ++ Text color // Textfarbe */
   font-weight: bold;       /* ++ Bold if you want // Fett wenn gewünscht */

   /* background for the active state // Hintergrund für den aktiven Status */
   background: #BFB193 url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}

/*----  hover link <a> // Maus über Link <a> */
.nlu_navi1 ul li a:hover,
.nlu_navi1 ul li.active a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #BFB193 url(../../img/article/navi1_hov.gif) 10px 1px no-repeat;
}


/*--- LEVEL X+1 ------------------------------------------------*/

.nlu_navi1 ul ul li.sub_no a,
.nlu_navi1 ul ul li.sub_no a:link,
.nlu_navi1 ul ul li.sub_no a:visited,
.nlu_navi1 ul ul li.sub_no a:active,
.nlu_navi1 ul ul li.sub_ul a,
.nlu_navi1 ul ul li.sub_ul a:link,
.nlu_navi1 ul ul li.sub_ul a:visited,
.nlu_navi1 ul ul li.sub_ul a:active {
   display: block;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #50591A;
   background: #BFB193 url(../../img/article/navi1_norm.gif) 25px 1px no-repeat;
   padding: 1px 0 0 40px;
   \width: 240px;  /* IE5x Opera <= 5 */
   widt\h: 200px;  /* = (Width of Menu Items) - (padding-right + left) */
   border: 0;
   border-bottom: 1px solid #ccc; /* IE6 Bug */
}

.nlu_navi1 ul ul li.active a,
.nlu_navi1 ul ul li.active a:link,
.nlu_navi1 ul ul li.active a:visited,
.nlu_navi1 ul ul li.active a:active {
   color: #50591A;
   font-weight: bold;
   background: #BFB193 url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
}

.nlu_navi1 ul ul li a:hover,
.nlu_navi1 ul ul li.sub_no a:hover,
.nlu_navi1 ul ul li.sub_ul a:hover,
.nlu_navi1 ul ul li.active a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #BFB193 url(../../img/article/navi1_hov.gif) 25px 1px no-repeat;
}
   
/*--- LEVEL X+2 ------------------------------------------------*/

.nlu_navi1 ul ul ul li.sub_no a,
.nlu_navi1 ul ul ul li.sub_no a:link,
.nlu_navi1 ul ul ul li.sub_no a:visited,
.nlu_navi1 ul ul ul li.sub_no a:active,
.nlu_navi1 ul ul ul li.sub_ul a,
.nlu_navi1 ul ul ul li.sub_ul a:link,
.nlu_navi1 ul ul ul li.sub_ul a:visited,
.nlu_navi1 ul ul ul li.sub_ul a:active  {
   display: block;
   text-decoration: none;
   text-transform: none;
   font-weight: normal;
   color: #50591A;
   background: #BFB193 url(../../img/article/navi1_norm.gif) 40px 1px no-repeat;
   padding: 1px 0 0 55px;
   \width: 240px;  /* IE5x Opera <= 5 */
   widt\h: 185px;  /* = (Width of Menu Items) - (padding-right + left) */
   border: 0;
   border-bottom: 1px solid #ccc; /* IE6 Bug */
}

.nlu_navi1 ul ul ul li.active a,
.nlu_navi1 ul ul ul li.active a:link,
.nlu_navi1 ul ul ul li.active a:visited,
.nlu_navi1 ul ul ul li.active a:active {
   color: #50591A;
   font-weight: bold;
   background: #BFB193 url(../../img/article/navi1_act.gif) 40px 1px no-repeat;
}

.nlu_navi1 ul ul ul li a:hover,
.nlu_navi1 ul ul ul li.sub_no a:hover,
.nlu_navi1 ul ul ul li.sub_ul a:hover,
.nlu_navi1 ul ul ul li.active a:hover {
   color: White;
/*   text-decoration: underline; */
   background: #BFB193 url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
}

* Holly Hack. IE Requirement \*/
* html .nlu_navi1 ul li { float: left; height: 1%; }
* html .nlu_navi1 ul li a { height: 1%; }
/* End */

/* ==== End  nlu_navi1 === */

Ergebnis im IE 6 :



So sollte es Aussehen (hier IE 7):



Ich hab im Moment ein Brett vor dem Kopf. Die Seite läuft noch auf 1.2.8, soll aber auf 1.3.3 upgedatet werden. Ich würde aber den Fehler gerne vorher einkreisen.

Thx und Grüße

Achim

[flip-flop]

Hallo Achim,

sieht auf die Schnelle alles ganz i.o. aus.
Hast du einen Link (PN)?

Knut

[Oliver Georgi]

die ...a, die Du mittels display: block nutzt - immer parallel mit float: left setzen.

Die ganzen Browser-Hacks sind weitestgehend überflüssig.

Oliver