Question

0

84

Views

Complex Sidebar with Bootstrap 5

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>

4 months ago · Santiago Trujillo

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-21T16:32:02.212Z

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>

Answer 2 · 2022-07-21T16:32:02.220Z

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?