I am looking to create a responsive sidebar as a navigation for my page. I would like the sidebar to have selected and hover properties. Here is what I am trying to get the selected option to appear as:
Sidebar Image: Selected (active) option
I want to have the image the full height as the background when selected like it is covering the left side of the background itself.
How could I go about this? So far this is the closest I have got to what I want:
.sidebarNav {
background-color: white;
padding: 10px 10px;
border-radius: 5px;
}
.sidebarNav li {
padding: 15px 10px;
margin: 5px;
}
.sidebarNav li img {
transition: transform .7s ease-in-out;
height: 50px;
width: 50px;
}
.sidebarNav li img:hover {
transform: rotate(360deg);
}
.sidebarNav li:hover {
background-color: #4D5BBE;
cursor: pointer;
border-radius: 10px;
}
.sidebarNav li:hover img {
transform: rotate(360deg);
}
.sidebarNav li:hover>div {
display: block;
}
.sidebarNav li .active {
background-color: #417fbd;
padding: 5px 10px !important;
}
.sidebarNav li:active a {
color: white;
}
.sidebarNav a {
color:black;
text-decoration: none;
padding: 0 20px;
}
.sidebarNav li:hover a {
color: white;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="sidebarNav nav navbar-nav">
<li class="active">
<span><img src="https://cdn-icons-png.flaticon.com/512/287/287221.png?w=360"/></span><a href="#"> Ranks</a>
</li>
<li><a href="">Rank Upgrades</a></li>
<li><a href="">PokeBoxes</a></li>
<li><a href="">Crate Keys</a></li>
<li><a href="">Kits</a></li>
<li><a href="">Plushies</a></li>
<li><a href="">Commands</a></li>
<li><a href="">PokePass</a></li>
<li><a href="">Miscellaneous</a></li>
<li><a href="">Shiny Party</a></li>
</ul>I think you can change the HTMl, so for example you can make "rank" link a block element and apply background only to that element, and then just move the "img" to the right with relative/absolute position to overlap the link.
Also you can try to use linear-gradient to make such a background without changes to HTML.
.sidebarNav li.active {
background: linear-gradient(90deg, transparent 35px, #417fbd 35px);
padding: 0px 10px;
border-radius: 10px;
}
Example:
.sidebarNav {
background-color: white;
padding: 10px 10px;
border-radius: 5px;
}
.sidebarNav li {
padding: 15px 10px;
margin: 5px;
}
.sidebarNav li img {
transition: transform .7s ease-in-out;
height: 50px;
width: 50px;
}
.sidebarNav li img:hover {
transform: rotate(360deg);
}
.sidebarNav li:hover {
background-color: #4D5BBE;
cursor: pointer;
border-radius: 10px;
}
.sidebarNav li:hover img {
transform: rotate(360deg);
}
.sidebarNav li:hover>div {
display: block;
}
.sidebarNav li.active {
background: linear-gradient(90deg, transparent 35px, #417fbd 35px);
padding: 0px 10px;
border-radius: 10px;
}
.sidebarNav li:active a {
color: white;
}
.sidebarNav a {
color:black;
text-decoration: none;
padding: 0 20px;
}
.sidebarNav li:hover a {
color: white;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="sidebarNav nav navbar-nav">
<li class="active">
<span><img src="https://cdn-icons-png.flaticon.com/512/287/287221.png?w=360"/></span><a href="#"> Ranks</a>
</li>
<li><a href="">Rank Upgrades</a></li>
<li><a href="">PokeBoxes</a></li>
<li><a href="">Crate Keys</a></li>
<li><a href="">Kits</a></li>
<li><a href="">Plushies</a></li>
<li><a href="">Commands</a></li>
<li><a href="">PokePass</a></li>
<li><a href="">Miscellaneous</a></li>
<li><a href="">Shiny Party</a></li>
</ul>Following up on Telman's answer...
I would like to remove any properties on the .active li and move them to the li I am currently hovering over.
Picture of ".active" nav option
For example if I were to hover over "Rank Upgrades" below the ".active" li it would remove the background and image, and move it to the current li I am hovering over.
How could this be done?
