Professional CodeIgniter, Thomas Myer
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;
}
c05.indd 135
c05.indd 135
6/10/08 5:35:25 PM
6/10/08 5:35:25 PM