How to apply rounded border radius in opposite direction on hover on menu item in menubar

Question

I want this effect on menu item hover

Currently my menubar looks like this

This is my css code

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:



  
    
  


  



  
    
      
        
          Home
        
      

      
        
          Client
        
      

      
        
          Medical
        
      

      
        
          Social
        
      

      
        
          Transportation
        
      

      
        
          Activity
        
      

      
        
          Food
        
      

      
        
          Reports

Can you please suggest me to what css make changes so I can make exactly same design as per screenshot-1 on each and every item of menubar?

Salketer · Answer

You'll need imagination to be able to create the inverted radius. We could use a circle and use it to mask a square, but CSS mask is not very well supported still. But we can extend on this strategy and use borders to fill the part of a square not occupied by the circle.

In my example below, I've used a holder with overflow:hidden to hide any overflowing border. The size of the holder also determines the size of the final curve since the div inside spans to 100%. Instead of using a full circle, I've used just the 1/4 of it that was needed by rounding just the interesting corner to 100%. The color 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;
}

Now, armed with that knowledge, you can easily do the same for the bottom part by rounding a different corner. You'll need to add the markup to each menu element tough, and play with the display property. You could try to reduce as much as possible by using the ::before and/or ::after elements but I doupt you'd be able to save much (just maybe get to replace the inner div maybe?)

Daizygod · Answer

source code from there

const initNavBar = () => {
  const menusEl = document.querySelectorAll('.side-bar ul li')
  menusEl.forEach(menu => menu.addEventListener('click', ()=> {
    const menuActiveEl = document.querySelector('.side-bar ul li.active')
    menuActiveEl.classList.remove('active')
    menu.classList.add('active')
  }))
}
initNavBar()

:root {
  --color-primary: #1380b8;
  --color-secondary: #33ace3;
}
aside.side-bar-wrap {
  --radius-size: 25px;
  height: 98vh;
  position: fixed;
  top: 1vh;
  left: 1vh;
  overflow-y: scroll;
  overflow-x: hidden;
  border-radius: var(--radius-size);
  padding-right: 2px;
}
aside.side-bar-wrap::-webkit-scrollbar {
  width: 10px;
}
aside.side-bar-wrap::-webkit-scrollbar-track {
  background-color: transparent;
}
aside.side-bar-wrap::-webkit-scrollbar-thumb {
  border-radius: var(--radius-size);
  background-color: var(--color-primary);
}
nav.side-bar {
  min-height: 100%;
  background-color: var(--color-primary);
  display: inline-block;
  border-left: var(--radius-size) solid var(--color-secondary);
  border-right: var(--radius-size) solid var(--color-primary);
  border-radius: var(--radius-size);
}
nav.side-bar .logo-area {
  --curve-size: calc(2 * var(--radius-size));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  min-height: var(--curve-size);
  background-color: var(--color-secondary);
  border-radius: 0 var(--radius-size) var(--radius-size) 0;
  box-shadow: var(--radius-size) 0 var(--color-secondary);
}
nav.side-bar .logo-area::after {
  content: '';
  width: var(--curve-size);
  height: var(--curve-size);
  background-color: var(--color-primary);
  border-radius: 50%;
  position: absolute;
  bottom: calc(-1 * var(--curve-size));
  left: 0;
  box-shadow:  calc(-1 * var(--curve-size) * 0.5)  calc(-1 * var(--curve-size) * 0.5) var(--color-secondary);
}
nav.side-bar .logo-area img {
  position: absolute;
  max-height: 75%;
  transition-duration: 1s;
}
aside.side-bar-wrap:hover nav.side-bar .logo-area img.min {
  max-height: 0;
  opacity: 0;
}
nav.side-bar .logo-area img.max {
  max-width: 0;
  opacity: 0;
  transition-duration: 1s;
}
aside.side-bar-wrap:hover nav.side-bar .logo-area img.max {
  max-width: 90%;
  opacity: 1;
}
nav.side-bar ul {
  padding: 0;
  margin: calc(2 * var(--radius-size)) 0;
  display: flex;
  flex-direction: column;
}
nav.side-bar ul li {
  height: 50px;
  padding: 10px var(--radius-size);
  list-style: none;
  border-radius: var(--radius-size);
  margin-bottom: var(--radius-size);
  z-index: 1;
}
nav.side-bar ul li:not(.active) {
  z-index: 2;
}
nav.side-bar ul li:not(.active):hover {
  backdrop-filter: brightness(0.85);
}
nav.side-bar ul li.active {
  position: relative;
  background-color: var(--color-secondary);
  border-radius: 0 var(--radius-size) var(--radius-size) 0;
}
nav.side-bar ul li.active::before,
nav.side-bar ul li.active::after {
  --curve-size: calc(2 * var(--radius-size));
  content: '';
  width: var(--curve-size);
  height: var(--curve-size);
  background-color: var(--color-primary);
  border-radius: 50%;
  position: absolute;
}
nav.side-bar ul li.active::before {
  top: calc(-1 * var(--curve-size));
  left: 0;
  box-shadow: calc(-1 * var(--curve-size) * 0.5) calc(var(--curve-size) * 0.5) var(--color-secondary);
}
nav.side-bar ul li.active::after {
  bottom: calc(-1 * var(--curve-size));
  left: 0;
  box-shadow: calc(-1 * var(--curve-size) * 0.5) calc(-1 * var(--curve-size) * 0.5) var(--color-secondary);
}
nav.side-bar ul li a{
  color: white;
  font-size: 16pt;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 0;
  align-items: center;
  text-decoration: none;
  transition: 1s;
}
aside:hover nav.side-bar ul li a{
  gap: 10px;
}
nav.side-bar ul li a span {
  display: flex;
  transition: 0.75s cubic-bezier(0.39, 0.58, 0.57, 1);
}
nav.side-bar ul li a span.icon {
  font-size: 24pt;
}
nav.side-bar ul li a span.title {
  max-width: 0;
  opacity: 0;
}
aside:hover nav.side-bar ul li a span.title {
  width: auto;
  max-width: 10rem;
  opacity: 1;
}

How to apply rounded border radius in opposite direction on hover on menu item in menubar

2 Answers