I am looking to replicate the sidebar design displayed in the image below by using HTML and CSS. While I have successfully rounded the borders on the left side of a selected link, I am stuck when it comes to rounding the borders on the right side.
I am looking to replicate the sidebar design displayed in the image below by using HTML and CSS. While I have successfully rounded the borders on the left side of a selected link, I am stuck when it comes to rounding the borders on the right side.
Utilize the :before and :after selectors strategically. Implement :after for border radius at the end. Additionally, experiment with the :has selector to apply CSS styles to the previous element (compatibility may vary among browsers).
Note: If needed, you can use JavaScript for click events to select elements.
Check out the code snippet below:
const items = document.querySelectorAll(".item");
items.forEach(item=>{
item.addEventListener("click", (event)=>{
items.forEach(item=>{
item.classList.remove("active");
});
event.currentTarget.classList.add("active");
});
});.menu {
padding: 1rem;
width: 100px;
}
.title {
background-color: black;
color: white;
padding: 1rem;
text-align: center;
font-size: 1.5rem;
}
ul {
padding: 0;
margin: 0;
}
.item {
cursor: pointer;
list-style: none;
height: 3rem;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.item.noclick {
height: 2rem;
pointer-events: none;
}
.item.noclick:before, .item.noclick:after {
height: 2rem;
pointer-events: none;
}
.item i{
background-color: black;
color: white;
width: 4rem;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-left: -1.375rem;
}
.item.active i {
color: black;
background-color: white;
border-top-left-radius: 999px;
border-bottom-left-radius: 999px;
}
.item:before, .item:after{
content: "";
display: inline-block;
width: 3rem;
height: 3rem;
background-color: black;
}
.item:before{
width: 4rem;
}
.item.active:after{
background-color: white;
}
.item:has(+.active):after{
border-bottom-right-radius: 999px;
}
.item.active + .item:after {
border-top-right-radius: 999px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"/>
<div class="menu">
<div class="title">Test</div>
<ul>
<li class="item noclick"><div></div></li>
<li class="item"><i class="fa-solid fa-chart-column"></i></i></li>
<li class="item"><i class="fa-solid fa-chart-column"></i></li>
<li class="item active"><i class="fa-solid fa-chart-column"></i></li>
<li class="item"><i class="fa-solid fa-chart-column"></i></li>
<li class="item"><i class="fa-solid fa-chart-column"></i></li>
<li class="item noclick"><div></div></li>
</ul>
</div>You have the ability to achieve this by utilizing the ::after pseudo element of your li element. By positioning it absolutely, you can generate a block that overlays the parent div. Utilize clip path to define the shape you desire and adjust the sizing until it aligns perfectly. The example provided below may require some further tweaking, which I will leave in your capable hands.
I rely on a couple of handy resources for this task. Firstly, there's the SVG Path Builder at mavo.io for customizing SVGs. Additionally, there is a helpful Clip Path Converter on GitHub. This tool converts your SVG code and provides the necessary HTML and CSS to apply clipping to your elements.
.sidebar {
font-size: 1.5rem;
color: white;
width: fit-content;
background-color: black;
padding: 1rem;
}
.menulist {
padding-left: 0;
list-style-type: none;
width: 100%;
}
.menulist > li {
position: relative;
width: 100%;
margin-block: 1rem;
text-align: center;
}
.menulist > li:hover {
background-color: white;
color: black;
border-top-left-radius: 100vh;
border-bottom-left-radius: 100vh;
}
.menulist > li:hover::after {
content: "";
position: absolute;
top: -1rem;
left: 100%;
bottom: -1rem;
width: 1rem;
background-color: white;
background-size: cover;
clip-path: url(#my-clip-path);
}
.svg {
/*hide the SVG */
position: absolute;
width: 0;
height: 0;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<svg class="svg">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="m0,0.25 a1,0.25,0,0,0,1,-0.25 l0,1 a1,0.25,0,0,0,-1,-0.25 l0,-0.5"></path></clipPath>
</svg>
<div class='sidebar'>
<div class='title'>Test</div>
<ul class='menulist'>
<li><i class="fa-solid fa-chart-line"></i></li>
<li><i class="fa-solid fa-chart-line"></i></li>
<li><i class="fa-solid fa-chart-line"></i></li>
<li><i class="fa-solid fa-chart-line"></i></li>
<li><i class="fa-solid fa-chart-line"></i></li>
</ul>
</div>Is there a way to display 6 cameras on a single webpage without them taking up the entire screen within iframe windows? Can the content be shrunken to fit the iframe window? <!doctype html> <html> <head> <meta charset="utf-8"> &l ...
An issue I am facing is with a DIV element that needs to always be positioned in the upper right corner of another DIV. Initially, using absolute positioning seems like the solution, but when the parent DIV has a scroll function, the first DIV disappears f ...
Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...
I recently encountered an issue with using a custom font (Universe 55 font) in html5. I downloaded the .ttf file, applied it with the @font-face rule, and tested it on various browsers including IE, Chrome, and mobile browsers. Unfortunately, the font does ...
I have a couple of inquiries regarding the internet TV site I am currently working on. First, I want the main subscription element to have an attribute called (ServerIP) with a fixed value that cannot be changed. However, the code I tried did not work as e ...
Is there a substitute for navbar-static-bottom? I currently have my footer set up like this: <div class="navbar navbar-default navbar-fixed-bottom"> <div class="container"> <p class="navbar-text pull-left">&a ...
I am working on a project using the MVC framework. The application retrieves a large amount of data during loading. I would like to display a loading image - a .gif file while fetching records. Below is the code snippet I am currently using: //Loads rec ...
I am currently putting together a portfolio showcasing the projects I have worked on while learning to code. Each project page has a banner at the top, but I'm encountering an issue with one site (Jubilee Austen page) that is unresponsive. After usin ...
Currently, I am in the process of developing an application designed for LTR usage, but I am interested in adding RTL support as well. The application itself is built on top of Material UI React. By using CSS Flex Box, I have managed to rotate the applicat ...
Here is a code snippet I found on http://jakearchibald.com/scratch/alphavid/ $("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; ...
I have been working on implementing a step-by-step registration form, and I am facing an issue. When I click on the next button, all fields should be mandatory to proceed to the next step. It's crucial for the user experience that they fill out all th ...
My goal is to have forms display below a select tag based on the number selected by the user. I am attempting to achieve this using JQuery, but it's currently not functioning as expected: Select tag:- <label>How many credit cards do you have:* ...
I'm currently stuck on a project involving a Three.js canvas with OrbitControls for interactive 3D visualization. The main issue I'm facing is the lack of synchronization between scrolling within the canvas and the rest of the page content. Whil ...
I'm working on integrating a separate navigation area file with my content using PHP includes. I have this idea where I want the links in the navigation area to change color depending on the active page (current URL). Essentially, I need jQuery or Jav ...
Here is the meta tag that I have: <meta title='raja' identifier> I would like to know how to manipulate the DOM so it looks like this: <!-- reference <meta title='raja'> --> Could you recommend a way to manipulat ...
Using markup, I have created a dropdown menu utilizing Twitter Bootstrap. <ul class="nav pull-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b>< ...
In my current setup, I am utilizing p:inputText and have the need to trigger a javascript function that will update the searchField in the backend bean. <p:inputText required="true" placeholder="#{cc.attrs.searchTip}" value="#{cc.attrs.queryProperty}" ...
Looking for inspiration for blog listing pages? Check out some examples like: HubSpot's marketing blog or iGoMoon's blog. I'm trying to figure out where I should start. Should I begin with the first line of code? Or can I import sample code ...
We recently developed a Progressive Web App (PWA) for our website and are now looking to customize the status bar font color to white. While we have come across various resources on how to change the background color of the status bar in a desktop PWA on ...
Looking for a quicker solution than using Html.fromHtml to set text in multiple TextViews. Open to suggestions of support libraries that may offer a faster method. Spannables have been considered, but they don't allow for line breaks without using Spa ...