phpwcms Support Forum

The phpwcms support forum will help to find answers to your questions. The small but strong community is here since more than 10 years.
https://forum.phpwcms.org/

V1.27-1.29 -> NAV_LIST_UL [Update4]

https://forum.phpwcms.org/viewtopic.php?t=12716

Page 1 of 4

V1.27-1.29 -> NAV_LIST_UL [Update4]

Posted: Mon 9. Oct 2006, 13:37
by flip-flop
V1.2.7 - 1.2.9
Since V1.3x we have some new internally settings. http://www.phpwcms.de/forum/viewtopic.php?p=83839#83839

Hi folks,

here I show you a little css snippet for substitution the old nav_table_column with the new NAV_LIST_UL.

(The basic stuff of this tag: Have a look: http://www.phpwcms.de/forum/viewtopic.php?t=12165)

It isn´t the smalles variation, but I think a simple one.

If you want, please create your own images for
Image normal state: /image/article/navi1_norm_.gif
Image active state: /image/article/navi1_act_.gif
Image hover state: /image/article/navi1_hov_.gif
(At my example I uses leading arrow images 15x15px navi1_gif_129.zip).
(Please delete the ending underscore e.g. navi1_norm(_).gif )

At the conf.inc.php you can switch off the IE_htc_hover. We don´t need it for this menu.

Code: Select all

$phpwcms['IE_htc_hover']      = 0; // enables HTC Hover for IE < 7 - has no effect in other browsers
[EDIT 19.10.06]
An horizontal menu only for one level:
-------------------------------------------------
<div class="nlu_horiz1">{NAV_LIST_UL:F,ID,1,,active}</div>

Image
Please see the CSS snippet at the end.
[END EDIT 19.10.06]

The vertical navigation
-------------------------------------------------
The left one: <div class="nlu_navi1">{NAV_LIST_UL:F,ID,,,active}</div>
The middle: <div class="nlu_navi1">{NAV_LIST_UL:,ID,,,active}</div>
[EDIT 05.01.07]
And the right: <div class="nlu_navi1id">{NAV_LIST_UL:F,ID,,,active,id}</div> (id based) -> Please see more at the end.
[END EDIT 05.01.07]

Image

Output for the left side "F" variation:

Code: Select all

<div class="nlu_navi1">

<ul>
	<li class="sub_no"><a href="index.php?home01">Home01</a></li>
	<li class="sub_no"><a href="index.php?home02">Home02</a></li>
	<li class="sub_no"><a href="index.php?home05">Home05</a></li>
	<li class="sub_no"><a href="index.php?home06">Home06</a></li>
	<li class="sub_ul active"><a href="index.php?home07">Home07</a>
	<ul>

		<li class="sub_ul active"><a href="index.php?home07_01">Home07_01</a>
		<ul>
			<li class="sub_no"><a href="index.php?home07_01_01">Home07_01_01</a></li>
			<li class="sub_no active"><a href="index.php?home07_01_02">Home07_01_02</a></li>
		</ul>
		</li>
		<li class="sub_no"><a href="index.php?home07_02">Home07_02</a></li>

	</ul>
	</li>
	<li class="sub_no"><a href="index.php?home07_2">Home07_2</a></li>
</ul>
</div>

CSS snippet vertical menu: Please create a file e.g. named /phpwcms_template/inc_css/nlu_navi1.css
In your template please include at css file: the file nlu_navi1.css (Multiple selection = <strg>-"left mouse button")
Image

Code: Select all

/* ======================================================================
   CSS for an vertical menu
   Template call: <div class="nlu_navi1">{NAV_LIST_UL:F,0,,,active}</div>
   Level 0 - 4;
   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 Verdana, Geneva, Arial, Helvetica, sans-serif;
   width: 212px;  /* ++ 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: 212px;  /* ++ 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: White;           /* ++ 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: #993400 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: 212px;  /* IE5x Opera <= 5 */
   widt\h: 187px;  /* = (Width of Menu Items) - (padding-right + left) */

   /* ++ bottom line if you want */
   /* ++ Untere Linie wenn gewünscht */ 
   border: 0; 
   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: White;           /* ++ 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: #993400 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: #773400 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: #FFFFFF;
   background: #bb3400 url(../../img/article/navi1_norm.gif) 25px 1px no-repeat;
   padding: 1px 0 0 40px;
   \width: 212px;  /* IE5x Opera <= 5 */
   widt\h: 172px;  /* = (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: White;
   font-weight: bold;
   background: #bb3400 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: #993400 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: #FFFFFF;
   background: #dd3400 url(../../img/article/navi1_norm.gif) 40px 1px no-repeat;
   padding: 1px 0 0 55px;
   \width: 212px;  /* IE5x Opera <= 5 */
   widt\h: 157px;  /* = (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: White;
   font-weight: bold;
   background: #dd3400 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: #993400 url(../../img/article/navi1_hov.gif) 40px 1px no-repeat;
}
/*==== END LEVEL X ============================================= */

/* 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_========================================= */
And so on.

[EDIT 03.11.06]
For IE57 we need this at the "header:" section in your template:
[EDIT 31.01.07]
We don´t need this since update4 using \width: ....px; and widt\h: ...px;

Code: Select all

<!--[if IE]><style>
.nlu_navi1 ul li { float: left; height: 1%; }
.nlu_navi1 ul li a { height: 1%; }
</style><![endif]-->
[End EDIT 31.01.07]
but using Mac it doesn´t work. At this time the best solution are no patch at the header section.!!!! Kh 06/11/14
[End EDIT 03.11.06]


===============================================================================

[EDIT 19.10.06]
Horizontal menu:
--------------------------

Horizontal menu only for one level: <div class="nlu_horiz1">{NAV_LIST_UL:F,ID,1,,active}</div>

Image

CSS snippet for horizontal menu: Please create a file e.g. named /phpwcms_template/inc_css/nlu_horiz1.css
In your template please include at css file: the file nlu_horiz1.css (Multiple setection = <strg>-"left mouse button")
Image

Code: Select all

/* ==============================================================
   CSS for an horizontal menu one level 
   <div class="nlu_horiz1">{NAV_LIST_UL:F,0,1,,active}</div>
   Level 0 ; 
   19.10.06 flip-flop (KH)
================================================================= */
   
.nlu_horiz1 {
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
   text-decoration: none;
   /* e.g. 11px font and 20px height */
   font: normal normal 11px/20px Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.nlu_horiz1 em { font-style: normal; }

.nlu_horiz1 ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style: none;
} 

.nlu_horiz1 ul li { 
   display: block;
   float:left;
}


/* ==== Styles for Menu Items ================================== */

/* ==== LEVEL X ================================================ */

.nlu_horiz1 ul li a,
.nlu_horiz1 ul li a:link, 
.nlu_horiz1 ul li a:visited,
.nlu_horiz1 ul li a:active {
   display: block;
   width: 108px; /* ++ width entry = width + boarder left/right  == IE only == */
   w\idth: 92px; /* ++ width entry = width - padding left/right */
   text-decoration: none;
   text-transform: none;
   color: #fff;
   padding: 0px 0 0 15px;         /* ++ Text adjust */ 
   border-left: 1px solid #eee;
   background: #993400 url(../../img/article/navi1_norm.gif) 5px 1px no-repeat;
}

.nlu_horiz1 ul li.active a,
.nlu_horiz1 ul li.active a:link,
.nlu_horiz1 ul li.active a:visited,
.nlu_horiz1 ul li.active a:active {
   color: White;
   font-weight: bold;
   background: #bb3400 url(../../img/article/navi1_act.gif) 5px 1px no-repeat;
}

.nlu_horiz1 ul li a:hover, .nlu_horiz1 ul li.sub_no a:hover {
   color: White;
   background: #773400 url(../../img/article/navi1_hov.gif) 5px 1px no-repeat;
}

.nlu_horiz1 ul li.active a:hover {
   color: White;
   background: #993400 url(../../img/article/navi1_hov.gif) 5px 1px no-repeat;
}
/* ===== END horiz Level X_===================================== */
[END EDIT 19.10.06]

===============================================================================

[EDIT 05.01.07]
Vertical colored menu, id based:
------------------------------------------
<div class="nlu_navi1id">{NAV_LIST_UL:F,ID,,,active,id}</div>

Image

Output for the "F" - "id" variation

Code: Select all

<div class="nlu_navi1id">
  <ul id="id_0">
    <li id="li_id_2" class="sub_no"><a href="index.php?home01">Home01</a></li>
    <li id="li_id_3" class="sub_no"><a href="index.php?home02">Home02</a></li>
    <li id="li_id_7" class="sub_no"><a href="index.php?home05">Home05</a></li>
    <li id="li_id_8" class="sub_no"><a href="index.php?home06">Home06</a></li>
    <li id="li_id_11" class="sub_ul active"><a href="index.php?home07">Home07</a>
      <ul id="id_11">
        <li id="li_id_12" class="sub_ul active"><a href="index.php?home07_01">Home07_01</a>
          <ul id="id_12">
            <li id="li_id_23" class="sub_no"><a href="index.php?home07_01_01">Home07_01_01</a></li>
            <li id="li_id_24" class="sub_no active"><a href="index.php?home07_01_02">Home07_01_02</a></li>
          </ul></li>
        <li id="li_id_13" class="sub_no"><a href="index.php?home07_02">Home07_02</a></li>
      </ul></li>
    <li id="li_id_14" class="sub_no"><a href="index.php?home07_2">Home07_2</a></li>
  </ul>
</div>
(The css snippet for this output: nlu_navi1_id_css.zip).

If you haven´t any id output, please yuse this patch: http://www.phpwcms.de/forum/viewtopic.php?p=72953#72953

[END EDIT 05.01.07]

[EDIT 06.02.07] -> NAV_LIST_UL (.active) and a new switch
Please have a look: http://www.phpwcms.de/forum/viewtopic.php?p=80423#80423
[/EDIT 06.02.07]

Have fun.

Knut :D

Posted: Tue 10. Oct 2006, 06:35
by Oliver Georgi
Congratulations! :)

If you allow I will implement this by default as new mode:

{NAV_LIST_UL: FLIP-FLOP_F }
{NAV_LIST_UL: FLIP-FLOP_ALL }

Oliver

Posted: Tue 10. Oct 2006, 13:40
by pepe
hey guys... seems to be the begin of something like TEAMWORK ? :lol: HALLELLUJA! :wink:

Posted: Thu 19. Oct 2006, 20:21
by flip-flop
Oliver Georgi wrote:Congratulations! :)

If you allow I will implement this by default as new mode:

{NAV_LIST_UL: FLIP-FLOP_F }
{NAV_LIST_UL: FLIP-FLOP_ALL }

Oliver
Thanks Oliver, but it isn´t necessary to call it flip-flop.
My idea: :idea:
{NAV_LIST_UL: SIMPLE-V_F }
{NAV_LIST_UL: SIMPLE-V_ALL }

And the horizontal: {NAV_LIST_UL: SIMPLE-H_F }

reagards Knut

Posted: Thu 19. Oct 2006, 22:55
by Jensensen
flip-flop wrote:
Oliver Georgi wrote:Congratulations! :)

If you allow I will implement this by default as new mode:

{NAV_LIST_UL: FLIP-FLOP_F }
{NAV_LIST_UL: FLIP-FLOP_ALL }

Oliver
Thanks Oliver, but it isn´t necessary to call it flip-flop.
My idea: :idea:
{NAV_LIST_UL: SIMPLE-V_F }
{NAV_LIST_UL: SIMPLE-V_ALL }

And the horizontal: {NAV_LIST_UL: SIMPLE-H_F }

reagards Knut
@ Oliver

To my mind it would be the only appropriate solution!!!!
Greetz
Jensensen

Posted: Fri 20. Oct 2006, 23:41
by gab
@ Knut: Das ist super. Viiielen Dank für die Vorlage :D

Gibts eine Möglichkeit die Vorlage so anzupassen, dass ausschliesslich die gerade aktive Seite (z.B. "Home07_01_02") "font-weight: bold;" hat (und die übergeordneten "Home07_01" und "Home07" nicht auch noch)?

Danke!
Gruss gab

Posted: Sat 21. Oct 2006, 16:12
by flip-flop
Aus meiner Sicht geht das mit der NAV_LIST_UL im Augenblick noch nicht. Hier fehlt eine Angabe zum aktuell aktiven Link.
Die Variante class_activ dient zur Verfolgung des aktiven Links durch die Baumstruktur. Das macht auch Sinn bei der TAG-Variante ohne :F, also wenn alles aufklappt.
So allerdings nicht, da sub_ul dazu ausreicht. Hier fehlt einfach noch eine separate Bezeichnung für den aktiven Link.

Eine Krückenlösung:
---------------------------------------

Code: Select all

/* state for the active point */
.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: White;
   font-weight: bold;
   background: #993400 url(../../.............) 10px 1px no-repeat;
}

/* state for the active point if there is a sub_level */
.nlu_navi1 ul li.sub_ul a,
.nlu_navi1 ul li.sub_ul a:link,
.nlu_navi1 ul li.sub_ul a:visited,
.nlu_navi1 ul li.sub_ul a:active {
   color: White;
   font-weight: normal;
   background: #993400 url(../../...........) 10px 1px no-repeat;
}
So wird nur der letzte aktive Link gekennzeichnet. Der Zweite Teil muss natürlich in jeder Ebene ergänzt werden.
Wobei die Linkverfolgung schon eine feine Sache ist, bold brauchst du ja nicht zu nutzen.

Alternativ könntest du diese NAVI benutzen, und deinen Wunsch umsetzen:

Code: Select all

www .mz.ja-nek .de/test2_3_1.phtml
Gruß Knut

Posted: Sun 22. Oct 2006, 10:17
by gab
Tausend Dank Knut für Deine tolle Unterstüzung! Hab ich ausprobiert. Und wenn ich das richtig gesehen und verstanden habe, ist es so, dass mit Deiner "Krückenlösung" nur aktive Punkte OHNE Sublevels "font-weight: bold; " erhalten... :( da werd ich wohl wieder nav_list_all_div einsetzen.

Danke nochmal!!
Gruss, gab

Posted: Mon 23. Oct 2006, 17:33
by macangelo
Hi flip-flop

ich habe mich mal reingelesen - ist viel einfacher als ich dachte und funktioniert! Danke für Deine Arbeit und Deine Contribution!

Ich würde gerne bei der obersten Ebene meine {GT}-Tags verwenden. Ist das möglich? Hast Du eine Idee?

Besten Dank

Posted: Mon 23. Oct 2006, 17:36
by macangelo
macangelo wrote:Hi flip-flop

ich habe mich mal reingelesen - ist viel einfacher als ich dachte und funktioniert! Danke für Deine Arbeit und Deine Contribution!

Ich würde gerne bei der obersten Ebene meine {GT}-Tags verwenden. Ist das möglich? Hast Du eine Idee? Ist es das "wrap_ul_div"-Ding?

Besten Dank

Posted: Mon 23. Oct 2006, 17:47
by flip-flop
macangelo wrote:Hi flip-flop

ich habe mich mal reingelesen - ist viel einfacher als ich dachte und funktioniert! Danke für Deine Arbeit und Deine Contribution!
:D :D
Ich würde gerne bei der obersten Ebene meine {GT}-Tags verwenden. Ist das möglich? Hast Du eine Idee?
Habe ich mich noch nicht mit beschäftigt. Ich bin ja froh keine Text-Grafiken mehr verwenden zu müssen.
Ich meine, dass jemand so etwas schon einmal gemacht hat. Hack-forum?

Gruß Knut

Posted: Mon 23. Oct 2006, 18:01
by juergen
a very dirty ;) way doing this:

{GT:style}Menu {/GT}

as title for category ... Very dirty

:oops:

Posted: Tue 14. Nov 2006, 20:20
by pepe
Hi flip-flop,

wie so manch anderer forum user, so habe auch ich mir natürlich deinen Vorschlag dieses Threads heruntergeladen und in einer eigenen Testanwendung integriert.
Das klappt - wie nicht anders erwartet - einwandfrei und wird sicherlich für mich die CSS-Basis für weitere Navigationen auf meinen Sites werden. Schön flexibel, alles in der css zu managen... fein!

Was mich aber ärgert, weil ich's einfach nicht hinbekomme, ist das folgende Problem:

Nur wenn ich (beim IE 6.0) mit dem Mouszeiger unmittelbar über dem Text bin, erhalte ich die Mouseover-Auszeichnung des Hintergrunds...
EDIT: Das gilt nur für die horizontale Variante! Vertikal ist alles OK!!!

Im FF ist das, wie es sein soll... kaum ist man irgendwo über dem Block, erscheint die komplette Mousoverfunktion!
Hast du eine Idee, wie wir (DU) das auch noch hinbekommen könnten??? Das wäre dann 1+*!

Ansonsten makellos und perfekt dokumentiert... so sollte es sein! DANKE für den guten Job!

Posted: Sun 3. Dec 2006, 11:20
by Reineke
Hallo Jungs,

vielen Dank für diese wirklich hervorragende Navi. Allerdings als nicht CSS´ler wäre es noch nett zu lesen wo denn dieser ganze Code reinkopiert werden muss.

Ich wäre für eine verständliche Anleitung wirklich sehr dankbar - und nicht nur ich, schätze ich mal :)

Posted: Sun 3. Dec 2006, 12:13
by flip-flop
Hi Reineke, Beschreibung ist erweitert.
So können verschiedene CSS-Dateien "hinzugelinkt werden" (Das ist besser als alles in eine Datei zu schreiben). - Gruß Knut :D
All times are UTC+02:00
Page 1 of 4

Powered by phpBB® Forum Software © phpBB Limited