Sophisticated Sidebar Design using Bootstrap 5

Looking to design a responsive sidebar for navigation on my page, with selected and hover properties. Visualizing the selected option to appear like this:

Selected (active) option in sidebar

The goal is to have the image cover the left side of the background when selected. Here's what I've tried so far:

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdbda6a1a6a0b3a292e7fce0fce2ffb0b7a6b3e3">[email protected]</a>/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>

Expanding on Telman's response...

Wanting to shift active li properties to the currently hovered li, removing them from the .active li.

Example of .active nav option

If hovering over "Rank Upgrades," for instance, it should take on the background and image instead of the current .active li. How can this be achieved?

javascripthtmlcss

Answer №1

In my opinion, adjusting the HTML structure can be a solution. For instance, converting the "rank" link into a block element and applying the background only to that specific element. Then, you could use relative/absolute positioning to move the "img" to the right and make it overlap the link.

Alternatively, you could experiment with using a linear-gradient for creating the desired background effect without modifying the HTML content.

.sidebarNav li.active {
    background: linear-gradient(90deg, transparent 35px, #417fbd 35px);
    padding: 0px 10px;
    border-radius: 10px;
}

For 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9c8d98e49db291828fc99b7e89e3">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with disabling dates on jQuery datepicker

After spending several days trying to solve this issue, I've decided to seek help. The problem at hand is disabling dates in my bootstrap datepicker using the following HTML code: <head> <!-- Required meta tags --> <meta charset="utf-8 ...

javascriptphpjquerybootstrap-4bootstrap-datepicker

Modify the button's color based on a separate column within the table

Currently, I am implementing Datatables along with X-editable and including some bootstrap buttons within a table. My objective is to change the color of the button in the 'Validated' column to green when the user updates the editable 'Statu ...

javascriptjquerytwitter-bootstrapdatatablesx-editable

Struggling to connect with PouchDB within my HTML-based Web application

I am looking to integrate pouchDB into my WebApp so that upon clicking a button, the data from a JSON file will be saved to pouchDB. In the initial stage in my index.html, I included the following: <script type="module" src="pouchdb/packa ...

javascripthtmlnode.jscouchdbpouchdb

How to Delete Decimal Points from a String Using Regular Expressions

I am searching for a way in JavaScript, such as REGEX, to eliminate decimal numbers from a string. Here is an example input: Mazda 6 2.0 Skyactiv-G Wagon 2018 - Startstop.sk - TEST Mercedes C63 AMG Sound REVVING 6,3l V8 And here is the expected output: M ...

javascriptnode.jsregex

After utilizing the function, the forward and back arrows are no longer visible

After setting up my slideshow, I encountered an issue where clicking the next or previous buttons caused them to shrink down and turn into small grey boxes. Has anyone experienced this before? This relates to PHP/HTML if ($_SERVER['REQUEST_METHOD&ap ...

javascriptphpjqueryhtmlcss

Achieving Content Centering in React Material UI: A Guide to Aligning to the Middle of the Page

Currently, the button is displaying in the top left corner. How can I move the button to the center of the page? import {Button} from '@mui/material'; function App() { return ( <Button variant="contained">Hello World</ ...

cssreactjsmaterial-ui

Looping through components using the render template syntax in Vue3

Below is my Vue3 code snippet: <template> {{click}} <ol> <li v-for="item in items" :key="item" v-html="item"></li> </ol> </template> <script setup> const click = ref(); const items = ...

javascriptvue.jsvuejs3

PHP: A guide on validating textboxes with jQuery AJAX

How can I use jQuery AJAX to validate a textbox on focusout? The validation process includes: Sending the value to a PHP page for server-side validation Displaying an alert message based on the validation result I have only impl ...

phpjavascriptjqueryajax

Effective methods to prevent the `translate` transform from triggering an element to be perceived as position relative?

I am encountering an issue with an absolutely positioned div that is nested within a statically-positioned parent container. I noticed that when I apply the transform: translateY(-50%) property to the container, the child element behaves as if it were bein ...

htmlcsscss-positioncss-transforms

What is the best way to design a dynamic menu using HTML, CSS, and jQuery, where each li element gradually disappears?

Consider this menu structure: <ul class="main-menu"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> My task is to dynamically hide th ...

javascriptjqueryhtmlcss

Looking for assistance in reducing the vertical spacing between divs within a grid layout

Currently, I am in the process of developing a fluid grid section to showcase events. To ensure responsiveness on varying screen resolutions, I have incorporated media queries that adjust the size of the div elements accordingly. When all the divs are unif ...

javascriptcssgrid

SliderToggle and Div implementation in Internet Explorer (IE) using jQuery

I'm encountering an issue with jQuery's slideToggle function and a div specifically in IE. Here is the code snippet causing the problem: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.d ...

jquerycssinternet-explorer

Ancient queries carry the weight of time

Extremely ancient, very old, incredibly aged beyond belief ...

javascripthtmlnode.jsexpress

Tips for wrapping text within a span element that is positioned absolutely

Need a long string for the bullet text as shown in the code, they can't be separate words. Having trouble with overflow auto, it's cutting off the bullet text. The bullet text must remain in absolute position. How can I make the text wrap to t ...

htmlcss

The alteration of arrays within React.js

I've been working on this function: setNotActiveWalletsList = () => { const { GetAccounts } = this.props; let shallowCopyOfWalletsArray = [...GetAccounts]; const notActive = shallowCopyOfWalletsArray.filter(user => user.active != ...

javascriptreactjs

Accessing embedded JSON data in Javascript: A step-by-step guide

{ "category": [ { "category_id": "1", "category_name": "Top Picks ", "cover_url": "http://www.example.com" }, { "category_id": "2", "category_name": "Latest Releases", "cover_url": "http://www.exa ...

javascriptajaxjsonnode.js

jQuery sends ajax success to input type number

I am encountering an issue with the ajax success loading function when using input type number. Interestingly, when I switch the input type to text, it works perfectly fine. However, once I change the input type back to number, the loading ceases. <s ...

javascriptjquery

Experiencing difficulties with Magento operations

Currently facing an issue while attempting to set up Magento on my server. I have transferred all files from another server to mine, but now encountering an error. Could this be related to the symlinks I generated or is it caused by something else? Encoun ...

javascriptphpdatabasemagentoexception

What causes the NavBar to show and hide within a specific range?

Recently, I encountered a perplexing issue with my navbar. It functions correctly except for one strange behavior that has left me baffled. Why does the menu appear when I adjust the width to 631px, but disappear at 600px? And vice versa – why does it wo ...

htmlcssangulartypescript

Javascript's associative arrays: a versatile tool for data organization

Is there a way to achieve the same functionality in JavaScript as this PHP code?: $this->gridColumnData[] = array('field' => 'id', 'width' => 50, 'title' => 'Enquiry Id') ; $this->gridColumn ...

phpjavascriptarraysmultidimensional-arrayassociative-array