Chapter 5: Building a Shopping Cart
135
Knowing what the structure is like, changing your navigation view is easy. Loop through the list of
categories to the appropriate level. If you see a name, print it with the proper ID. If you see children,
descend one level and print the IDs and names you encounter there.if (count($navlist)){
echo “ < ul > ”;
foreach ($navlist as $key = > $list){
foreach ($list as $topkey = > $toplist){
echo “ < li class=’cat’ > ”;
echo anchor(“welcome/cat/$topkey”,$toplist[‘name’]);
echo “ < /li > \n”;
if (count($toplist[‘children’])){
foreach ($toplist[‘children’] as $subkey = > $subname){
echo “\n < li class=’subcat’ > ”;
echo anchor(“welcome/cat/$subkey”,$subname);
echo “ < /li > ”;
}
}
}
}
echo “ < /ul > \n”;
}Now that all the hard work has been done in the model and view, all you have to do is update your CSS.
In the view, you specified a class of cat for the top - level categories and a class of subcat for the
subcategories. Since the entire < ul > is contained within the nav div, you can create some nice effects
easily within your CSS file.
First things first: add a border around the existing #nav rule. You can use the same color as the
background on your global nav component:
#nav{
float:left;
width:135px;
height:auto;
border:2px solid #31363E;
}When you setup the < ul > for the nav div, remove all margin, padding, and list styling. You don ’ t want
any bullets to show! You ’ re not really building a bullet list. You ’ re just using the < ul > list to build a
navigation list. (This time, it ’ s vertical, but the idea is the same as with the horizontal navigation.)#nav ul{
margin: 0;
padding: 0;
list-style: none;
}