菜单栏活动类Smarty模板

Question

I want the menu bar to switch the active class depending on the page it is on instead of only showing home as active, still very new to this thanks =) ( my site has smarty template )

<div id='cssmenu'>
<ul>
<li class='active'><a href='http://www.example.com/tour/'><span>Home</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=4'><span>Photos</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=5'><span>Videos</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=59'><span>Webcam</span></a></li>
<li><a href='http://www.example.com/tour/category.php?id=58'><span>Archives</span></a></li>

<li><a href='http://www.example.com/tour/pages.php?id=donate'><span>Donate</span></a></li>
<li><a href='http://www.example.com/tour/pages.php?id=join'><span style="color:#EF355C; font-size:20px">JOIN NOW</span></a></li>
<li><a href='http://www.example.com/members/'><span style="font-size:18px">Member Login&nbsp;&nbsp;&nbsp;<img src="/tour/images/locky.png"height="22px" width="22px"></span></a>  </li>

This is my menu css, not entirely sure you guys might need this but here it is.

#cssmenu {
background: #FCB9C5;
width: auto;
text-align: center;
}
#cssmenu ul {
list-style: none;
 margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
color: #000;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 16px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #fff;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #333333;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #fff;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
display: block;
}
 #cssmenu.align-right li:first-child a:after {
 display: none;
 }
 @media screen and (max-width: 768px) {
 #cssmenu ul li {
 float: none;
 display: block;
 }
 #cssmenu ul li a {
 width: 100%;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 border-bottom: 1px solid #fb998c;
 }
 #cssmenu ul li.last > a,
 #cssmenu ul li:last-child > a {
 border: 0;
 }
 #cssmenu ul li a:after {
 display: none;
 }
 #cssmenu ul li a:before {
 display: none;
 }
 }

Answer 1

To apply the 'active' class to a different < li > element you should perform a server side changing.

Please take a look at the following page: http://www.smarty.net/forums/viewtopic.php?p=60336

Answer 2

What you need is to assign in Smarty selected page.

For example:

$smarty->assign('selected_page', 'tour/category.php?id=4');

In PHP you could use for this $_SERVER['REQUEST_URI'] variable, probably something like this:

$smarty->assign('selected_page', substr($_SERVER['REQUEST_URI'],1));

should work fine.

And then in Smarty:

<div id='cssmenu'>
<ul>
<li {if $selected_page eq 'tour/'}class='active'{/if}><a href='http://www.example.com/tour/'><span>Home</span></a></li>
<li {if $selected_page eq 'tour/category.php?id='}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=4'><span>Photos</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=5'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=5'><span>Videos</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=59'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=59'><span>Webcam</span></a></li>
<li {if $selected_page eq 'tour/category.php?id=58'}class='active'{/if}><a href='http://www.example.com/tour/category.php?id=58'><span>Archives</span></a></li>

<li {if $selected_page eq 'tour/pages.php?id=donate'}class='active'{/if}><a href='http://www.example.com/tour/pages.php?id=donate'><span>Donate</span></a></li>
<li {if $selected_page eq 'tour/pages.php?id=join'}class='active'{/if}><a href='http://www.example.com/tour/pages.php?id=join'><span style="color:#EF355C; font-size:20px">JOIN NOW</span></a></li>
<li {if $selected_page eq 'members/'}class='active'{/if}><a href='http://www.example.com/members/'><span style="font-size:18px">Member Login&nbsp;&nbsp;&nbsp;<img src="/tour/images/locky.png"height="22px" width="22px"></span></a>  </li>

EDIT Of course it would be much better if you put those menu data into array in PHP using url and anchor text. Then in Smarty you could use loop to display menu and you wouldn't need to write urls twice when you compare $selected_page with link url