{NAV_LIST_UL} *** ;-)

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

{NAV_LIST_UL} *** ;-)

Post by flip-flop »

Hello folks,

I am playing around a little bit with the new NAV_LIST_UL - V1.2.8 20060825

My question: What is the meaning of class_path and class_active :?: It didn´t work for me. :shock:
I hope someone have figure out that crazy thing. Or is it a bug??
[EDIT] Yes, it works, the menu_type F is the solution. By a second look it is logical. [/EDIT] :roll:
----------------
@string $parameter =
"menu_type, start_id, max_level, class_path, class_active, ul_id_name, wrap_ul_div(0 = off, 1 = <div>, 2 = <div id="">, 3 = <div class="navLevel-x">), wrap_link_text(<em>|</em>)"

E.g.: {NAV_LIST_UL:F, 19, 10, NLU_CSS, NLU_ACT, NLU_ID, 2, <em>|</em>} (Not a real one).

My experience:

menu_type
-----------------------------------
# F - active path unfolded
# VCSS - vertical, all levels unfolded, add special code for vertical CSS flyout menu
# HCSS - horizontal, all levels unfolded, add special code for horizontal CSS flyout menu

# P - Out put of the parent link and in combination with F, VCSS, HCSS like FP, VCSSP, HCSSP. (Sinze V1.3x)


start_id
----------------------------------
The ID showing at site structure


max_level
----------------------------------
From start_id X level deep
If max_level = 0 no limitation, max_level=1 limits to the first level - there will be no sub <ul> displayed and so on...


class_path
----------------------------------
menu_type: F - active path unfolded

Code: Select all

<ul class="NLU_CSS">
	<li class="sub_no"><a href="de_artikel_test1.phtml">Artikel Test 1</a></li>
	<li class="sub_ul"><a href="de_artikel_test2.phtml">Artikel Test 2/Navi</a>
	<ul class="NLU_CSS">
		<li class="sub_no"><a href="test2_2.phtml">test2_2</a></li>
		<li class="sub_ul"><a href="test2_3.phtml">test2_3</a>
		<ul class="NLU_CSS">

			<li class="sub_no"><a href="test2_3_1.phtml">test2_3_1</a></li>
class_active
----------------------------------
menu_type: F - active path unfolded

Code: Select all

<ul>
	<li class="sub_no"><a href="de_artikel_test1.phtml">Artikel Test 1</a></li>
	<li class="sub_ul NLU_ACT"><a href="de_artikel_test2.phtml">Artikel Test 2/Navi</a>
	<ul>
		<li class="sub_no"><a href="test2_2.phtml">test2_2</a></li>
		<li class="sub_ul NLU_ACT"><a href="test2_3.phtml">test2_3</a>
		<ul>

			<li class="sub_no"><a href="test2_3_1.phtml">test2_3_1</a></li>
ul_id_name
----------------------------------
individual name for ul_id

Code: Select all

<ul id="NLU_ID_19">
	<li class="sub_no"><a href="de_artikel_test1.phtml">Artikel Test 1</a></li>
	<li class="sub_ul"><a href="de_artikel_test2.phtml">Artikel Test 2/Navi</a>
	<ul id="NLU_ID_30">
		<li class="sub_ul"><a href="test2_2.phtml">test2_2</a>

		<ul id="NLU_ID_32">
			<li class="sub_no"><a href="test2_2_1.phtml">test_2_2_1</a></li>
==== [EDIT 06/09/24] Enhancement:
Using this patch: http://www.phpwcms.de/forum/viewtopic.php?p=72953#72953
In front.func.in.php (near the end) function buildCascadingMenu():

Code: Select all

$li .= $TAB.'   <li';

if($li_ul) {
   $li_class = 'sub_ul';
} else {
   $li_class = 'sub_no';
}
replace with

Code: Select all

$li .= $TAB.'   <li';

if($level_id_name) {
   $li .= ' id="li_'.$level_id_name.'_'.$key.'"';
}
if($li_ul) {
   $li_class = 'sub_ul';
} else {
   $li_class = 'sub_no';
}
the following is generated

Code: Select all

<ul id="NLU_ID_19">
	<li id="li_ID_29" class="sub_no"><a href="de_artikel_test1.phtml">Artikel Test 1</a></li>
	<li id="li_ID_30" class="sub_ul"><a href="de_artikel_test2.phtml">Artikel Test 2/Navi</a>
	<ul id="NLU_ID_30">
		<li class="sub_ul"><a href="test2_2.phtml">test2_2</a>

		<ul id="NLU_ID_32">
			<li id="li_ID_32" class="sub_no"><a href="test2_2_1.phtml">test_2_2_1</a></li>
==== [/EDIT 06/09/24]


wrap_ul_div 0 = off
----------------------------------

Code: Select all

<ul>
	<li class="sub_no"><a href="de_artikel_test1.phtml">Artikel Test 1</a></li>
	<li class="sub_ul"><a href="de_artikel_test2.phtml">Artikel Test 2/Navi</a>
	<ul>
		<li class="sub_ul"><a href="test2_2.phtml">test2_2</a>
		<ul>
			<li class="sub_no"><a href="test2_2_1.phtml">test_2_2_1</a></li>
wrap_ul_div 1 = <div>
----------------------------------

Code: Select all

<ul>
	<li class="sub_no"><a href="de_artikel_test1.phtml">Artikel Test 1</a></li>
	<li class="sub_ul"><a href="de_artikel_test2.phtml">Artikel Test 2/Navi</a>
	<div>
	<ul>
		<li class="sub_ul"><a href="test2_2.phtml">test2_2</a>
		<div>

		<ul>
			<li class="sub_no"><a href="test2_2_1.phtml">test_2_2_1</a></li>
wrap_ul_div 2 = <div id="">
----------------------------------

Code: Select all

<ul>
	<li class="sub_no"><a href="de_artikel_test1.phtml">Artikel Test 1</a></li>
	<li class="sub_ul"><a href="de_artikel_test2.phtml">Artikel Test 2/Navi</a>
	<div id="ul_div_30">
	<ul>
		<li class="sub_ul"><a href="test2_2.phtml">test2_2</a>
		<div id="ul_div_32">

		<ul>
			<li class="sub_no"><a href="test2_2_1.phtml">test_2_2_1</a></li>
wrap_ul_div 3 = <div class="navLevel-x">
----------------------------------

Code: Select all

<div class="navLevel-0">
<ul>
	<li class="sub_no"><a href="de_artikel_test1.phtml">Artikel Test 1</a></li>
	<li class="sub_ul"><a href="de_artikel_test2.phtml">Artikel Test 2/Navi</a>
	<div class="navLevel-1">
	<ul>
		<li class="sub_ul"><a href="test2_2.phtml">test2_2</a>
		<div class="navLevel-2">
		<ul>
			<li class="sub_no"><a href="test2_2_1.phtml">test_2_2_1</a></li>
wrap_link_text(<em>|</em>)
----------------------------------

Code: Select all

<ul>
	<li class="sub_no"><a href="de_artikel_test1.phtml"><em>Artikel Test 1</em></a></li>
	<li class="sub_ul"><a href="de_artikel_test2.phtml"><em>Artikel Test 2/Navi</em></a>
	<ul>
		<li class="sub_ul"><a href="test2_2.phtml"><em>test2_2</em></a>
		<ul>
			<li class="sub_no"><a href="test2_2_1.phtml"><em>test_2_2_1</em></a></li>
--------------------------
=> And several combinations of this reproduced stuff.

=== [EDIT 06/09/24] A little example from the master himself: {NAV_LIST_UL:F,0,,,active} http://www.mlas.at/index.php?naechstes_spiel [/EDIT]


regards Knut :D
Last edited by flip-flop on Fri 1. Feb 2008, 15:44, edited 4 times in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Post by Oliver Georgi »

:) Bienchen.

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
tinoo
Posts: 311
Joined: Thu 16. Jun 2005, 11:16
Location: Zürich, Switzerland
Contact:

Post by tinoo »

What's about a easy-to-use nav_ul-tag generator (with preview function) like erich's teaser_ex generator? :wink:

i would, if i could :lol:
Greetz, tinoo
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Post by Oliver Georgi »

But for what? There are samples included - so just do it once and copy and paste and edit as you need.

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
tinoo
Posts: 311
Joined: Thu 16. Jun 2005, 11:16
Location: Zürich, Switzerland
Contact:

Post by tinoo »

guess i'm standing on the pipe... samples?
Greetz, tinoo
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Post by Oliver Georgi »

# VCSS - vertical, all levels unfolded, add special code for vertical CSS flyout menu
# HCSS - horizontal, all levels unfolded, add special code for horizontal CSS flyout menu

phpwcms_template/inc_css/specific/nav_list_ul_hcss.css
Image

phpwcms_template/inc_css/specific/nav_list_ul_vcss.css
Image

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
tinoo
Posts: 311
Joined: Thu 16. Jun 2005, 11:16
Location: Zürich, Switzerland
Contact:

Post by tinoo »

i see.... thnx oliver! i thought that nav_list_ul is a 1-to-1 replacement for nav_table_column, that's why i expected something different. But it's actually something completely different and that opens new possibilities... cool!
Greetz, tinoo
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

That are very good examples.

But an example for a vertical tree navigation unsing background grafics and all kinds of states like: normal, visited, active-section, current, hover-normal, hover active-section, hover-current are very interesting.
That is the most wanted type of navigation.

Image

Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Post by Oliver Georgi »

Hm - I think you can find tons in the web. The most problematic thing are flying - nearly pure - CSS menus. But it's up to you to build some sample menus :)

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

The most problematic thing are flying - nearly pure - CSS menus.
Yes it is. But for me the flyout examples are unusable without a delay. I think a little bit JS is necessary to do so.
But it's up to you to build some sample menus
I have build some menus for your system and I don´t be a CSS expert.
At this moment I can´t see any benefit using this NAV_LIST_UL over the way to a simple DEV navi. (You see above).
A beginner can´t handle this ul li construction with childs and classes without a example. They must use the old old NAV_TABLE.

CSS-experts where you are :?:, please build an powerfull example like this you see above. :!: :!:

regards Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Post by Oliver Georgi »

What is DEV navi?

Really don't understand where the problem is. phpwcms has everything now to have it in a nice clean way - like the hover HTC workaround for IE. And by using the HCSS/VCSS you will get all neccessary CSS code for ul ul ul. This can be changed very easy.

And why to have a delay.

But by the way - I have written code to have this menu
http://www.deluxe-menu.com
build from inside of phpwcms.

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

What is DEV navi?
it is a <dev> based navigation, a RT called {NAV_LIST_ALL_DEV:ID} No hack.

Code: Select all

www .mz.ja-nek .de/test2_3_1.phtml
And by using the HCSS/VCSS you will get all neccessary CSS code for ul ul ul. This can be changed very easy
I will check it out requiring six different states at every level. :roll:
And why to have a delay.
Thats one of the first usability rule using flyouts.
Many people lost these flyout menu during mouse move. At this moment your menu is empty without a delay. The user begins again and again.

Knut :D
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Post by Oliver Georgi »

Try the samples and you will see that no delay is neccessary.

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Post by flip-flop »

I give up, you don´t understand me ore better my english isn´t good enough. :(
(Benutzer rutscht bein Verfolgen des Linkbaums mit der Maus aus dem sensitiven Bereich, das Menü klappt sofort zu - und wieder von vorn).

Gruß Knut
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Post by Oliver Georgi »

I really know what you mean...

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
Post Reply