NAV_LIST_UL >= V1.30

jsw_nz · Post by **jsw_nz** » Wed 19. Sep 2007, 04:01

@ FlipFlop
veryNice.css

Post by **flip-flop** » Wed 19. Sep 2007, 10:59

@StudioZ:

There we have a better horizontal navigation with vertical dropdown created by O.G.: http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743 (Enanced for "using IDs")
"... with overlap and overrun"

You can see this navigation working at: http://www.cssplay.co.uk/menus/simple_vertical.html
It it absolutely the same.

rt_navi_horiz_dropdown.php at frontend_render

Code: Select all

<?php
// **************************************************************************
// 25.07.07 horizontal drop-down with ID output -> NAVI HORIZONTAL DROP-DOWN
// Oliver Georgi
// http://www.phpwcms.de/forum/viewtopic.php?p=89743#89743
// 08.08.07 KH (flip-flop) Enhanced: Start[ID] {NAV_HORIZ_DD:ID}
// **************************************************************************


if( ! ( strpos($content["all"],'{NAV_HORIZ_DD')==false ) ) {
	$content["all"] = str_replace('{NAV_HORIZ_DD}','{NAV_HORIZ_DD:0}',$content["all"]);
	$content["all"] = preg_replace('/\{NAV_HORIZ_DD:(.*?)\}/e','buildNavi("$1");', $content["all"]);
}
//$content['all'] = str_replace('{NAVI}', buildNavi(), $content['all']);


function buildNavi($start=0, $counter=0) {
   
   $t = array();
   
   $struct = getStructureChildData($start);
   
   if($counter == 0) {
      $last = count($struct) - 1;
   } else {
      $last = 0;
   }
   
   $x = 0;
   
   foreach($struct as $value) {
   
      //if( isset($GLOBALS['LEVEL_KEY'][ $value['acat_id'] ]) ) {
      
      /*   $p1 = ' path';
      } else {
         $s  = '';
         $p1 = '';
      }
   
      if($GLOBALS['content']['cat_id'] == $value['acat_id']) {
         $a1 = ' active';
         $a3 = 'active';
      } else {
         $a1 = $p1;
         $a3 = '';
      }
      */
      $s = buildNavi($value['acat_id'], $counter+1);
      if($s) {
         $g  = '<!--[if IE 7]><!--></a><!--<![endif]-->';
         $g .= $s;
         $g .= LF . str_repeat('   ', $counter);
         
         $class = $counter ? ' class="fly"' : ' class="drop"';
         
         $close_li = str_repeat('   ', $counter+1);
         
      } else {
         $g  = '</a>';
         $class = '';
         $close_li = '';
      }
      
      if( $last && $last == $x ) {
         $enclose = ' class="enclose"';
      } elseif( $x || ($counter == 0 && $x == 0) ) {
         $enclose = '';
      } else {
         $enclose = ' class="enclose"';
      }

      $l  = str_repeat('   ', $counter+1) . '<li'. $class . ' id="cat-id_' . $value['acat_id'] . '">';
      $l .= get_level_ahref($value['acat_id'], $enclose) . html_specialchars($value['acat_name']);
      $l .= $g;
      
      
      
      $l .=  $close_li . '</li>';
      
      $t[] = $l;

      $x++;
      
   }
   
   if($counter) {
      $A = LF . str_repeat('   ', $counter) . '<!--[if lte IE 6]><table><tr><td><![endif]-->';
      $B = LF . str_repeat('   ', $counter) . '<!--[if lte IE 6]></td></tr></table></a><![endif]-->';
   } else {
      $A = '';
      $B = '';
   }
   
   
   $t = implode(LF, $t);
   if($t) {
      $t =   $A . LF . str_repeat('   ', $counter) .   '<ul'.($counter?'':' id="pmenu"').'>' . LF . $t . LF . str_repeat('   ', $counter) . '</ul>'.   $B ;
   }
   
   return $t;

}
?>

CSS: Please copy the css snippet from http://www.cssplay.co.uk/menus/simple_vertical.html

Css enhancement using IDs if you want e.g.:

Code: Select all

/* Adopt width of first level links */
/*
#pmenu #cat-id_1 a,  
#pmenu #cat-id_1 a:visited {
   width:            55px;
}

#pmenu #cat-id_2 a,
#pmenu #cat-id_2 a:visited {
   width:            160px;
}

#pmenu #cat-id_3 a,
#pmenu #cat-id_3 a:visited {
   width:            62px;
}

#pmenu #cat-id_12 a,
#pmenu #cat-id_12 a:visited {
   width:            82px;
}

#pmenu #cat-id_18 a,
#pmenu #cat-id_18 a:visited {
   width:            62px;
}

#pmenu #cat-id_21 a,
#pmenu #cat-id_21 a:visited {
   width:            62px;
}
*/
/*
#pmenu #cat-id_1 a,
#pmenu #cat-id_1 a:visited,
#pmenu #cat-id_2 a,
#pmenu #cat-id_2 a:visited,
#pmenu #cat-id_3 a,
#pmenu #cat-id_3 a:visited,
#pmenu #cat-id_12 a,
#pmenu #cat-id_12 a:visited,
#pmenu #cat-id_18 a,
#pmenu #cat-id_18 a:visited, 
#pmenu #cat-id_21 a,
#pmenu #cat-id_21 a:visited {
   padding:         1px 5px 1px 5px;
}
*/

That´s it.

@jsw_nz: Thank´s.

Knut

StudioZ · Post by **StudioZ** » Thu 20. Sep 2007, 16:10

Thank you FlipFlop

Will keep it bookmarked.
Although... I m already pretty deep into modifying for my needs,
the CSS needed for:
{NAV_LIST_UL:HCSS,1,0,act_path,active}
nav_list_ul_hcss.css
nlu_navi1.css

Should hopefully be completed for tomorrow.

Cheers and thanks,

Yves

tester · Post by **tester** » Sat 22. Sep 2007, 00:07

Hi!

Can anyone tell me if it's possible to have two menu items marked at the same time.

I'm trying to make a two level horizontal drop down menu and I want to have an item at level one marked together with an item at level 2.

ex.

Code: Select all

                          menu1         menu2         menu3
                          sub1_1        sub2_1        sub3_1
                          sub1_2        sub2_2        sub3_2
                          sub1_3        sub2_3        sub3_3

If the user chooses menu2 sub2_3 I would like menu2 and sub2_3 to change background color - when you hover over the menu you will see that both menu2 and sub2_3 are active to give you an indication of your whereabouts.

best regards
tester

Post by **flip-flop** » Sat 22. Sep 2007, 11:06

@tester:

{NAV_LIST_UL:F,ID,,act_path,active}

act_path: I have called it "link tracing"

<ul class="act_path">
<li class="sub_no"><a href="index.php?home">Home</a></li>
<li class="sub_no sub_ul_true"><a href="index.php?ebene01">Ebene01</a></li>
<li class="sub_ul act_path"><a href="index.php?ebene02">Ebene02</a>
<ul class="act_path">
<li class="sub_no sub_ul_true"><a href="index.php?ebene02_01">Ebene02_01</a></li>
<li class="sub_ul act_path"><a href="index.php?ebene02_02">Ebene02_02</a>
<ul class="act_path">
......

An other solution is the parent switch: {NAV_LIST_UL:FP,ID,,act_path,active}

<li class="sub_parent act_path"><a href="index.php?index">Home</a></li>
<li class="sub_no"><a href="index.php?first">First</a></li>
......

Knut

tester · Post by **tester** » Sat 22. Sep 2007, 13:02

Hi!

Excuse my ignorance - I'm having a hard time with the CSS.

I tried {NAV_LIST_UL:FP,ID,,act_path,active} and got this list:

Code: Select all

<div id="nb_linie">
<ul class="act_path">

	<li class="sub_parent act_path"><a href="index.php?forside">Forside</a></li>
	<li class="sub_no sub_ul_true"><a href="#">Grupperejser</a></li>
	<li class="sub_no sub_ul_true"><a href="#">Kør selv</a></li>
	<li class="sub_ul act_path"><a href="index.php?specielle-rejser">Specielle rejser</a>
	<ul class="act_path">
      <li class="sub_no act_path active"><a href="index.php?firmarejser">Firmarejser</a></li>
		<li class="sub_no"><a href="index.php?landbrugsrejser">Landbrugsrejser</a></li>
		<li class="sub_no"><a href="index.php?skole-og-studierejser">Skole- og studierejser</a></li>
		<li class="sub_no"><a href="index.php?kulturrejser">Kulturrejser</a></li>
		<li class="sub_no"><a href="index.php?korrejser">Korrejser</a></li>
		<li class="sub_no"><a href="index.php?riderejser">Riderejser</a></li>

	</ul>
	</li>
	<li class="sub_no sub_ul_true"><a href="#">Om Island</a></li>
</ul>
</div>

How do I address

Code: Select all

<li class="sub_ul act_path"><a href="index.php?specielle-rejser">Specielle rejser</a>

and

Code: Select all

<li class="sub_no act_path active"><a href="index.php?firmarejser">Firmarejser</a></li>

with CSS?

I would like to change their backgrounds.

Thanx
tester

Post by **flip-flop** » Sat 22. Sep 2007, 13:06

Yes, there is all wat you want.

(If I have you understand right).
Please have a look into my basic first example, there is the "link tracing" implemented. (parent isn´t shown there).

Knut

Post by **flip-flop** » Sat 22. Sep 2007, 16:53

Please read NAV_LIST_UL again:

/* ==== Aktiver Pfad - Linkverfolgung im Baum // active path in tree (link tracing) ==== */
.nlu_navi1 ul li.act_path a,
.nlu_navi1 ul li.act_path a:link,
.nlu_navi1 ul li.act_path a:visited,
.nlu_navi1 ul li.act_path a:active {
color: White;
font-weight: bold;
background: #63819F url(../../img/article/navi1_act.gif) 10px 1px no-repeat;
}

Next level:

/* state for the active path (link tracing) */
.nlu_navi1 ul ul li.act_path a,
.nlu_navi1 ul ul li.act_path a:link,
.nlu_navi1 ul ul li.act_path a:visited,
.nlu_navi1 ul ul li.act_path a:active {
color: White;
font-weight: bold;
background: #6D8EAF url(../../img/article/navi1_act.gif) 25px 1px no-repeat;
}

Next level:

And so on .......

Knut

tester · Post by **tester** » Sun 23. Sep 2007, 15:58

I'm getting there

THANK YOU

Still one problem though.

Code: Select all

<li class="sub_parent act_path"><a href="index.php?forside">Forside</a></li>

Index is always "act_path". Can I avoid this?

tester

Post by **flip-flop** » Mon 24. Sep 2007, 06:59

Index is always "act_path". Can I avoid this?

... and is always sub_parent.
-> You can format it separately behind the other classes. The processing of a css file is always "top - down".

The same for processing for the order of css-files.

.....
.nlu_navi1 ul li.act_path a:active { ......... }

.nlu_navi1 ul li.sub_parent.act_path a { ...... }
.nlu_navi1 ul li.sub_parent.act_path.active a { ...... }
.nlu_navi1 ul li.sub_parent.act_path a:hover { ...... }
.........

Knut

tester · Post by **tester** » Mon 24. Sep 2007, 09:51

I figured that out - but it doesn't help me

If you want to do something to the REAL active path like changing the background color you cant use "sub_parent".
Changing "sub_parent" at the end of a css file would ruin everything if "sub_parent" is current.

I ended up using:

Code: Select all

+ root          (alias = index)
++ Home         (alias = home)
++ Category_01  (alias = cat_01)
++ Category_02  (alias = cat_02)
++ Category_03  (alias = cat_02)
++ ...........  (alias = cat_..)

And now I have questions on redirecting - but I guess this is not the right thread

But thanx anyway
tester

Post by **flip-flop** » Mon 24. Sep 2007, 10:30

If you want to do something to the REAL active path like changing the background color you cant use "sub_parent".
Changing "sub_parent" at the end of a css file would ruin everything if "sub_parent" is current.

For me it works.

I think you havent´t understand my hint and the processing of css-files. (.... "sub_parent" at the end of a css file would ruin everything if "sub_parent" is current..... > Why at the end of a css-file? )
Or I don´t understand your problem. I think I can´t help without a link.
Have a look, Home is the real home (index). If you activate e.g. "Ausbildung", Home isn´t selected. -> ikom-bonn.de

Your second solution is a very simple one with an redirect 301 "Moved Permanently".

Knut

Crypted · Post by **Crypted** » Wed 26. Sep 2007, 21:45

is it possible to use this without DIV?

pepe · Post by **pepe** » Wed 26. Sep 2007, 22:15

WHY that???

You are able, to make a HTML-layout-construction and put DIVs inside the tables...

A combination of "both worlds" is possible

pepe · Post by **pepe** » Wed 26. Sep 2007, 23:29

Hi Knut,

i'm using your "LevelLift" on all my newer sites... and i must say: Thumbs up

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

My question now is:
Is it possible, do kill the marked elements, if the 1. level has NO sublevels?

Normally i get the sequence:

<div id="nlu_navi1"></div>

And in some cases i don't want these lines!

I'm not so good in php to solve my problem... what can i do, to reach my target

NAV_LIST_UL >= V1.30

KH_NAVI