NAV_LIST_UL >= V1.30

[Heiko H.]

@birolkab

Hallo

Code: Select all

.nlu_navi1 ul {
               padding: 0px;
}

sollte es tun, oder hab ich dich falsch verstanden?


Grüße Heiko...

EDIT:

@ flip-flop SORRY

@birolkab

change

Code: Select all

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

in

Code: Select all

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

[flip-flop]

Please dont change the language

[larissa]

Hi all,
this my first post here,
so first of all 1000 thanks for this great application.
I have read a lot about NAV_LIST_UL for the different PHPWCMS version and I am quite confused
I have installed 1.33 the latest one and since
I quite virgin regarding php stuff and css stuff,
I wonder whether is possible to have the vertical version of NAV_LIST_UL >= V1.30
with different colors among top levels categories and also for at least for all the sub categories of one top level cat.
I would prefer to have the possibility to customize background color and and text color as well.

However if I am asking too much just different text color for all sub cats of one top cat would be great for a start .
This is the scenario I would love to get :
I have several top cats but only one top cat tha has many subcats at the same level . So I need 1 Menu in horizonatl and the other vertical but ithe vertical should appear only when i click in the top cat of the horizantal menu that has subcats

I need to customize the sub cats of produtcs lines so that different product lines/categories has different text color.
Also would be great if this vertical menu appear only when I click on product lines in the horizontal menu and disappear when I click in the horizantal menu cat that has no sub cats

Or better I think that different text color on white bacground would great and more graphically clean becasue too many background colors stripes is too much for my eyes
I hope I have explained well what I need I spent somuch time already a week trying suggestion of the forum but no success

Many thanks in advance for any help
Larissa

[björnb]

So hello together,

I`ve one Problem with the NAV_LIST_UL:

I`d like to combine vertical and horizontal navigation.
But like this

horizontal: Ebene 1 Ebene 2


vertical:


Ebene 1_1

Ebene 1_2

Ebene 1_3



horizontal: Kontakt Impressum




vertical:


kontaktformular

Adresse

Map


So that the first Level is just seeing horizontal and that what it's in it just vertical.

with NAV_LIST_UL: I can put my ID in there but this just work for one site

Will I have to write for every Level 1, Level 2 .... Level X Site a new NAV_LIST_UL: ?

[flip-flop]

Hi Björn,

at the end of this post: http://www.phpwcms.de/forum/viewtopic.php?p=83839#83839 you will find:

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

Combination of horiz. & vert. navigation
---------------------------------------------

You see the vertical sub output for the active path [Ebene02]

Level lift for the vertical navigation, beginning at the first level behind [Ebene02]:

Code: Select all

[PHP]
if(isset($GLOBALS['LEVEL_ID'][1])) {
$level_id = $GLOBALS['LEVEL_ID'][1];
echo '<div class="nlu_navi1">'.LF;
echo '{NAV_LIST_UL:F,'.$level_id.',,act_path,active}';
echo '</div>';
}
[/PHP]

]
Where LEVEL_ID'][X] is the level.

Please have a look for deeper informations about "level and IDs".

- Multilingual/domain switch [en]: http://www.phpwcms.de/forum/viewtopic.php?p=83791#83791
- Basics Level and IDs [de]: http://www.phpwcms.de/forum/viewtopic.php?p=71772#71772

Knut

[björnb]

Oh my god...yes... I read it...but

THANX a lot Knut

[tim]

vielleicht eine doofe frage, aber für die kombination horizontal/vertikal...
wo muß dieser code hin?

Code: Select all

if(isset($GLOBALS['LEVEL_ID'][1])) {
$level_id = $GLOBALS['LEVEL_ID'][1];
echo '<div class="nlu_navi1">'.LF;
echo '{NAV_LIST_UL:F,'.$level_id.',,act_path,active}';
echo '</div>';
} 

[juergen]

@tim

This is the vertical part of navi, code has to be in template

[flip-flop]

Yes, at the place for your vertical navigation.

Have you read this additionaly? http://www.phpwcms.de/forum/viewtopic.php?p=71772#71772

It is very important to understand the meaning of level and IDs.
It is a never ending story in this system.

Knut

[zuker]

Hi everyone. I am looking for explanation how to make horizontal navigation with a dynamic bg image. As I know it was made by flip-flop approximately 03.02.07. Can anyone give me a link to this article or something..? Thanks.

[flip-flop]

Hi zuker,

mhh, I don´t understand you right. What is the meaning of dynamic bg image?

Knut

[zuker]

Hello Knut,

I want to place bg image before, after and behind the menu item



The existing example of menu you can find here:

http://ikom-bonn.de/index.php?index

and here is the fragment of css file of this menu. That is why I decided to call it “navigation with a dynamic bg image”.

http://ikom-bonn.de/template/inc_css/nlu_navi01.css

/* ================================================================
CSS for an horizontal menu one level

<div class="nlu_horiz01">{ NAV_LIST_UL:F,0,1,,active }</div>

Level 0 ;

19.10.06 flip-flop (KH)

03.02.07 flip-flop (KH) -> horizontal navigation with a dynamic bg image
===================================================================== */
/* === Horizontal menu ================== */

.nlu_horiz01 ul {

margin: 0 ;

padding: 0;

list-style: none;

and so on…

Can you help me, because I can’t get the result that I whant.

[flip-flop]

Oh yes, this expression was created by myself.

The meaning of "dynamic bg image" better "dynamically width entry" is the width of each navigation entry.
Every entry becomes automatically the width of the text string + padding left/right. The bg images uses a sliding door technology.



My navi call using the <span> tag:

Code: Select all

<div class="top3">
  <div style="padding-left: 213px;">
     <div class="nlu_horiz01">{NAV_LIST_UL:FP,0,1,act_path,active,,,<span>|</span>}</div>
  </div>
  <div class="nlu_horiz01_behind"><!-- spacer IE //--></div>
</div>

CSS:

Code: Select all

.top3 { /* third line for horizontal navi over all */
	height: 27px;  /* IE5.x */
	padding: 0;
	margin: 0;
	width: 740px;
	background: #FFE1A2 url(../../picture/navi/navi_bg.jpg) 139px 0px; background-repeat:repeat-x;
	voice-family: "\"}\"";  /* All other */
	voice-family:inherit;
	height: 25px;
}

/* ====== snip ========*/
/* === Horizontal menu  ================== */

.nlu_horiz01 ul {
	margin: 0 ;
	padding: 0;
	list-style: none;
	font-weight: bold; 
	text-decoration: none;
	font-size: 13px; 
	font-family: "Trebuchet MS", Verdana, Arial, Tahoma, Helvetica, sans-serif; 
	float: left;
}

.nlu_horiz01 li { display: inline; float: left; }

a.nlu_horiz01, a.nlu_horiz01:link, a.nlu_horiz01:visited, a.nlu_horiz01:active, a.nlu_horiz01:focus {
	color: #0000FF; 
	text-decoration: underline;
}

.nlu_horiz01 a {
	float: left;
	background: url(../../picture/navi/navi_li.jpg) no-repeat left top ;
	margin:0;
	padding:0 0 0 5px;
	text-decoration:none;
	cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */
}

.nlu_horiz01 a span {
	background: transparent url(../../picture/navi/navi_re.jpg) no-repeat right top;
	padding:4px 13px 2px 8px;  
	color:#555555;
	display: block;
	float: left;
}

.nlu_horiz01_behind {  /* The last entry only one pix width */
	float: left;
	background: url(../../picture/navi/navi_li.jpg) no-repeat left top ;
	margin:0;
	padding:0;
	height:25px; width:1px;
}

/* BG images shifted up: .active = -50px   a:hover = -25px */
.nlu_horiz01  ul li.active a { color: #234896; 	text-decoration:underline;	background-position:0% -50px; }
.nlu_horiz01  ul li.active a span {color: #234896; 	background-position:100% -50px; }

.nlu_horiz01  ul li.act_path a { color: #234896; 	text-decoration:underline;	background-position:0% -50px; }
.nlu_horiz01  ul li.act_path a span {color: #234896; 	background-position:100% -50px; }

.nlu_horiz01  ul li.sub_parent.act_path a { color: #555555; 	text-decoration:none;	background-position:0% 0px; }
.nlu_horiz01  ul li.sub_parent.act_path a span {color: #555555; 	background-position:100% 0px; }

.nlu_horiz01  ul li.sub_parent.act_path.active a { color: #234896; 	text-decoration:underline;	background-position:0% -50px; }
.nlu_horiz01  ul li.sub_parent.act_path.active a span {color: #234896; 	background-position:100% -50px; }

.nlu_horiz01 ul li a:hover {	text-decoration: none; color:#1E3F82; background-position:0% -25px; }
.nlu_horiz01 ul li a:hover span {	text-decoration: none; color:#1E3F82;	background-position:100% -25px; }

.nlu_horiz01 ul li.sub_parent.act_path a:hover {	text-decoration: none; color:#1E3F82; background-position:0% -25px; }
.nlu_horiz01 ul li.sub_parent.act_path a:hover span {	text-decoration: none; color:#1E3F82;	background-position:100% -25px; }
/* ====== snip ========*/

Same you can see at planmatrix (only two buttons).
Knut

[zuker]

Perfect.

Thank you very much Knut. It seems that everything is working OK.

[StudioZ]

@ FlipFlop (Mr CSS)...


Wish I could use your "dynamically width entry" feature with this:
{NAV_LIST_UL:HCSS,1,0,act_path,active}

I have been fighting to get this running and...
I am always reverting to your original and great HCSS version
(without this "dynamically width entry").

Wish I could better figure out by myself how to make your last horizontal example, also run with vertical dropdowns (X+2)

Cheers and thanks,

Yves