For your own sake: please backup all files you are about to edit, just in case I made a mistake, or you make a mistake pasting.
1. Download ddaccordion.js from this page: http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm
2. Add contents of ddaccordion.js to cute.js, found in cnr/skins/cute.js
3. Open default.skin.php (or the skin file of the skin you are using), find
- Code: Select all
<script type="text/javascript" src="skins/cute.js"></script>
Add above:
- Code: Select all
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
Add below:
- Code: Select all
<script type="text/javascript">
ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
Add below this:
- Code: Select all
<style type="text/css">
.arrowlistmenu { width: 200px; }
.arrowlistmenu .menuheader{ color: #414E5A;border:0;border-right: 5px solid #eee;background: #eee;padding: 5px;padding-left: 20px;cursor: hand;cursor: pointer; }
.arrowlistmenu .menuheader:hover { background: #414E5A;color: #fff;margin-bottom:0; }
.arrowlistmenu .openheader { /*CSS class to apply to expandable header when it's expanded*/background: #414E5A;color: #fff; }
.arrowlistmenu .menuheader-checkbox { margin-bottom: -20px; }
.arrowlistmenu .menuheader-checkbox input { vertical-align: text-top; }
.arrowlistmenu ul{ list-style: none;margin: 0;padding: 0;margin-bottom: 0;background: #fff;padding-left: 10px;margin-top:5px;border-bottom:0;border-left: 1px solid #ccc;}
#mainul { border:0;padding:0; }
.arrowlistmenu ul li{ padding: 5px;padding-left: 0;padding-right:0; }
</style>
4. Open cnr/inc/functions.inc.php
Find:
- Code: Select all
////////////////////////////////////////////////////////
// Function: category_get_tree
// Description: ?????????? ?????? ?????????
function category_get_tree($prefix = '', $tpl = '{name}', $no_prefix = true, $id = 0, $level = 0){
global $sql, $PHP_SELF;
static $johnny_left_teat;
$level++;
foreach ($sql->select(array('table' => 'categories', 'where' => array("parent = $id"), 'orderby' => array('id', 'ASC'))) as $row){
$find = array('/{id}/i', '/{name}/i', '/{url}/i', '/{icon}/i', '/{template}/i', '/{prefix}/i', '/\[php\](.*?)\[\/php\]/ie');
$repl = array($row['id'], $row['name'], $row['url'], ($row['icon'] ? '<img src="'.$row['icon'].'" alt="'.$row['icon'].'" border="0" align="absmiddle">' : ''), $row['template'], (($row['parent'] or !$no_prefix) ? $prefix : ''), '\\1');
$johnny_left_teat .= ($no_prefix ? preg_replace('/('.$prefix.'{1})$/i', '', str_repeat($prefix, $level)) : str_repeat($prefix, $level));
$johnny_left_teat .= preg_replace($find, $repl, $tpl);
category_get_tree($prefix, $tpl, $no_prefix, $row['id'], $level);
}
return $johnny_left_teat;
}
Add below
- Code: Select all
////////////////////////////////////////////////////////
// Function: category_get_tree2
// Description: Make accordion
function category_get_tree2($prefix = '', $tpl = '{name}', $no_prefix = true, $id = 0, $level = 0){
global $sql, $PHP_SELF;
static $johnny_left_teat;
$level++;
foreach ($sql->select(array('table' => 'categories', 'where' => array("parent = $id"), 'orderby' => array('id', 'ASC'))) as $row){
$find = array('/{id}/i', '/{name}/i', '/{url}/i', '/{icon}/i', '/{template}/i', '/{prefix}/i', '/\[php\](.*?)\[\/php\]/ie');
$repl = array($row['id'], $row['name'], $row['url'], ($row['icon'] ? '<img src="'.$row['icon'].'" alt="'.$row['icon'].'" border="0" align="absmiddle">' : ''), $row['template'], (($row['parent'] or !$no_prefix) ? $prefix : ''), '\\1');
$perv = category_get_children($row['parent']);
$siblings = strrev($perv); // get siblings and reverse
// get last sibling
$i = 0;
$latestSiblingRev = "";
while($siblings{$i} != ",") {
$latestSiblingRev .= $siblings{$i};
$i += 1;
}
// last sibling
$latestSibling = strrev($latestSiblingRev);
// if parent, make expand
if(category_get_children($row['id']) != $row['id']) {
$johnny_left_teat .= '<li><div class="menuheader-checkbox">' . preg_replace($find, $repl, $tpl) . '</div><div class="menuheader expandable"> </div><ul class="categoryitems">';
}
// if last sibling, close accordion
else if($latestSibling == $row['id'] && $level == 1) {
$johnny_left_teat .= '<li>' . preg_replace($find, $repl, $tpl) . '</li></ul>';
}
else if($latestSibling == $row['id']) {
$johnny_left_teat .= '<li>' . preg_replace($find, $repl, $tpl) . '</li></ul></li>';
}
else {
$johnny_left_teat .= '<li>' . preg_replace($find, $repl, $tpl) . '</li>';
}
category_get_tree2($prefix, $tpl, $no_prefix, $row['id'], $level);
}
return $johnny_left_teat;
}
5. Open plugins.inc.php
Find
- Code: Select all
if ($category = category_get_tree(' ', '<label for="cat{id}"><input type="checkbox" [php]multicats({id})[/php] name="cat[{id}]" id="cat{id}")"> {name}</label><br />')){
return '<fieldset><legend>'.$echo['category'].'</legend>'.$category.'</fieldset>';
}
Replace with
- Code: Select all
if ($category = category_get_tree2('', '<label for="cat{id}"><input type="checkbox" [php]multicats({id})[/php] name="cat[{id}]" id="cat{id}" />{name}</label>')){
return '<fieldset><legend>'.$echo['category'].'</legend><div class="arrowlistmenu" style="width: 200px;"><ul id="mainul">'.$category.'</div></fieldset>';
}
If successfull, enjoy!
If not, restore backup, and try again!
Since this is extracted from a skin I'm making, I might have made some mistakes.
