NAV_LIST_UL modifications

[funcman]

Hello all!

I'm in need of some help.

Basically I would like to have a menu structured like so:

Code: Select all

<ul class="myClass">
    <li>Parent 1</li>
    <li class="selected">Parent 2
        <ul>
            <li>Child 1 of Parent 2</li>
            <li class="selected">Child 2 of Parent 2</li>
        </ul>  
    </li>
    <li>Parent 3
        <ul>
            <li>Child 1 of Parent 3</li>
            <li>Child 2 of Parent 3</li>
        </ul>
    </li>
</ul>

The behaviour I would like is if a child of a parent is selected, the chosen child LI has the selected class aswell as the parent LI of that child.

I have tried to implement the above behaviour, but I have run into some problems. I have modified the buildCascadingMenu function of front.func.inc.php, but it gives a 'selected' class to every parent that has children, which is not what I want.

I'm using NAV_LIST_UL like so:

Code: Select all

{NAV_LIST_UL:,0,2,navig twolevel,selected}

Any help would be great.
Thanks!

[flip-flop]

Hi funcman,


using this description http://www.phpwcms.de/forum/viewtopic.php?t=14273 the following output is generated in V1.33:

Code: Select all

<div class="nlu_navi1">{NAV_LIST_UL:F,0,,act_path,active}</div>

+------------------------------------------------------------------------------------+
| div  nlu_navi1                                                                     |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|  ul      |           | act_path    |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|   li     | sub_no    |             | sub_ul_true |        | Categorie_01       | 1 |
|   li     | sub_no    |             | sub_ul_true |        | Categorie_02       | 1 |
|   li     | sub_ul    | act_path    |             |        | Categorie_03       | 1 |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|    ul    |           | act_path    |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|     li   | sub_ul    | act_path    |             |        | Categorie_03_01    | 2 |
|      ul  |           | act_path    |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|       li | sub_no    |             |             |        | Categorie_03_01_01 | 3 |
|       li | sub_no    | act_path    |             | active | Categorie_03_01_02 | 3 |
|       li | sub_no    |             |             |        | Categorie_03_01_03 | 3 |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|     /ul  |           |             |             |        |                    |   |
|    /li   |           |             |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|     li   | sub_no    |             | sub_ul_true |        | Categorie_03_02    | 2 |
|     li   | sub_no    |             | sub_ul_true |        | Categorie_03_03    | 2 |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|   /ul    |           |             |             |        |                    |   |
|  /li     |           |             |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|   li     | sub_no    |             |             |        | Categorie_04       | 1 |
|   li     | sub_no    |             | sub_ul_true |        | Categorie_05       | 1 |
|   li     | sub_no    |             |             |        | Categorie_06       | 1 |
|   li     | sub_no    |             |             |        | Categorie_07       | 1 |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|  /ul     |           |             |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|/div                                                                                |
+------------------------------------------------------------------------------------+

sub_no      = standard
sub_ul      = The next entry is an UL element 
sub_ul_true = There we have some child categories but they are not active at this time
act_path    = Active path in tree
active      = The active link

The real output:

Code: Select all

<div class="nlu_navi1">

<ul class="act_path">
  <li class="sub_no sub_ul_true"><a href="index.php?categorie_01">Categorie_01</a></li>
  <li class="sub_no sub_ul_true"><a href="index.php?categorie_02">Categorie_02</a></li>
  <li class="sub_ul act_path"><a href="index.php?categorie_03">Categorie_03</a>

  <ul class="act_path">
    <li class="sub_ul act_path"><a href="index.php?categorie_03_01">Categorie_03_01</a>
    <ul class="act_path">
      <li class="sub_no"><a href="index.php?categorie_03_01_01">Categorie_03_01_01</a></li>
      <li class="sub_no act_path active"><a href="index.php?categorie_03_01_02">Categorie_03_01_02</a></li>
      <li class="sub_no"><a href="index.php?categorie_03_01_03">Categorie_03_01_03</a></li>

    </ul>
    </li>
    <li class="sub_no sub_ul_true"><a href="index.php?categorie_03_02">Categorie_03_02</a></li>
    <li class="sub_no sub_ul_true"><a href="index.php?categorie_03_03">Categorie_03_03</a></li>

  </ul>
  </li>
  <li class="sub_no"><a href="index.php?categorie_04">Categorie_04</a></li>
  <li class="sub_no sub_ul_true"><a href="index.php?categorie_05">Categorie_05</a></li>
  <li class="sub_no"><a href="index.php?categorie_06">Categorie_06</a></li>
  <li class="sub_no"><a href="index.php?categorie_07">Categorie_07</a></li>
</ul>

</div>

I hope it solves your problem.

And please don´t patch the core. Make a own RT with the NAV_LIST_UL function.
A little hint: http://www.phpwcms.de/forum/viewtopic.php?t=14755

Knut

[funcman]

Thanks for your response flip-flop.

In regards to creating my own RT, how can I get an array of all of the structure level ID's without hard coding them in?

[flip-flop]

First I don´t understand, why you must create your own RT.

For me all information about the selected link with his parents are available.
(Active path in tree or link tracing).

If you want to have an output exactly shown in your first post, this is a very special custom menue and I can´t support such things at this place.

Knut

[funcman]

I finally got it.

I made my own RT in template/inc_script/frontend_render called navi.php

If anyone else wants to know, it's contents are as follows:

Code: Select all

<?php

$content['all'] = str_replace('{BTVNAVI}', build_btvnav(0, 'class="navig twolevel"', 'class="selected"'), $content['all']);

// returns the structural id of the current category you're in
function currentCat() {
	
	$check_id = $GLOBALS['content']['cat_id'];

	while( $GLOBALS['content']['struct'][$check_id]['acat_struct'] > 0 ) {
	   $check_id = $GLOBALS['content']['struct'][$check_id]['acat_struct'];
	}

	return $check_id;
}

function build_btvnav($start=0, $class='', $activeclass='', $counter=0) {
   
   $s = '';
   $g = '';
   foreach($GLOBALS['content']['struct'] as $key => $value) {
      if ($start == $GLOBALS['content']['struct'][$key]['acat_struct'] &&
         !$GLOBALS['content']['struct'][$key]['acat_hidden'] && $key)
      {

         $s .= '<li'; 
		if($key == currentCat()) $s .= ' '.$activeclass;
        else if($key == $GLOBALS['aktion'][0] && $activeclass) $s .= ' '.$activeclass;
         $s .= '>';

         if(!$GLOBALS['content']['struct'][$key]["acat_redirect"]) {
            $s .= '<a href="index.php?';
            if($GLOBALS['content']['struct'][$key]['acat_alias']) {
               $s .= $GLOBALS['content']['struct'][$key]['acat_alias'];
            } else {
               $s .= 'id='.$key.',0,0,1,0,0';
            }
            $s .= '">';
         } else {
            $redirect = get_redirect_link($GLOBALS['content']['struct'][$key]["acat_redirect"], ' ', '');
            $s .= '<a href="'.$redirect['link'].'"'.$redirect['target'].'>';
         }

         $s .= html_specialchars($GLOBALS['content']['struct'][$key]['acat_name']);
         $s .= '</a>';

         $s .= build_btvnav($key, $class, $activeclass, $counter+1);

         $s .= "</li>\n";
      }
   }

   if($s) {
      $g  = "\n<ul";
      if(!$counter && $class) $g .= ' '.$class;
      $g .= ">\n".$s.'</ul>';
   }
   
   return $g;
}

?>

Thanks!

[flip-flop]

Fine work.

But if you would have spoken more clearly, we would have had a simple and fast solution. (-> solution oriented -> like: I need a horizontal two level menue)

{NAV_LIST_UL:HCSS, 0, 2, navig, selected}

e.g. output:

Code: Select all

<ul class="navig">
	<li class="sub_no"><a href="cat01">cat01</a></li>
	<li class="sub_ul"><a href="cat02">cat02</a>
	<ul>
		<li class="sub_no"><a href="cat01_01">cat01_01</a></li>
		<li class="sub_no"><a href="cat01_02">cat01_02</a></li>
	</ul>
	</li>
	<li class="sub_ul selected"><a href="cat03">cat03</a>
	<ul class="navig">
		<li class="sub_no"><a href="cat03_01">cat03_01</a></li>
		<li class="sub_no selected"><a href="cat03_02">cat03_02</a></li>
		<li class="sub_no"><a href="cat03_03">cat03_03</a></li>
	</ul>
	</li>
	<li class="sub_ul"><a href="cat04">cat04</a>
	<ul>
		<li class="sub_no"><a href="cat04_01">cat04_01</a></li>
		<li class="sub_no"><a href="cat04_01">cat04_01</a></li>
	</ul>
	</li>
</ul>

I have made a small and fast test using your css and it works.

Knut

[sustia]

Hi, I've done the menu with the {NAV_LIST_UL:,0,2,navig twolevel,selected} tag, and it works fine but only on the first level, like you can see at this link:
http://www.angelosignore.it/index.php?homepage

By clicking the sub pages (Viaggi or Italia and so on) the menu is not well formatted, like you can see in this links:

http://www.angelosignore.it/index.php?viaggi
http://www.angelosignore.it/index.php?italia

This is my css file:

Code: Select all

    /* 27.06.07  Horizontales Menü mit einer horiz. Unterebene
          Navigation core    
      http://www.phpwcms.de/forum/viewtopic.php?p=88630#88630
    */

    .navig {
       line-height: 1;
       /*margin: 0 0 1.2em 0;*/
       margin: 0px;
		 display: block;
       position: relative;
    }

    /* remove all list stylings */
    .navig, .navig ul {
       margin: 0;
       padding: 0;
       border: 0;
       list-style-type: none;
    }

    /* move all list items into one row, by floating them */
    .navig li {
       margin: 0;
       padding: 0 1px;
       border: 0;
       display: block;
       float: left;
       background: url(../../../picture/menubg.gif) repeat-x;
    }

    /* initialy hide all sub menus */
    .navig ul {
       width: 100%;
       display: block;
       visibility: hidden;
       position: absolute;
       clear: both;
       top: 0.8 em;/* watch for this value! you must make sure that this value and value of line-height for the parent items are such that it is possible to move the mouse over to submenu */
       left: 0;
    }

    /* -- float.clear -- force containment of floated LIs inside of main UL */
    .navig:after {
       content: ".";
       height: 0;
       display: block;
       visibility: hidden;
       overflow: hidden;
       clear: both;
    }
    /* -- float.clear.END --  */

    .navig li.selected ul, .navig li:hover ul {
       visibility: visible;
    }

   .navig li.selected ul {
       z-index: 10;
    }

    .navig li:hover ul {
       z-index: 100;
    }

    /*      Navigation make-up    */

    .navig {
       font-size: 12px;
       color: #fff;
       background: url(../../../picture/menubg.gif) repeat-x;
       /*margin: 0em auto 2em;*/
		 margin: 0px;
       padding: 0 1em;
       width: 950px;   /* this value should be close to what is needed for elements to stay on one line */
    }

    .navig a {
       color: #fff;
       text-decoration: none;
       padding: 1em 5px 1.05em; /*THIS DEFINES NAV LI HEIGHT*/
       display: block;
    }

    .navig li {
       margin: 0;
	       /*border-right: 1px dotted #000;*/
    }
    .navig li li{
    border: 0px;
	 }

    /* if the following selector was ".navig li:hover a" IE7 will NOT render nested UL! the reason is the background-color rule. */
    .navig li:hover {
       color: #000;
       background-color: #cde;
    }
    /* which is why the link is styled separatelly */
    .navig li:hover a {
       color: #000;
    }

    .navig li:hover ul {
       background-color: #cde;
    }

    /* always pay attention that the value for top is such that it is possible to move the mouse over to submenu */
    .navig ul {
       top: 3em;
       padding: 0;/* should be identical to .navig, for best results */
       color: #000;
       width: 950px;
    }

    .navig li li {
       padding: 0 6px;
       background: url(../../../picture/sub_bg.gif) repeat-x;
    }

    .navig li ul {
       background: url(../../../picture/sub_bg.gif) repeat-x;
    }

    .navig li li a {
       color: #000;
       padding: 0.3em;
       font-family: sans-serif, 'Arial';
       font-size: 11px;
       text-transform: none;
    }

    /* fix the colors for selected item and submenu, for better usability */

    .navig li.selected li a, .navig li.selected li a:hover {
       color: #000;
       background: url(../../../picture/sub_bg.gif) repeat-x;
    }

    .navig li.selected li, .navig li.selected:hover li a, .navig li.selected ul {
       background: url(../../../picture/sub_bg.gif) repeat-x;
       text-decoration:none;
    }

    .navig li li.selected, .navig li.selected:hover li.selected a, .navig li li.selected a{
      background: url(../../../picture/sub_hover_bg.gif);
    }
    .navig li.selected li a:hover, .navig li.selected:hover li a:hover{
    color: #eee;
    }


    /* IE5/Mac: \*//*/

    .navig {
       display: inline-block;
    }

    .navig a {
       float: left;
    }

    .navig li ul {
       top: 1.8em;
       height: 2em;
    }

    .navig li li, .navig li li a {
       display: inline;
       float: none;
    }

    /*  */

Some suggestion for that?
Thanks.

[flip-flop]

Yes, there was a real problem with a second time call of the class .navig in <li ...

I have fixed this problem: Have a look: -> http://forum.phpwcms.org/viewtopic.php?p=103206#p103206

[sustia]

It works perfectly

Thanks a lot flip-flop!

[extract]

Hi funcman,


using this description http://www.phpwcms.de/forum/viewtopic.php?t=14273 the following output is generated in V1.33:

Code: Select all

<div class="nlu_navi1">{NAV_LIST_UL:F,0,,act_path,active}</div>

+------------------------------------------------------------------------------------+
| div  nlu_navi1                                                                     |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|  ul      |           | act_path    |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|   li     | sub_no    |             | sub_ul_true |        | Categorie_01       | 1 |
|   li     | sub_no    |             | sub_ul_true |        | Categorie_02       | 1 |
|   li     | sub_ul    | act_path    |             |        | Categorie_03       | 1 |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|    ul    |           | act_path    |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|     li   | sub_ul    | act_path    |             |        | Categorie_03_01    | 2 |
|      ul  |           | act_path    |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|       li | sub_no    |             |             |        | Categorie_03_01_01 | 3 |
|       li | sub_no    | act_path    |             | active | Categorie_03_01_02 | 3 |
|       li | sub_no    |             |             |        | Categorie_03_01_03 | 3 |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|     /ul  |           |             |             |        |                    |   |
|    /li   |           |             |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|     li   | sub_no    |             | sub_ul_true |        | Categorie_03_02    | 2 |
|     li   | sub_no    |             | sub_ul_true |        | Categorie_03_03    | 2 |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|   /ul    |           |             |             |        |                    |   |
|  /li     |           |             |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|   li     | sub_no    |             |             |        | Categorie_04       | 1 |
|   li     | sub_no    |             | sub_ul_true |        | Categorie_05       | 1 |
|   li     | sub_no    |             |             |        | Categorie_06       | 1 |
|   li     | sub_no    |             |             |        | Categorie_07       | 1 |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|  /ul     |           |             |             |        |                    |   |
+----------+-----------+-------------+-------------+--------+--------------------+---+
|/div                                                                                |
+------------------------------------------------------------------------------------+

sub_no      = standard
sub_ul      = The next entry is an UL element 
sub_ul_true = There we have some child categories but they are not active at this time
act_path    = Active path in tree
active      = The active link

The real output:

Code: Select all

<div class="nlu_navi1">

<ul class="act_path">
  <li class="sub_no sub_ul_true"><a href="index.php?categorie_01">Categorie_01</a></li>
  <li class="sub_no sub_ul_true"><a href="index.php?categorie_02">Categorie_02</a></li>
  <li class="sub_ul act_path"><a href="index.php?categorie_03">Categorie_03</a>

  <ul class="act_path">
    <li class="sub_ul act_path"><a href="index.php?categorie_03_01">Categorie_03_01</a>
    <ul class="act_path">
      <li class="sub_no"><a href="index.php?categorie_03_01_01">Categorie_03_01_01</a></li>
      <li class="sub_no act_path active"><a href="index.php?categorie_03_01_02">Categorie_03_01_02</a></li>
      <li class="sub_no"><a href="index.php?categorie_03_01_03">Categorie_03_01_03</a></li>

    </ul>
    </li>
    <li class="sub_no sub_ul_true"><a href="index.php?categorie_03_02">Categorie_03_02</a></li>
    <li class="sub_no sub_ul_true"><a href="index.php?categorie_03_03">Categorie_03_03</a></li>

  </ul>
  </li>
  <li class="sub_no"><a href="index.php?categorie_04">Categorie_04</a></li>
  <li class="sub_no sub_ul_true"><a href="index.php?categorie_05">Categorie_05</a></li>
  <li class="sub_no"><a href="index.php?categorie_06">Categorie_06</a></li>
  <li class="sub_no"><a href="index.php?categorie_07">Categorie_07</a></li>
</ul>

</div>

I hope it solves your problem.

And please don´t patch the core. Make a own RT with the NAV_LIST_UL function.
A little hint: http://www.phpwcms.de/forum/viewtopic.php?t=14755

Knut

Hey all. I am new here, and obviously this is my first post

I am using <div class="nlu_navi1">{NAV_LIST_UL:F,0,,act_path,active}</div> in my page, and just a simple question. How to make in one of my

Code: Select all

<li class="sub_no"><a href="index.php?categorie_07">Categorie_07</a></li>

to

Code: Select all

<li class="sub_no"><a href="http://forum.phpwcms.org/" target="_blank">Categorie_07</a></li>

?

I used "redirect to:" function in site structure, but it do not offer the target , and it used target="_self" as default (even it did not showed up in the code)
Maybe there is something hidden that I should change?

[flip-flop]

Hi,

please do it in this way:
- site structure (child of): -> redirect to: ->

Code: Select all

http://forum.phpwcms.org _blank

Knut

[extract]

Thanks alot Knut. It works