Menu design inspired by a file cabinet

I'm struggling to create a table-like menu using CSS. Below is my code snippet, and I am currently working with Bootstrap 5. I'm facing issues adjusting the padding and changing the color of the menu when it's active.

.top-nav{
margin-left:0px;
}

.top-bar a {
display: block;
text-align: center;
padding: 20px;
text-decoration: none;
}


.top-bar{
border-bottom: 100px solid white;
border-left: 0 solid transparent;
border-right: 80px solid transparent;
border-top: 80px;
height: 0;
width: 200px;
clip-path: inset(0% 0% 0% 0% round 15px 0px 0px 0px)
}

Below is the HTML structure:

      <div class="row top-nav">
            <div class="col-md-3 top-bar">
                <a class="fw-bold text-primary" href="#home">Users</a>
            </div>
            <div class="col-md-3 top-bar">
                <a class="fw-bold text-primary" href="#home">Warehouse Admin</a>
            </div>
            <div class="col-md-3 top-bar">
                <a class="fw-bold text-primary" href="#home">Sales Rep</a>
            </div>
            <div class="col-md-3 top-bar">
                <a class="fw-bold text-primary" href="#home">Senior Sales Rep</a>
            </div>
        </div>



Journey so far: https://i.sstatic.net/CK2G9.png

Here is the desired output:
https://i.sstatic.net/AVQDD.png

cssbootstrap-5

Answer №1

execute the code snippet and modify variables as desired

.folders {
  background: lightgray;
  padding: 10px;
}

.tabs:after {
  content: "";
  clear: both;
  display: block;
}

.tab {
  height: 40px;
  line-height: 40px;
  width: 150px;
  float: left;
  background: gray;
  border-top-left-radius: 16px 16px;
  border-top-right-radius: 16px 16px;
  position: relative;
  margin-right: 17.5px;
}

.tab.active {
  z-index: 100;
  background: #fff;
}

.tab:after {
  content: "";
  display: block;
  position: absolute;
  border-left: 35px solid gray;
  left: 145px;
  border-top: 35px solid transparent;
  bottom: 0;
}

.tab.active:after {
  border-left: 35px solid #fff;
}

.content {
  height: 200px;
  background: #fff;
}
<div class="folders">
  <div class="tabs">
    <div class="tab"></div>
    <div class="tab active"></div>
    <div class="tab"></div>
    <div class="tab"></div>
  </div>
  <div class="contents">
    <div class="content"></div>
  </div>
</div>

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

Dynamic Email Design

Currently, I am working on coding an HTML email that needs to be optimized for perfect rendering on all mobile devices. While I have expertise in coding emails for desktop and ensuring compatibility with various email clients and browsers, the challenge no ...

htmlcssresponsive-designhtml-tablehtml-email

Why is my md-button in Angular Material displaying as full-width?

Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...

javascriptcssangularjsmaterial-designangular-material

Tips on aligning a v-btn alongside v-expansion-panels on the same row

Struggling with aligning my layout. Trying to get a single set of v-expansion-panels and a v-btn in the same row, both visually centered within a card. I managed to almost achieve it in this codepen: https://codepen.io/anzuj/pen/PoPPbdw with the following ...

cssvue.jsvuetify.js

Is there a way to apply a css class to all nested elements in Angular 6 using Ngx Bootstrap?

I've defined a CSS class as follows: .panel-mobile-navs > ul > li { width:100% } Within the HTML, I am utilizing Ngx-bootstrap for a series of tabs like this: <tabset class="panel-mobile-navs" > ... </tabset> My intention is to ...

htmlcssangularangular6ngx-bootstrap

Issue with Dropdown Menu functionality while using multiple dropdown options

I am currently experimenting with dropdown menus from W3Schools and have encountered an issue when trying to implement two dropdown options. The code works fine for a single dropdown, but when I try to add a second one using GetElementsByClassName instead ...

javascripthtmlcsstwitter-bootstrap

Personalized radio button tags

Is there a way to ensure that all blocks are uniform in size with a 10px margin between them? Recently, the radio button was swapped out for a radio label, but now there is an issue with inconsistent sizes due to varying word lengths. How can this be res ...

htmlcsselementor

I am unable to view the entire HTML element

i have a pair of div elements first one : text-logo .text-logo { width: 250px; height: 60px; margin: auto; border: 2px solid #07a2a0; border-radius: 15px 50px 15px 50px; margin-top: 100px; ...

htmlcss

What is the best way to minify and concatenate multiple CSS files only after converting SCSS to CSS with Gulp?

When attempting to convert my scss files to css files using gulp, I encountered an issue. After writing the scss code, it is easily converted to css. However, I wanted to minify this css and save it in a different folder called 'min'. Within the ...

javascripthtmlcsssassgulp

Bottom div refuses to adhere to the bottom of the page

I need help with creating a footer div that sticks to the bottom, left, and right of the page. The current footer doesn't extend all the way down and left. How can I resolve this without using "position: fixed;"? Below is the code snippet (I have rep ...

htmlcsspositionfooter

An interesting approach to utilizing toggle functionality in JQuery is by incorporating a feature that automatically closes the div when

Currently, I am utilizing JQuery's toggle function to slide a ul li element. However, my desired functionality is for the div to close if someone clicks outside of it (anywhere on the page) while it is in the toggle Down condition. Below, you'll ...

javascriptjqueryhtmlcss

Developing shapes using CSS and jQuery

I am struggling to create the exact contour as shown in the image. Despite trying, I have not been successful in achieving it. I used a lot of HTML child tags in my attempt, but I would prefer to keep it minimal. Is there a simpler way to accomplish this? ...

htmljquerycss

ChessboardJs: JavaScript Boards Function Properly on Initial Use Only

Update: The page code can be accessed via my page URL. I'm unsure where the issue lies. Your assistance is appreciated. Issue: Initially, when clicking on the chess puzzles page, everything works fine. However, upon re-clicking from the homepage, th ...

javascriptjqueryhtmlcss

What is the best way to target the final child element of a specific CSS class?

I am working with an HTML table and my goal is to remove the border-bottom from the last row, excluding the row with class .table-bottom: <table cellpadding="0" cellspacing="0" style="width:752px;" class="table"> <tr class="table-top">< ...

htmlcsscss-selectors

Steps for adding a navbar that slides horizontally and overlaps other links on a webpage

I am attempting to design a sliding navigation menu using JQuery. The concept involves having multiple main sections, each with several subsections. When a user hovers over a section, the subsections will expand horizontally. If another section is current ...

jqueryhtmlcssnavbar

ng-class not functioning properly when invoked

In my controller, I have the following function: $scope.menus = {}; $http.get('web/core/components/home/nav.json').success(function (data) { $scope.menus = data; $scope.validaMenu(); }).error(function () { console.log('ERRO') }); ...

javascripthtmlcssangularjsng-class

Can additional classes/styles be added to a CSS3 background?

Today I discovered that CSS3 has the capability to support multiple backgrounds, which is truly amazing. What I would love is the option to combine multiple backgrounds dynamically, like this: .Watermarked{ background: url('text/logo.png') bot ...

cssbackground

Navigate to the following section by scrolling down, and return to the previous section by scrolling up

Currently, I am working on a portfolio website for a filmmaker and I have a specific requirement. As users scroll down the window, I want the page to smoothly transition to the next section, and when scrolling up, I want it to go back to the previous secti ...

javascriptjqueryhtmlcssweb

"Adding an image to create a border within a dropdown in Bootstrap 4: A step

I have been utilizing Bootstrap 4 navbar to construct my menu. Within my menu, there is a dropdown menu that I am seeking to customize. My goal is to adjust the top border of the dropdown menu so it resembles the design seen in this image. My attempt to i ...

javascriptcssbootstrap-4

What could be causing my page's wrapper to shrink upon logging in?

After logging out, the background of my page wrapper expands to cover 100% of the page. However, once you log back in, it shrinks and adjusts to the width of the member bar... TO TEST USER ACCOUNT BELOW: USERNAME: TEST PASSWORD: TEST123 HTML FOR LOGGED ...

htmlcss

New feature: Material UI Chip Input with floating input label

I installed material-ui-chip-input to implement tags in an input field. I wanted a label alongside it, so I utilized the default Material UI label for consistency with other inputs. However, the input doesn't shrink as expected when clicked on by the ...

cssreactjsmaterial-uifrontendlabel