I'm sure there may be better ways, but this is how I did something
similar. I have more than one button, but in my example I'll just
show one.
I exclude some categories like this.
#foreach ($cat in $model.weblog.getWeblogCategory
("nil").weblogCategories)
#if ( $cat.name != "Transactions" )
<td class=btn><a href="$url.category($cat.path)"
title="$cat.description" class=btn>$cat.name</a></td><td
class=sep> | </td>
#end
#end
I then hardcode the excluded categories.
</tr></table></td><td style="overflow: hidden;"class=right
align=right ><table cellpadding=0 cellspacing=0 border=0
class=topbart1><tr
><td class=sep>|</td><td style="white-space: nowrap;"><div class=btn
id=contentbtn1 >Transactions</div></td></tr>
The rollovers for these special buttons are handled in the css and
javascript:
I inject some javascript to handle the actions on these buttons:
</body>
<script>UpdateRollerContext();</script>
</html>
This is in a <script> clause in my head section.
function High(node,cls) {
if( (!node) || node.type) node = this;
if(!cls) cls= "over ";
if(!node.className) node.className = cls;
else if( node.className.indexOf(cls) == -1) node.className = cls +
node.className;
}
function Low(node,cls) {
if( (!node) || node.type) node = this;
if(!cls) cls= "over ";
var cn = node.className;
var idx = cn ? cn.indexOf(cls) : -1;
if( idx != -1 ) node.className = cn.substring(0,idx)+cn.substring
(idx+cls.length);
}
function UpdateRollerContext() {
var btn1 = document.getElementById('contentbtn1');
if(btn1) {
val = btn1.innerHTML;
btn1.onmouseover = function () {High(btn1)};
btn1.onmouseout = function () {Low(btn1)};
btn1.onclick = function () {window.location = "Your URL Here"};
btn1.title = "Transaction Articles";
}
}
Here is the css added to styles/default.css:
.btn {
cursor: pointer;
color: #2222e0;
font-family: Arial,helvetica,geneva,swiss,sunsans-regular;
font-size: 14px;
text-decoration: none;
}
#contentbtn1 {
cursor: pointer;
padding: 2px 5px 2px 5px;
color:#FFE300;
font-weight: bold;
}
#contentbtn1.over {
color: #0B1260;
}
Regards,
Dave
On Apr 9, 2008, at 11:30 AM, slowhome wrote:
I'm trying to create a custom navigation menu that will display an
"on" and
"off" state for selected buttons.
Because the navigation menu includes links to other sections in other
webapps and also because the items in the menu are in a particular
order, it
can't be generated using the #foreach ($cat in
$model.weblog.categories)
statement. It has to be hard coded.
I tried a few things in the template guides and looked at other Roller
themes but wasn't able to get very far.
In a nutshell, I would like it to do something like this:
#if ($cat.name == "Java")
Java Button On State
#elseif
Java Button Off State
#end
Thanks for any help.
Eric
--
View this message in context: http://www.nabble.com/Custom-
Navigation-tp16590546s12275p16590546.html
Sent from the Roller - User mailing list archive at Nabble.com.
