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

How to handle Object data returned asynchronously via Promises in Angular?

Upon receiving an array of Question objects, it appears as a data structure containing question categories and questions within each category. The process involves initializing the object with board: JeopardyBoard = new JeopardyBoard();. Subsequently, popu ...

javascriptarraysangular

React.js "universal" component that is able to be generated multiple instances of

I'm struggling to fully understand this problem. Here's the issue: imagine there is an app where I need to generate notifications, dialogs, or other similar elements from my code. One option is to have a "global" component that controls everyth ...

javascriptreactjs

JavaScript and jQuery syntax are essential for web development. Understanding how

I've been searching everywhere but couldn't find syntax similar to this: var mz = jQuery.noConflict(); mz('#zoom01, .cloud-zoom-gallery').CloudZoom(); This basically means: jQuery.noConflict()('#zoom01, .cloud-zoom-gallery') ...

javascriptjquery

Query regarding timing in JavaScript

I recently started learning JavaScript and I am facing a challenge with running a check to determine if it is daylight. Currently, I am using Yahoo's weather API to retrieve information about sunrise and sunset times. The issue I have encountered is h ...

javascriptjquerytime

Tips for halting the live graph plotting based on a specific condition with canvas js

I have a piece of code that generates a live graph based on probabilities. I am looking for a way to stop the plotting process as soon as a specific condition is met. <script> window.onload = function () { var dps = []; // dataPoints var c ...

javascripthtmlcanvasjs

Image uploading in Angular is not compatible with Internet Explorer, however, it functions correctly in Google Chrome

As of now, my implementation has been successful in all browsers except for Internet Explorer 11. Despite being able to successfully upload .jpeg, .jpg, and .png images in Google Chrome, I am facing issues when trying to upload them in IE 11. The code wo ...

javascripthtmlarraysangularimage

Difficulties with integrating tooltips into SVGs

Being a minimalist, I am facing restrictions while working on a website. I desire interactive tooltips to appear when users hover over specific sections of my SVG. However, I also want to incorporate this interactivity within the SVG itself. The challenge ...

javascriptcsssvg

What is the best way to retrieve user groups in Django?

My goal is to investigate the user groups associated with a user in Django. However, when I check the console, I encounter the message: Uncaught ReferenceError: user is not defined at 6/:643:33 The purpose of the function is to redirect the user based ...

htmldjangoajax

NodeJS does not support the Array.Push method

I'm having trouble getting this code to work. I want to generate 5 random items from my database and store them in an array called 'dato'. However, when I print the array, it appears to be empty. /* GET users listing. */ router.get('/& ...

javascriptnode.jsexpress

Programmatically simulating a click on a link within a Windows Universal Windows Platform (U

I am facing an issue with a code that has multiple items with the same href attribute due to it being an external source. I need help figuring out how to programmatically click on a specific link tag using C# within a WebView or by accessing the source d ...

javascriptc#webviewuwp

Enhancing functionality in Javascript by employing prototype descriptor for adding methods

Code: Sorter.prototype.init_bubblesort = function(){ console.log(this.rect_array); this.end = this.rect_array.length; this.bubblesort(); } Sorter.prototype.init = function(array,sort_type){ this.rect_array = array; this.init_bubblesort(); } Wh ...

javascript

How come the method $.when().pipe().then() is functioning properly while $.when().then().then() is not working as expected

I'm still grappling with the concept of using JQuery's Deferred objects, and am faced with a puzzling issue. In this code snippet, my attempt to chain deferred.then() was unsuccessful as all three functions executed simultaneously. It wasn't ...

javascriptjqueryjquery-deferred

Executing a Knex RAW MySQL query to insert new records into a database table

As someone new to working with MySQL, I have previously used PSQL in a similar manner. However, the following code is generating an error. return await db .raw( `INSERT INTO users(firstName, lastName, email, ...

javascriptmysqlnode.jsexpressknex.js

The functionality of Responsive CSS seems to be inconsistent, as it only works partially

Hey everyone, I'm struggling with my responsive CSS code. It seems to be working fine with max-width: 321px but not when I try max-width: 500px. I'm trying to figure out what I'm doing wrong and would really appreciate some help. /*/Mobile ...

csshtmlresponsive-design

Is there an alternative method to retrieve the client's user agent if getStaticProps and getServerSideProps cannot be used together?

I am currently facing a challenge with the website I'm working on as it lacks a responsive design. This means that the view I display is dependent on the user agent of the client. In order to achieve this, I have been using getServerSideProps to deter ...

javascriptnext.js

Modifying table background color using AJAX and jQuery?

Scenario: My web page is designed to automatically search for a specific cell input by the user. If the cell has been input with a value, the table's background color will turn red; otherwise, it will remain green. Currently, the table has not been p ...

phpjavascriptjqueryhtmlajax

Sending a post request to a Spring controller with ajax: Step-by-step guide

I am having trouble sending a post request to the spring controller using ajax. It seems that something is not working correctly. If anyone can help me figure out what I did wrong, I would greatly appreciate it. $("#myprofile").on('submit&ap ...

htmlajaxspringapipost

Parse the text file to extract its data and display that data in a table using Yii2 framework

Below is the javascript code used in my form: $('#idOfButton').click(function(){ var id = $('#input').val(); $.get('index.php?r=tbltime/get-file',{ id : id },function(data){ var data = $.parseJSON(data); ...

javascriptjsonyii2

The Chrome extension takes control of the new tab feature by redirecting it to a custom newtab.html

I have a website https://example.com where users can adjust their site preferences, including enabling night mode. To enhance the user experience, I developed a Chrome extension for https://example.com that transforms Chrome's new tab with a custom ne ...

javascripthtmlcsscookiesgoogle-chrome-extension

unable to pre-select default option

My dynamic options select is functioning correctly, adding the selected attribute to a specific option with an id value. However, I am encountering an issue where even with an option that has the selected attribute, the first option is always displayed as ...

phphtmlwordpress-theming