http://www.ukpegasus.co.uk/this is a demo tree menu, im using for our company intranet.
if you click on the folder, the tree expands, displaying the contains of that folder.
the problem im having is, some file names are very long and they are aligned with the folder inside of the other filenames that gets displayed?
how do i fix this?
here is my css use:
body{overflow-x:auto;overf
low-y:auto
;white-spa
ce: nowrap;padding:0px;backgro
und-color:
#ffffff;co
lor: #666666;font-size:11px;fon
t-family:v
erdana;tex
t-decorati
on:none;sc
rollbar-3d
light-colo
r:#D1D7DC;
scrollbar-
arrow-colo
r:#1D4799;
scrollbar-
base-color
:#ffffff;s
crollbar-d
arkshadow-
color:#fff
fff;scroll
bar-face-c
olor:#eeee
ee;scrollb
ar-highlig
ht-color:#
ffffff;scr
ollbar-sha
dow-color:
#D1D7DC;}
.tree {font-size: 11px;line-height: 16px;font-family: verdana;margin-left:10px;p
adding: 0;}
.tree ul {margin: 0 0 0 10px;padding: 2px 0 0 0;}
.tree li {list-style-type: none;margin: 0 0 0 10px;padding: 2px 0 0 0;}
.tree a,.tree a:visited,.tree a:active {margin-left: 20px;margin-right: 20px;color: #1D4799;text-decoration: none;white-space: nowrap;}
.tree a:hover {margin-left: 20px;color: #888888;text-decoration: underline;white-space: nowrap;}
.section {background-image: url("files/media/folder.pn
g");backgr
ound-repea
t: no-repeat;background-posit
ion: top left;padding-top: 1px;padding-bottom: 1px;}
.section-open {background-image: url("files/media/folderope
n.png");ba
ckground-r
epeat: no-repeat;background-posit
ion: top left;padding-top: 1px;padding-bottom: 1px;}
.box {background-image: url("files/media/file.png"
);backgrou
nd-repeat:
no-repeat;background-posit
ion: top left;padding-top: 1px;padding-bottom: 1px;}
p{font-size: 11px;line-height: 16px;font-family: verdana;margin: 0;padding: 5;color:#1D4799;}
heres my php used to display tree contains...:
function folderView($array, $baseUrl)
{
if (!is_array($array))
return 'not-an-array';
$r = '';
$r .= '<ul class="tree">';
foreach ($array as $name => $value)
{
if (is_array($value))
{
if (count($value) > 0 | true)
{
$divid = md5($baseUrl.$name);
$dirname = htmlspecialchars(substr($n
ame, 0, strpos($name, '/')));
$dirtxt = $baseUrl.$name.'/descripti
on.txt';
$r .= "<li class='section' id='liid$divid'>";
$r .= '<a href="javascript:void(0);"
onClick="return swapDisplay(\''.$divid.'\'
);" title="Browse Directory">'.$dirname.'</a
>';
$r .= '<div id="'.$divid.'" style="display:none;">';
$r .= folderView($value, $baseUrl.$name);
$r .= '</div>';
$r .= '</li>';
}
}
else
{
$file = $baseUrl.$value;
substr($file, 0, strpos($file, '/'));
$txt = $baseUrl.preg_replace('/\.
(pdf|vsd)$
/i', '.txt', $value);
$title = substr($value, 0, strrpos($value, '.'));
$onclick = "loadFile('".jsSafeString(
$file)."',
"."'".jsSafeString($txt)."
', "."'".jsSafeString($title)
."');";
$r .= '<li class="box">';
$r .= '<a href="javascript:void(0);"
onClick="" title="Browse Directory">'.htmlspecialch
ars($title
).'</a>';
$r .= '</li>';
}
}
$r .= '</ul>';
return $r;
}
