This question already has answers here:
HTML tree full width hover effect
(3 answers)
Closed 6 years ago.
I need to create a tree structure using html and css.
Structure should be like this.
Current css and html for this:
ul{
list-style: none;
}
ul li{
background: #F4F4F4;
}
li.active{
background: #B7E9FB!important;
}
<ul>
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.1</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.2</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.3</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.4</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder active">
<a href="javascript:void(0);">
<span>TEST1.5</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.6</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
This structure can have n number of nodes.
Problem:
nested elements width is less than root element width because of left padding (applied padding to display hierarchy), so on hover background color changes only for that particular width.
I want to make width of all li element to 100% of root element so on active background color will change for 100% width of display area, but need to maintain hierarchy.
I would like to have css solution for it.
Thanks in advance.
You can change your CSS like this:
ul{
list-style: none;
}
ul li{
background: #F4F4F4;
}
ul li a{
display:block;
}
li.active a{
background: #B7E9FB!important;
}
Related
This question already has answers here:
CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]
(2 answers)
Closed 3 years ago.
<ul>
<li class="class1">
<div class="custom">text1</div>
</li>
<li class="class1">
<div class="custom">text2</div>
</li>
<li class="class1">
<div class="custom">text3</div>
</li>
<li class="class1">
<div>text4</div>
</li>
<li class="class1">
<div>text5</div>
</li>
</ul>
How do I select last div with class="custom"? I have to add border-bottom to div with text3. I tried:
.class1 .custom:last-of-type {
border-bottom: 1px solid;
}
...But then border-bottom is added to all div's with class="custom".
I need CSS solution only, no JS. Also there could be any amount of <li> so I can't use :nth-child().
Update:
This layout is generated from Prime NG component <p-autocomplete>
The code is:
<p-autocomplete ....>
<ng-template let-item pTemplate="item">
<div [ngClass]="{'custom'}: item.isCustom">
{{item.name}}
</div>
</ng-template>
</p-autocomplete>
I agree with the comments saying that a pure-CSS solution is not existing, because it is not possible to aggregate special selectors like :last-of-type as for example (.class1 .custom):last-of-type (not working).
What i propose is a simple JQuery solution:
$(".class1 .custom").last().parents(".class1").addClass("custom2");
.custom2{
border-bottom: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="class1">
<div class="custom">text1</div>
</li>
<li class="class1">
<div class="custom">text2</div>
</li>
<li class="class1">
<div class="custom">text3</div>
</li>
<li class="class1">
<div>text4</div>
</li>
<li class="class1">
<div>text5</div>
</li>
</ul>
I'm not proud of this, but it's CSS only and it works.
.class1 .custom {
border-bottom: 1px solid;
position: relative;
}
.class1 .custom::before {
display: block;
content: '';
position: absolute;
border-top: 1px solid white;
width: 100%;
top: -1px;
}
<ul>
<li class="class1">
<div class="custom">text1</div>
</li>
<li class="class1">
<div class="custom">text2</div>
</li>
<li class="class1">
<div class="custom">text3</div>
</li>
<li class="class1">
<div>text4</div>
</li>
<li class="class1">
<div>text5</div>
</li>
</ul>
I have a vertical navbar menu with 2 blocks.
First is nav with icons, second is text of menu.
They have a different background colors. How i can make one background color for two active nav blocks?
design of menu
<div class="menu__icons">
<ul class="menu__list">
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
<li>
<a class="menu__item" href="#"><img src="http://via.placeholder.com/50" alt=""></a>
</li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item" href="#">First</a></li>
<li><a class="menu__item" href="#">Second</a></li>
<li><a class="menu__item" href="#">Third</a></li>
<li><a class="menu__item" href="#">Fourth</a></li>
</ul>
</div>
</div>
https://jsfiddle.net/levan563/1g5ucmwq/2/
Well basically if you want to toggle .active and you don't want two separate markup of list.
Notice that font-awesome is for demonstration purposes only.
.menu__item {
width: 250px;
height: 50px;
text-align: left;
}
.menu__item.active {
background-color: #e9ebfd;
}
.menu__item.active .menu__icon {
background-color: #e9ebfd;
border-left: 4px solid #2c39ec;
}
.menu__item.active .menu__title {
background-color: #e9ebfd;
}
.menu__item a:hover {
text-decoration: none;
}
.menu__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #fafafa;
color: #2c39ec;
}
.menu__title {
display: inline-block;
padding-left: 20px;
color: #777777;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navigation-menu">
<ul class="menu__list list-unstyled">
<li class="menu__item active">
<a href="#">
<div class="menu__icon">
<i class="fa fa-tachometer-alt"></i>
</div>
<div class="menu__title">Main Dashboard</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-user"></i>
</div>
<div class="menu__title">Profile</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-bell"></i>
</div>
<div class="menu__title">Finances</div>
</a>
</li>
<li class="menu__item">
<a href="#">
<div class="menu__icon">
<i class="fa fa-calendar"></i>
</div>
<div class="menu__title">Titles</div>
</a>
</li>
</ul>
</nav>
Related Fiddle https://jsfiddle.net/mhrabiee/dojL9get/28/
As I understand take active class for both block's li and try to use font, svg icon or transparent background images instead of block images
.menu__list .active {
background-color: red;
}
<div class="menu__icons">
<ul class="menu__list">
<li><a class="menu__item active" href="#">
<img src="https://img.icons8.com/material/24/000000/tailoring-for-men.png">
</a></li>
</ul>
</div>
<div class="menu__text">
<ul class="menu__list">
<li><a class="menu__item active" href="#">First</a></li>
</ul>
</div>
Its doable using jQuery.
Assuming you have same number of list items in both blocks,
$(function(){
$('.menu__list li').on('click', function() {
var idx = $(this).index();
$('.menu__list li').removeClass('active');
$('.menu__list li:nth-child(' + idx + ')').addClass('active');
});
});
also add .active class in css and give needed style to li items also
.active{
/**your style**/
}
.active > a{
}
.active img{
}
I want to change the css of parent on hover of Child element.
<ul id="main-menu">
<li>
<a href="#">
<i class="fa fa-building-o" aria-hidden="true"></i>
Private Limited
<i class="fa fa-caret-down"></i>
</a>
<ul class="submenu">
<li>Company</li>
<li>Contact</li>
<li>Industry</li>
</ul>
</li></ ul>
What i want is if i hover on li of submenu, li of main-menu get highlighted.
As already mentioned there is no parent selector but if you recognise that you are already hovering over the parent you can achieve what you want.
A rough example:
#main-menu > li:hover > a
{
background-color: #F00;
}
#main-menu > li > .submenu > li:hover
{
background-color:#00F;
}
<ul id="main-menu">
<li>
<a href="#">
<i class="fa fa-building-o" aria-hidden="true"></i>
Private Limited
<i class="fa fa-caret-down"></i>
</a>
<ul class="submenu">
<li>Company
</li>
<li>Contact
</li>
<li>Industry
</li>
</ul>
</li>
</ul>
As other posts say there is no parent selector.
This is how it should work:
li:has(> i:hover) { /* styles to apply to the li tag */ }
What this does is check if li has a i with :hover state in it. If that's the case it applies the css. Unfortunately this is not supported yet..
There is currently no way to select the parent of an element in CSS.
If you want trigger a child element with a child element use this.
.triggerDiv{
display:none;
}
.child:hover ~.triggerDiv {
display:block
}
<div class="main">
<div class="parent">
<div class="child">
<p>Hello</p>
</div>
<div class="triggerDiv">
<p>I'm Here</p>
</div>
</div>
</div>
Here you can go..
For Apply CSS..
$("#main-menu li").mouseover(function()
{
$("#main-menu a:eq(0)").css({'color':'blue','font-weight':'bold'});
});
For Remove CSS..
$("#main-menu li").mouseout(function()
{
$("#main-menu a:eq(0)").removeAttr("style");
});
[link]
(https://jsfiddle.net/aj23whnb/)
I am using Bootstrap with Hyde CSS and I am having difficult doing the following:
Where the icon (image) is in the menu, I want to display the text right next to it, but I can't seem to figure out how to do with using the
<ul>
<li></li>
</ul>
Here is what I currently have:
<ul class="nav navbar-nav">
<li class="home2">
<a href="/">
<img class="first" src="/images/home-icon.png">
Home
</a>
</li>
</ul>
Which is producing the following:
Any ideas?
I guess that the comment made by Aeolingamenfel is right. I made a sample in jsfiddle where you can see the display in action.
JSFiddle Sample
<style>
.homeWrong > a > img{
display: block;
}
.homeRight > a > img{
display: inline;
}
</style>
<ul class="nav navbar-nav">
<li class="homeWrong">
<a href="/">
<img class="first" src="/images/home-icon.png">
Home
</a>
</li>
<li class="homeRight">
<a href="/">
<img class="first" src="/images/home-icon.png">
Home
</a>
</li>
</ul>
I have a solution. Just use this css below:
.home2 img{
display:inline-block;
vertical-align:middle; //You can use the exact amount like ..px;
}
I am using Twitter Breadcrumb in my html page. But the breadcrumb keeps appearing in a new line. How can I make it come next to the glyphicon?
This is the div section:
<div class="col-md-3 well pre-scrollable scroll-pane">
<span class="glyphicon glyphicon-folder-close"></span>
<ul class="breadcrumb list-unstyled">
<li ng-repeat="crumb in breadcrumb track by $index">
{{crumb}}
</li>
</ul>
<hr>
<p>
<ul ng-repeat="node in nodes" class="list-unstyled">
<li ng-repeat="value in node">{{value}}</li>
</ul>
</p>
</div>
How it looks now:
There are unwanted spaces in the top and bottom. But I want the list to appear next to the glyphicon as if they are in a new line.
Just add some CSS inline. <ul> elements are automatically block-level elements. I believe that Bootstrap automatically adds glyphicons to be display: inline-block as well so it can apply with and margins to the icon.
Fiddle for you
span.glyphicon-folder-close,
ul.breadcrumb {
display: inline;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<span class="glyphicon glyphicon-folder-close"></span>
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
.....
.....
Addition:
Here's another way of doing it. Wrap the span and ul in it's own separate container so they float together. You have to remove the padding for the ul.breadcrumb as it's auto applied.
Add containers fiddle
ul.breadcrumb {
padding: 0;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<div class="col-xs-1">
<span class="glyphicon glyphicon-folder-close"></span>
</div>
<div class="col-xs-11">
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
</div>
....
....
Addition #3 (worked best for OP)
Here's an even better way. Just use psuedo selector for the breadcrumb and remove the span altogether. Also remove the <hr> tag and add border to the breadcrumb itself
Fiddle w/ psuedo
ul.breadcrumb {
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
ul.breadcrumb:before {
position: absolute;
content: '\e117';
font-family: 'Glyphicons Halflings';
left: -10px;
top: 8px;
width: 20px;
height: 20px;
}
<div class="col-md-3 well pre-scrollable scroll-pane">
<ul class="breadcrumb list-unstyled">
<li>node1
</li>
<li>node2
</li>
<li>node3
</li>
<li>node4
</li>
</li>
</ul>
....
....
It may be due to the parent div width is not enough for show all.