Html Tree Full Width Hover Effect
I have an html tree which is mostly consisting of nested unordered lists. I need to create a full width hover effect for each leaf, something similar with windows file menu tree ho
Solution 1:
I've had the same problem as you, after some trying and testing I came up with this. It allows you to add scrollbars and put the padding on the inner .
HTML
<divclass="tree"style="width:256px; height:256px;"><div><ul><li><div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div></li><li><div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div><ul><li><div><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></div></li></ul></li></ul></div></div></div>
CSS
.tree {
position:relative;
display: block;
overflow: auto;
border: 1px solid #8B9097;
background-color: #fff;
margin-left:200px;
/*! margin-left: just for testing */
}
.tree > div {
display:block;
position:absolute;
min-width:100%;
}
.tree * {
white-space: nowrap;
}
.treeul {
margin:0;
list-style-type: none;
padding-left: 20px;
}
.treeli > div {
position:relative;
margin-left:-100000px;
padding-left:100000px;
border: 1px solid transparent;
display:block;
}
.treelidiv:hover {
background-color: #B6BABF;
color: #fff;
}
.treeli.collapsed > ul {
display:none;
}
.treeli.expanded > ul {
display:inherit;
}
Solution 2:
A solution changing only the part of the CSS under "hack". I assume that at least you can change that
CSS
/*Full width hack*/.tree.fullWidth { overflow: hidden; }
.tree.fullWidthli.item.overlay { right: -8px; width: 314px; left: auto !important; }
If the tree has a variable width, this is better:
.tree.fullWidthli.item.overlay {
right: -8px;
width: 300px;
padding-left: 14px;
left: auto !important;
}
It works exactly like the other version, but now the width is the same that the tree width, so the Javascript doesn't need to set a magic width (that you don't know from where it comes:
Solution 3:
I faced a similar situation few days ago.
Heres 1 way to approach it ( assuming you've got full control over the HTML )
HTML
<divclass="tree relative"><ul><li><divclass="item"><divclass="overlay"></div><spanclass="relative">Node 1</span></div><ul><li><divclass="item selected"><divclass="overlay"></div><spanclass="relative">Node 2</span></div></li></ul></li></ul></div>
CSS
.relative {
position:relative;
}
.tree {
width: 300px;
border: 1px solid #000;
padding: 10px;
margin-bottom: 15px;
}
.treeul { margin: 0; padding: 0; list-style-type: none; }
.treeulli { padding-left: 16px; }
/*.tree li .item { position: relative; }*/.treeli.item.overlay {
position: absolute;
left: 0;
right:0;
/*
top: 0;
width: 100%;
height: 100%;
*/height:26px; /* well, thats a bummer */background-color: #C5E7E6;
display: none;
border: 1px solid red;
}
.treeli.item:hover.overlay { display: block; }
Post a Comment for "Html Tree Full Width Hover Effect"