Ways to implement opposite direction rounded border radius on hover for menu items in a navigation bar

How can I achieve a rounded border radius effect in the opposite direction on hover for menu items in the menubar?

I would like this effect to be applied when hovering over menu items.

https://i.sstatic.net/sLlsN.png

Currently, my menubar looks like the following:

https://i.sstatic.net/p0o7e.png

This is the CSS code I am using:

sidebar-menu .dropdown-toggle:hover, .sidebar-menu .show>.dropdown-toggle {
background: #f8f9fa;
color: #2daab8;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 70px;
border-top-right-radius: 70px;
width: 250px;

}

HTML Code:

<div class="left-side-bar lftsideBar">
<div class="brand-logo">
  <a href="{% url 'home' %}">
    <img src="{% static 'website/vendors/images/Rectangle_33.png' %}" alt="" />
  </a>
</div>
<div class="close-sidebar" data-toggle="left-sidebar-close">
  <i class="ion-close-round"></i>
</div>

<div class="menu-block customscroll">
  <div class="sidebar-menu">
    <ul id="accordion-menu menucls" style="margin-left: 25px !important;margin-bottom:250px;">
      <li>
        <a href="{% url 'home' %}" class="dropdown-toggle no-arrow">
          <span class="micon dw dw-house-1"></span><span class="mtext">Home</span>
        </a>
      </li>

      <li>
        <a href="#" class="dropdown-toggle no-arrow">
          <span class="micon dw dw-add-user"></span><span class="mtext">Client</span>
        </a>
      </li>

      <li>
        <a href="#" class="dropdown-toggle no-arrow">
          <span class="micon dw dw-add-user"></span><span class="mtext">Medical</span>
        </a>
      </li>

      <li>
        <a href="#" class="dropdown-toggle no-arrow">
          <span class="micon dw dw-add-user"></span><span class="mtext">Social</span>
        </a>
      </li>

      <li>
        <a href="#" class="dropdown-toggle no-arrow">
          <span class="micon dw dw-add-user"></span><span class="mtext">Transportation</span>
        </a>
      </li>

      <li>
        <a href="#" class="dropdown-toggle no-arrow">
          <span class="micon dw dw-add-user"></span><span class="mtext">Activity</span>
        </a>
      </li>

      <li>
        <a href="#" class="dropdown-toggle no-arrow">
          <span class="micon dw dw-add-user"></span><span class="mtext">Food</span>
        </a>
      </li>

      <li>
        <a href="#" class="dropdown-toggle no-arrow">
          <span class="micon dw dw-add-user"></span><span class="mtext">Reports</span>
        </a>
      </li>

    </ul>
    
  </div>
</div>

Could you please advise me on which CSS properties need to be modified in order to achieve the design shown in screenshot-1 for each and every item in the menubar?

htmlcssbootstrap-4

Answer №1

To create the inverted radius, creativity is essential. One method is to use a circle to mask a square, although CSS mask support is still limited. An alternative approach is to utilize borders to fill the portion of the square not covered by the circle.

In the example below, a container with overflow:hidden is employed to conceal any excess border. The size of the container dictates the final curve's dimensions, as the inner div spans 100%. Instead of a full circle, only a quarter is utilized, rounding the corner of interest to 100%. The hue of the border determines the color of the curve.

.holder{
  width:100px;
  height:100px;
  overflow:hidden;
}
.holder div{
   width:100%;
   height:100%;
   border-bottom-right-radius:100%;
   border:99999px solid black;
   border-left:none;
   border-top:none;
}
<div class="holder">
  <div></div>
</div>

With this technique in mind, you can apply the same concept to the bottom section by rounding a different corner. Each menu element requires additional markup and adjustments to the display property. While utilizing ::before and/or ::after elements may help reduce redundancy, substantial savings might be challenging to achieve (possibly only replacing the inner div).

Answer №2

code found here

const initializeSidebar = () => {
  const menuItems = document.querySelectorAll('.sidebar ul li')
  menuItems.forEach(item => item.addEventListener('click', ()=> {
    const activeMenuItem = document.querySelector('.sidebar ul li.active')
    activeMenuItem.classList.remove('active')
    item.classList.add('active')
  }))
}
initializeSidebar()
:root {
  --primary-color: #1380b8;
  --secondary-color: #33ace3;
}
aside.sidebar-wrapper {
  --border-radius: 25px;
  height: 98vh;
  position: fixed;
  top: 1vh;
  left: 1vh;
  overflow-y: scroll;
  overflow-x: hidden;
  border-radius: var(--border-radius);
  padding-right: 2px;
}
aside.sidebar-wrapper::-webkit-scrollbar {
  width: 10px;
}
aside.sidebar-wrapper::-webkit-scrollbar-track {
  background-color: transparent;
}
aside.sidebar-wrapper::-webkit-scrollbar-thumb {
  border-radius: var(--border-radius);
  background-color: var(--primary-color);
}

/* CSS styles continued... */

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

Tips for adjusting custom spacing margins within Material UI Grid

Is there a way to adjust the spacing between Grid items in Material UI? Here's the code I currently have: <Grid container spacing={1}> <Grid item xs={6}>Node 1</Grid> <Grid item xs={6}>Node 2</Grid> ...and so ...

cssreactjsmaterial-ui

What is the best way to eliminate the scroll buttons from a scroll bar within a scrollPane in JavaFX?

Here's a snippet of code from the CSS file: .scroll-bar .button { visibility: hidden; -fx-background-color: black; } Despite this code, the scroll bar buttons are unaffected. You can see an image of the issue here. I would greatly appreciate any hin ...

javacssjavafx

What are some ways to ensure that text can adapt to the size of a

I am looking to create dynamic text that adjusts based on the size of its parent container. As the parent container's size changes, I want the text to automatically adjust accordingly. Specifically, I want the text in a widget to resize when the widg ...

javascriptjqueryhtmlcssfrontend

CSS changes not being reflected in different web browsers

I am facing a frustrating issue with my WordPress website as changes made in my .CSS file do not seem to reflect in Chrome, Firefox or Edge browsers. The CSS is loaded directly from the <link href="/wp-content/themes/mytheme/css/style.css" type="text/c ...

htmlcsscachingreload

Arrange the contents within a div with Bootstrap 4 for proper alignment

Just stepping into the world of front end development and my question might come off as quite basic. Currently, I am delving into ReactJS. https://i.sstatic.net/o9tDo.png My current challenge is related to the following code snippet: <div className=" ...

htmlcsstwitter-bootstrap-3bootstrap-4

Blank voids observed while scrolling within UIWebViews

Can anyone help me with preventing the page from scrolling too far? I'm trying to create a feature where a grey empty space appears when the user scrolls beyond a certain point. ...

ioshtmluiwebviewscroll

Is there a method to establish varied usage permissions for a single page without any tracking?

I am puzzled by how a solution could create something like this. My goal is to have a webpage displaying 2 squares on a large screen. There will be 2 users, each needing access to write in their own square only on this page. <div class="square1"> ...

javascriptphpjqueryhtmlangular

Ways to incorporate a Javascript variable into a modalDialogContentBox

In my search for a JavaScript solution, I came across a code that calculates the sum of input fields with the class "qt" when a form is submitted. If the total sum is less than 15, a message is displayed in a JavaScript alert popup. While this functionalit ...

javascriptbootstrap-4

Struggling to fetch a custom attribute from the HTML Option element, receiving [object Object] as the result instead

I've been facing a challenging issue all day. My task involves making an ajax call to a predefined JSON file and trying to save certain contents into option tags using custom attributes. However, every time I attempt to retrieve the data stored in the ...

javascriptjqueryhtmljsonajax

jQuery AJAX utilizes div elements

I am having trouble using functions in a select element loaded within a div using AJAX in jQuery. Can anyone offer assistance? Here is the snippet of jQuery code: $("#cbo_sede").change(function () { var sede = document.getElementById("cbo_sede").val ...

jqueryajaxhtml

Creating iPhone style form elements using HTML

Thinking of replicating the form elements from iPhone using HTML/CSS but wondering if it already exists out there. I searched online but couldn't find anything. Has anyone come across something similar before? ...

javascriptiphonehtmlcss

jQuery - Reveal one div while concealing another

I've been working on a script to toggle between two divs onClick - opening one while closing the other if it's already open. I'm fairly new to jQuery and Javascript, having mainly worked with HTML/CSS. Script I found: http://jsfiddle.net/J ...

javascriptjqueryhtmlcss

Tips for implementing a dynamic tag using AngularJS

I am attempting to use AngularJS to create an HTML element to facilitate downloading a file from the server to the client. I have found that the most straightforward method is to utilize an HTML element with the href attribute. Here is the code snippet I a ...

androidhtmlangularjsnode.jsapk

Hover over the full-width sticky navbar to reveal a dropdown menu that stays at

I am new to using Bootstrap techniques and I am attempting to combine two different styles in a navbar. One involves a sticky navbar and the other a full-width dropdown navbar, both found on an educational website. https://www.w3schools.com/howto/tryit.as ...

csshovernavbardropdownsticky

Steps to create a loading bar that starts loading when an ajax task begins

What is the best way to show a loading bar as an AJAX task begins on a page? Additionally, how can we make sure that hitting the back button will return to what was being viewed before that specific AJAX task? ...

htmlajax

My gadget is caught in a loop, the conditions are failing to function properly

I recently developed a basic web watch application using Tizen Studio specifically designed for Gear watches and similar devices. Within this web watch, I implemented 6 conditions that are intended to change the background of the watch based on the curren ...

javascripthtmlcss

Enable certain HTML elements

I am trying to figure out how to restrict HTML tags to only allow 'br', 'p', and 'strong'. After searching, I came across this code snippet: (strip_tags($this->parent->content[$i]['text']), $this->parent-& ...

phphtmltagsstrip-tags

Encountering the end tag ""br"" with no corresponding start tag in Visual Studio Blazor

I understand the consequences of not closing tags, but I thought <br /> was self-closing? @if (students != null) // Add form { <input placeholder="First Name" @bind="@firstName" /></br /> <input placeholder= ...

html.net-coreblazor

Tips for setting a default value in a dynamic select component in Angular

I'm currently working on developing a dynamic dropdown component for my application that will be utilized in various forms across the app. There are scenarios where a predefined value may need to be set for the dropdown, which should be automatically ...

javascripthtmlangulartypescript

Issue with HTML While Utilizing wp_get_attachment_image

This script : $source = wp_get_attachment_image( get_the_ID(), 'medium' ); $weburl = wp_get_attachment_image_url( get_the_ID(), 'full' ); echo( '<p><a href="%s"><img src="%s"></a></p>', $weburl, ...

phphtmlwordpress