NAV_LIST_UL >= V1.30

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
User avatar
Heiko H.
Posts: 868
Joined: Thu 27. Oct 2005, 11:41
Location: Dresden
Contact:

Post by Heiko H. » Wed 11. Jul 2007, 13:04

@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 :oops: :oops: :oops:

@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 */
}
Last edited by Heiko H. on Wed 11. Jul 2007, 13:15, edited 1 time in total.

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop » Wed 11. Jul 2007, 13:07

Please dont change the language :evil:
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

larissa
Posts: 39
Joined: Tue 31. Jul 2007, 23:18
Contact:

NAV_LIST_UL >= V1.30 with different color for sub cats

Post by larissa » Wed 1. Aug 2007, 00:29

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 :roll: 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

User avatar
björnb
Posts: 188
Joined: Wed 20. Jun 2007, 16:27
Location: Duisburg
Contact:

Post by björnb » Wed 8. Aug 2007, 17:46

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: ?

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop » Wed 8. Aug 2007, 18:01

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
---------------------------------------------
Image
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
Last edited by flip-flop on Sat 15. Sep 2007, 21:09, edited 1 time in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

User avatar
björnb
Posts: 188
Joined: Wed 20. Jun 2007, 16:27
Location: Duisburg
Contact:

Post by björnb » Thu 9. Aug 2007, 09:01

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

THANX a lot Knut :)

tim
Posts: 6
Joined: Tue 14. Dec 2004, 16:09

Post by tim » Wed 22. Aug 2007, 17:42

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>';
} 

User avatar
juergen
Moderator
Posts: 4553
Joined: Mon 10. Jan 2005, 18:10
Location: Weinheim
Contact:

Post by juergen » Wed 22. Aug 2007, 17:46

@tim

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

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop » Wed 22. Aug 2007, 17:47

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
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

zuker
Posts: 80
Joined: Fri 18. May 2007, 17:13
Location: Lithuania

horizontal navigation with a dynamic bg image

Post by zuker » Fri 24. Aug 2007, 14:29

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.

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop » Sat 25. Aug 2007, 00:09

Hi zuker,

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

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

zuker
Posts: 80
Joined: Fri 18. May 2007, 17:13
Location: Lithuania

Post by zuker » Mon 27. Aug 2007, 09:33

Hello Knut,

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

Image

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.

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop » Mon 27. Aug 2007, 13:50

Oh yes, this expression was created by myself. :oops:

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.

Image

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
Last edited by flip-flop on Wed 12. Mar 2008, 14:28, edited 1 time in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

zuker
Posts: 80
Joined: Fri 18. May 2007, 17:13
Location: Lithuania

Post by zuker » Mon 27. Aug 2007, 17:28

Perfect.

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

User avatar
StudioZ
Posts: 802
Joined: Fri 28. May 2004, 19:57
Location: Québec, Canada
Contact:

Post by StudioZ » Fri 14. Sep 2007, 23:11

@ FlipFlop (Mr CSS)... :wink:

:roll: :oops:
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) :roll:

Cheers and thanks,

Yves
Image
PhpWCMS Evangelist, -- iRoutier.com Running phpWCMS 1.4.2, r354 -> Great Version!!!!

Post Reply