CSS/List based version of NAV_TABLE_COLUMN

Post custom hacks and enhancements for phpwcms here only. Maybe some of these things will be included in official release later.
david
Posts: 3
Joined: Tue 6. Apr 2004, 01:26

CSS/List based version of NAV_TABLE_COLUMN

Post by david »

Hello. I just started using phpwcms and am trying to make it completely CSS based (XHTML-Strict). I implemented my own <ul> version of the NAV_COLUMN_TABLE by simply editing the functions a bit and renaming them. NAV_LIST_CURRENT and NAV_LIST_TOP just didn't do it for me. :) I hope that someone can use this.

The tag {NAV_LIST_ALL} will be replaced with something like this:

Code: Select all

<ul class="navList"><li class="MenuItem_lvl_1"><a href="index.php?category1">Category1</a></li>
<li class="MenuItem_lvl_1" id="activeSection"><a href="index.php?category2">Category2</a></li>
<li class="MenuItem_lvl_2"><a href="index.php?category2subcategory1">SubCategory1</a></li>
<li class="MenuItem_lvl_1"><a href="index.php?category3">Category3</a></li>
</ul>
where the classes represent the depth level of the menu. you can then edit your CSS to make it look how you want without all the tables.

Modifications:

add this to include/inc_front/front.func.inc.php

Code: Select all

// -------------------------------------------------------------

function css_list_all ($struct, $act_cat_id, $level, $nav_table_struct, $link_to="index.php") {
        // start with home directory for the listing = top nav structure
        // 1. Build the recursive tree for given actual article category ID

        // return the tree starting with given start_id (like breadcrumb)
        // if the $start_id = 0 then this stops because 0 = top level

        $level = intval($level);
        $start_id = $act_cat_id;

        while ($start_id) {
                $data[$start_id] = 1;
                $start_id                = $struct[$start_id]["acat_struct"];
        }
        $temp_tree = (sizeof($data)) ? array_reverse($data, 1) : false;

        foreach($struct as $key => $value) {
                if($struct[$key]["acat_struct"] == $act_cat_id && $key && !$struct[$key]["acat_hidden"]) $c++;
        }
        $c = (!$c) ? 1 : 0;

        //get depth of level
        $level_depth = 0; $start_level = $level;
        while ($start_level) {
                $start_level = $struct[$start_level]["acat_struct"];
                $level_depth++;
        }
        $temp_menu = build_levels_list ($struct, $level, $temp_tree, $act_cat_id, $nav_table_struct, $level_depth, $c, $link_to); //starts at root level
        return ($temp_menu) ? ("\n<ul class=\"navList\">".$temp_menu."</ul>\n") : "";
}


// -------------------------------------------------------------

function build_levels_list ($struct, $level, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to) {
        // this returns the level structure based on given arrays
        // it is special for browsing from root levels
        $depth = sizeof($temp_tree)-$div; $count++; $depth2 = $depth-$count+2;

        $temp_menu      = "";
        foreach($struct as $key => $value) {
                if($_SESSION["frontend_user_in"] && $struct[$key]["acat_regonly"]) $struct[$key]["acat_regonly"] = 0;
                if($struct[$key]["acat_struct"] == $level && $key && !$struct[$key]["acat_hidden"] && !$struct[$key]["acat_regonly"]) {

                        $link_image_id  = "linkid".randpassword(6);
                        $link_name_id   = ' name="'.$link_image_id.'" id="'.$link_image_id.'"';
                        $link                   = $link_to."?";
                        $link              .= ($struct[$key]["acat_alias"]) ? html_specialchars($struct[$key]["acat_alias"]) : 'id='.$key.',0,0,1,0,0';


                        if($temp_tree[$key]) {
                                if($act_cat_id == $key) {
                                        $temp_menu .= "<li class=\"MenuItem_lvl_".$count."\" id=\"activeSection\"><a href=\"".$link."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n";
                                } else {
                                        $temp_menu .= "<li class=\"MenuItem_lvl_".$count."\"><a href=\"".$link."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n";
                                }
                                $temp_menu .= build_levels_list ($struct, $key, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to);
                        } else {
                                $temp_menu .= "<li class=\"MenuItem_lvl_".$count."\"><a href=\"".$link."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n";
                        }
                }
        }      
        return $temp_menu;
}
and this to include/inc_front/content.func.inc.php

Code: Select all


// -------------------------------------------------------------

// <ul>-list based Navigation table
if( ! ( strpos($content["all"],'{NAV_LIST_ALL')==false ) ) {
        $content["all"] = str_replace('{NAV_LIST_ALL}','{NAV_LIST_ALL:0}',$content["all"]);
        $replace = 'css_list_all($content["struct"],intval($content["cat_id"]),"$1",$template_default["nav_table_struct"]);';
        $content["all"] = preg_replace('/\{NAV_LIST_ALL:(\d+)\}/e', $replace, $content["all"]);
}
David
Jan212
Posts: 859
Joined: Wed 28. Jan 2004, 21:38
Location: Solingen
Contact:

Post by Jan212 »

nice idea...
Regards/ Grüsse/ Groetjes - JAN212
------------------------------------------------
null212 - Büro für Kommunikation und Design
------------------------------------------------
Lyrikfetzen des Tages
1. Ist der Quelltext auch valide fragt Herr Müller ganz perfide.
2. Wat is dat een lekker ding.
3. Wer Vision hat soll zum Arzt gehen.
------------------------------------------------
bertalizer
Posts: 47
Joined: Sat 21. Feb 2004, 14:24
Location: Belgium

Post by bertalizer »

This is great! Thank you!
But wouldn't it be possible to let the script create nested lists?
Now the script creates

Code: Select all

<ul>
  <li class="level_1">item</li>
  <li class="level_1"  id="activeSection">active item</li>
  <li class="level_2">sub item</li>
  <li class="level_2">sub item</li>
  <li class="level_1">item</li>
  <li class="level_1">item</li>
  <li class="level_1">item</li>
<ul>
It would be really nice to see this:

Code: Select all

<ul id="nav">
  <li>item</li>
  <li id="activeSection">active item
    <ul>
    <li>sub item</li>
    <li>sub item
      <ul>
      <li>sub sub item</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
<ul>
Thanx,
B.
david
Posts: 3
Joined: Tue 6. Apr 2004, 01:26

Nested Lists

Post by david »

If you change the function build_levels_list to the following you will get nested lists like requested. This is how i originally had it. It's just wrapping child lists up in the <ul> tag. (look for the "// Added this:" in the code below)

Hope this helps.

David

Code: Select all

// -------------------------------------------------------------

function build_levels_list ($struct, $level, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to) {
        // this returns the level structure based on given arrays
        // it is special for browsing from root levels
        $depth = sizeof($temp_tree)-$div; $count++; $depth2 = $depth-$count+2;

        $temp_menu      = "";
        foreach($struct as $key => $value) {
                if($_SESSION["frontend_user_in"] && $struct[$key]["acat_regonly"]) $struct[$key]["acat_regonly"] = 0;
                if($struct[$key]["acat_struct"] == $level && $key && !$struct[$key]["acat_hidden"] && !$struct[$key]["acat_regonly"]) {

                        $link_image_id  = "linkid".randpassword(6);
                        $link_name_id   = ' name="'.$link_image_id.'" id="'.$link_image_id.'"';
                        $link                   = $link_to."?";
                        $link              .= ($struct[$key]["acat_alias"]) ? html_specialchars($struct[$key]["acat_alias"]) : 'id='.$key.',0,0,1,0,0';


                        if($temp_tree[$key]) {
                                if($act_cat_id == $key) {
                                        $temp_menu .= "<li class=\"MenuItem_lvl_".$count."\" id=\"activeSection\"><a href=\"".$link."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n";
                                } else {
                                        $temp_menu .= "<li class=\"MenuItem_lvl_".$count."\"><a href=\"".$link."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n";
                                }
                                $temp_menu .= build_levels_list ($struct, $key, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to);
                        } else {
                                // Added this:
                                $temp_menu .= "<ul>\n";

                                $temp_menu .= "<li class=\"MenuItem_lvl_".$count."\"><a href=\"".$link."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n";

                                // Added this:
                                $temp_menu .= "</ul>\n";
                        }
                }
        }     
        return $temp_menu;
} 
bertalizer
Posts: 47
Joined: Sat 21. Feb 2004, 14:24
Location: Belgium

Post by bertalizer »

Thanks alot! But there's a mistake in your script :)
This is the corrected version (look for "// If we need nesting:"):

Code: Select all

function build_levels_list ($struct, $level, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to) { 
        // this returns the level structure based on given arrays 
        // it is special for browsing from root levels 
        $depth = sizeof($temp_tree)-$div; $count++; $depth2 = $depth-$count+2; 

        $temp_menu      = ""; 
        foreach($struct as $key => $value) { 
                if($_SESSION["frontend_user_in"] && $struct[$key]["acat_regonly"]) $struct[$key]["acat_regonly"] = 0; 
                if($struct[$key]["acat_struct"] == $level && $key && !$struct[$key]["acat_hidden"] && !$struct[$key]["acat_regonly"]) { 

                        $link_image_id  = "linkid".randpassword(6); 
                        $link_name_id   = ' name="'.$link_image_id.'" id="'.$link_image_id.'"'; 
                        $link                   = $link_to."?"; 
                        $link              .= ($struct[$key]["acat_alias"]) ? html_specialchars($struct[$key]["acat_alias"]) : 'id='.$key.',0,0,1,0,0'; 


                        if($temp_tree[$key]) { 
                                if($act_cat_id == $key) { 
										//If we need nesting:
										$temp_menu .= "<li class=\"MenuItem_lvl_".$count."\" id=\"activeSection\"><a href=\"".$link."\">".html_specialchars($struct[$key]["acat_name"])."</a>";
										//no nesting
                                        //$temp_menu .= "<li class=\"MenuItem_lvl_".$count."\" id=\"activeSection\"><a href=\"".$link."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n"; 
								} else { 
										
										$temp_menu .= "<li class=\"MenuItem_lvl_".$count."\"><a href=\"".$link."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n";
								} 
                                //If we need nesting:
								//check to see if there are any subitems for this item
									if(build_levels_list ($struct, $key, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to)!=""){
                                	//subitems: open a new <ul>
									$temp_menu .= "\n<ul>\n"; 								
                                	$temp_menu .= build_levels_list ($struct, $key, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to); 
                                	$temp_menu .= "</ul>\n</li>\n";  
									}
									else {
									//no subitems: close the <li>
									$temp_menu .= "</li>\n";  
									}
								// No nesting 
								//$temp_menu .= build_levels_list ($struct, $key, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to); 
						} else { 
								$temp_menu .= "<li class=\"MenuItem_lvl_".$count."\"><a href=\"".$link."\">".html_specialchars($struct[$key]["acat_name"])."</a></li>\n"; 
                        } 
                } 
        }      
        return $temp_menu; 
} 
Thanks,
B.
User avatar
Oliver Georgi
Site Admin
Posts: 9889
Joined: Fri 3. Oct 2003, 22:22
Contact:

Post by Oliver Georgi »

Would you post a link where I can see it - please ;-)

Oliver
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
rk
Posts: 162
Joined: Sat 24. Apr 2004, 23:48
Location: Hannover, Germany
Contact:

Post by rk »

Oliver Georgi wrote:Would you post a link where I can see it - please ;-)
The result?

her for example ;-)
http://www.magicpages.de/diereiniger/in ... trockeneis

that is a testpage, design isn't ready at the moment :lol:
Last edited by rk on Sun 28. Nov 2004, 13:03, edited 1 time in total.
Ralf
pixeldude
Posts: 9
Joined: Sat 22. May 2004, 01:39
Location: Lake of Constance / Austria
Contact:

Hmm, does not work...

Post by pixeldude »

When I try to append the code above to content.func.inc and front.func.inc I get this error:
Parse error: parse error, unexpected T_STRING in /home3/www/graf-rankweil/_md/aquariusrex.com/include/inc_front/front.func.inc.php on line 1932
:oops: I do not know how the classes for NAV_LIST_ALL are to be named in the CSS file, so nothing is defined there yet.
Is the Parse error due to this?

I have RC4 22.5. with GT MOD 2.
cmslover
Posts: 86
Joined: Wed 18. Feb 2004, 16:17
Location: USA, Georgia, Atlanta
Contact:

Post by cmslover »

Please see this CSS link http://www.phpwcms.de/forum/viewtopic.php?t=2150. It's really good. Hope Oliver will make it the menu css-driven in core. :P

Thanks all,
aCCuReRaS
Posts: 17
Joined: Wed 9. Jun 2004, 22:56

Post by aCCuReRaS »

this is a very nice function. thank you very much!

but I do have a question/problem.

how can I give the second level of the menu another class? I need this because i give my menu a layout without li tags, only css positioning

thanx in advance!
marco

Post by marco »

This is great! It opens up a lot of styling possibilities for the menu
just by modifying the CSS.

Is there any way to somehow make this into a tag so that we do not have to hack the wcms code for every releas?
aCCuReRaS
Posts: 17
Joined: Wed 9. Jun 2004, 22:56

Post by aCCuReRaS »

it should be integrated as a standard function imo.

css is the future for styling sites'
hetgasbedrijf
Posts: 4
Joined: Fri 9. Jul 2004, 14:29

Small Error?!

Post by hetgasbedrijf »

hi there David,

Thanks for your CSS Menu script. but i can't seem to get it to work.

Im getting the following error:

Parse error: parse error in /home/gasbedrijf/hetgasbedrijf.nl/html/clienten/cms/include/inc_front/front.func.inc.php on line 2183

Would you be so kind to help me out?

Regards,

Steven
aCCuReRaS
Posts: 17
Joined: Wed 9. Jun 2004, 22:56

Post by aCCuReRaS »

check that the code you've pasted in front.func.inc.php is correct, because a parse error is caused by an incomplete or illegal php syntax
jamba
Posts: 50
Joined: Fri 23. Apr 2004, 11:18
Location: UK
Contact:

Post by jamba »

Great tip! I've edited the original post to use <div></div> tags, which are a little more flexible than <ul> tags. I've also added a "title" attribute to each link so that you get what is effectively an "alt" attribute when you hover over each text link.

The following is the edited code that you could paste at the bottom of front.func.inc.php...

Code: Select all

// -------------------------------------------------------------

function css_list_all ($struct, $act_cat_id, $level, $nav_table_struct, $link_to="index.php") {
        // start with home directory for the listing = top nav structure
        // 1. Build the recursive tree for given actual article category ID

        // return the tree starting with given start_id (like breadcrumb)
        // if the $start_id = 0 then this stops because 0 = top level

        $level = intval($level);
        $start_id = $act_cat_id;

        while ($start_id) {
                $data[$start_id] = 1;
                $start_id                = $struct[$start_id]["acat_struct"];
        }
        $temp_tree = (sizeof($data)) ? array_reverse($data, 1) : false;

        foreach($struct as $key => $value) {
                if($struct[$key]["acat_struct"] == $act_cat_id && $key && !$struct[$key]["acat_hidden"]) $c++;
        }
        $c = (!$c) ? 1 : 0;

        //get depth of level
        $level_depth = 0; $start_level = $level;
        while ($start_level) {
                $start_level = $struct[$start_level]["acat_struct"];
                $level_depth++;
        }
        $temp_menu = build_levels_list ($struct, $level, $temp_tree, $act_cat_id, $nav_table_struct, $level_depth, $c, $link_to); //starts at root level
        return ($temp_menu) ? ("\n<div class=\"navList\">".$temp_menu."</div>\n") : "";
}


// -------------------------------------------------------------

function build_levels_list ($struct, $level, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to) {
        // this returns the level structure based on given arrays
        // it is special for browsing from root levels
        $depth = sizeof($temp_tree)-$div; $count++; $depth2 = $depth-$count+2;

        $temp_menu      = "";
        foreach($struct as $key => $value) {
                if($_SESSION["frontend_user_in"] && $struct[$key]["acat_regonly"]) $struct[$key]["acat_regonly"] = 0;
                if($struct[$key]["acat_struct"] == $level && $key && !$struct[$key]["acat_hidden"] && !$struct[$key]["acat_regonly"]) {

                        $link_image_id  = "linkid".randpassword(6);
                        $link_name_id   = ' name="'.$link_image_id.'" id="'.$link_image_id.'"';
                        $link                   = $link_to."?";
                        $link              .= ($struct[$key]["acat_alias"]) ? html_specialchars($struct[$key]["acat_alias"]) : 'id='.$key.',0,0,1,0,0';


                        if($temp_tree[$key]) {
                                if($act_cat_id == $key) {
                                        $temp_menu .= "<div class=\"MenuItem_lvl_".$count."\" id=\"activeSection\"><a href=\"".$link."\" title=\"".html_specialchars($struct[$key]["acat_name"])."\">".html_specialchars($struct[$key]["acat_name"])."</a></div>\n";
                                } else {
                                        $temp_menu .= "<div class=\"MenuItem_lvl_".$count."\"><a href=\"".$link."\" title=\"".html_specialchars($struct[$key]["acat_name"])."\">".html_specialchars($struct[$key]["acat_name"])."</a></div>\n";
                                }
                                $temp_menu .= build_levels_list ($struct, $key, $temp_tree, $act_cat_id, $nav_table_struct, $count, $div, $link_to);
                        } else {
                                $temp_menu .= "<div class=\"MenuItem_lvl_".$count."\"><a href=\"".$link."\" title=\"".html_specialchars($struct[$key]["acat_name"])."\">".html_specialchars($struct[$key]["acat_name"])."</a></div>\n";
                        }
                }
        }     
        return $temp_menu;
} 
Russ Back :D
Jamba Solutions
http://jambasolutions.com
Post Reply