What is the best way to add a vertical line to the left of the selected menu item?

I'm trying to add a vertical line to the left of the active menu item by giving it border-left: 4px and padding-left: 50px;. However, this causes the active link to no longer be positioned below all the other links. Can anyone suggest a different approach?

Additionally, is there a way to adjust the height of the vertical line created with border-left?

body {
  margin:0;
}
.side-menu {
    color: #fff;
    background-color: #aaa;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    height: 200px;
  }
  
.active {
    border-left: 4px solid #000;
    color: #000;
    padding-left: 50px;
  }
<section class="side-menu">
   <div>LOGO</div>
   <div>
     <div class="active">Link 1</div>
     <div>Link 2</div>
     <div>Link 3</div>
     <div>Link 4</div>
   </div>
</section>

htmlcss

Answer №1

To achieve the same effect, you can utilize the pseudo class :before as demonstrated below:

body {
  margin: 0;
}

.side-menu {
  color: #fff;
  background-color: #aaa;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100px;
  height: 200px;
}

.link-container {
  width: 100%;
}

.link-container>div {
  text-align: center;
}

.active {
  position: relative;
  color: black;
}

.active::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  height: 100%;
  border-left: 4px solid #000;
  color: #000;
}
<section class="side-menu">
  <div>LOGO</div>
  <div class="link-container">
    <div class="active">Link 1</div>
    <div>Link 2</div>
    <div>Link 3</div>
    <div>Link 4</div>
  </div>
</section>

Answer №2

Is there a way to ensure that all the links maintain a consistent 50px padding?

body {
  margin:0;
}
.side-menu {
    color: #fff;
    background-color: #aaa;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100px;
    height: 200px;
  }

.link{
  padding-left: 50px;
  border-left: 4px solid transparent;
}
  
.active {
    border-color: #000;
 }
  
<section class="side-menu">
   <div>LOGO</div>
   <div>
     <div class="link active">Link 1</div>
     <div class="link">Link 2</div>
     <div class="link">Link 3</div>
     <div class="link">Link 4</div>
   </div>
</section>

Answer №3

The border is being handled adequately. In addressing your question about height, the solution provided might not be optimal but it's the first that comes to mind without making substantial changes to your preset setup.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin:0;
}
.side-menu {
    color: #fff;
    background-color: #aaa;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 200px;
    height: 200px;
}

.links {
    /*Adjustment made in accordance with the increase in height.*/
    transform: translateY(-10px);
}

.links div{
    padding: 0 50px;
    border-left: 4px solid #00000000;
}

.active {
    border-left: 4px solid #000 !important;
    color: #000;
    display: flex;
    align-items: center;
    /*
    Set ( + npx) based on preference
    (The percentage, 25 in this case,
    must be:- 100/(no. of links):
    */
    height: calc(25% + 10px)
  }
</style>
</head>
<body>
  <section class="side-menu">
     <div class = "logo">LOGO</div>
     <div class = "links">
       <div class="active">Link 1</div>
       <div>Link 2</div>
       <div>Link 3</div>
       <div>Link 4</div>
     </div>
  </section>
</body>
</html>

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

AngularJS $timeout function failing to update variable

I'm currently working on implementing a shaking animation for a button when it's clicked and the form fields above it are invalid. This is the snippet of code from the controller: if(valid){.. do valid stuff here ..} else{ console.log(this.sha ...

javascripthtmlangularjs

PHP unable to display HTML form element using its designated ID attribute

I've been experiencing some difficulties with PHP echoing a label element that contains an ID attribute within an HTML form. My intention was to utilize the ID attribute in order to avoid having to modify the JS code to use the name attribute instead. ...

javascriptphphtml

In Firefox, the sticky sidebar is displaying with incorrect spacing at the top

Having an issue with Firefox not displaying the entire sidebar properly. It seems to be lacking proper spacing from the top, causing the first item to be hidden! Image 1 The CSS code for the sidebar is provided below: /* * Sidebar */ .sidebar { posit ...

htmlcsstwitter-bootstrapbootstrap-4

What causes my animation to “reset” upon adding a new element using innerHTML?

One of the functionalities on my webpage involves a script that inserts a div called "doge" using innerHTML when a button is clicked. Additionally, there is a CSS keyframes animation applied to another div on the same page. However, whenever the button is ...

javascripthtmlcssinnerhtml

The header template may sometimes fail to load the CSS file

Being new to php, I suspect there is a simple solution that I have yet to discover. I've created a header template for all pages, but the css page changes based on the user's current page. How can I use php to determine how many levels up in a f ...

phpcss

Unexpected behavior in Bootstrap 4 table column sizing issue detected

Recently delving into the realm of bootstrap and HTML/CSS scripting, I've been working on creating a simple HTML table with one row and three columns. Each column is supposed to evenly take up one third of the table's space. However, I'm fac ...

csshtml-tableresponsivebootstrap-4dynamic-columns

Enhancing security in client-server communication using HTML5 Ajax

Thank you for your assistance today. I am currently in the process of developing an HTML5 game and require guidance on the most effective method for Client Server communications. I am exploring alternatives to socket.io for undisclosed reasons. The key p ...

jqueryajaxjsonhtml

When the mouse hovers over, include a fade-in effect for the image

I am working with two overlapping images and have successfully implemented a function to display the second image on mouse hover. However, I am struggling to incorporate a CSS transition property for a smoother image transition effect. Currently, when the ...

htmlcssreactjsanimationhover

Is it secure to use a unique, static HTML/CSS website?

As a web developer, I am currently working on hosting a Wordpress-website for a client. However, my frontend development skills have improved significantly and now I feel inspired to create a simpler and more customizable version on my own. This website i ...

jqueryhtmlcsssecurityweb

Is there a way to customize the appearance of the select dropdown without impacting the styling of other Material-UI components, such as the show/hide columns panel?

I am currently working on customizing the appearance of the dropdown panel for my MUI select component. My goal is to achieve a design similar to this: Desired show/hide columns example To accomplish this, I have implemented specific styles within the Mui ...

cssreactjsmaterial-uithemes

There seems to be a problem with how the navbar is being displayed in ResponsiveSlides.js

I am currently using WordPress, but I have come here seeking help with a jQuery/CSS issue. I am utilizing responsiveSlides.js to create a simple slideshow, however, when viewing it here at gallery link, it appears that something is not quite right. STEPS: ...

javascriptjqueryhtmlcsswordpress

Tips for retrieving file data from an input html element

Trying to perform a quick client-side file check for better user experience in JavaScript, but encountering an error that is puzzling. The file is obtained through an input element: The specific error message received is: Uncaught TypeError: Cannot read p ...

htmlfilejscript

Tips on eliminating the header section in SlickGrid?

Is there a way to remove the header row in SlickGrid using CSS? I know there isn't an API for it, but maybe some CSS tricks can do the job. Any suggestions? Check out this example: Calling all CSS experts! I'm looking for assistance in modifyin ...

htmlcssslickgrid

Looking for assistance in stopping the parent onclick event from triggering when clicking on a child div

Is there a way to prevent the parent onclick event from triggering when clicking on a child div? Here's the scenario: <div onclick='parentClick()'> <div onclick='childClick()'> <div onlick='subchildClic ...

javascriptjqueryhtml

Display SQL query results in HTML format with the ability to select elements

I have written an SQL command that retrieves a list of all categories used within my table and writes them into the "categories" column. SQL: SELECT category FROM `events` GROUP BY category I have verified in PHPMYADMIN that the result is correct, with ...

phphtmlmysqlgroup-by

It appears that the HTML links are non-responsive and appear to be arranged in an

I have a fairly straightforward website set up. It utilizes php to scan for images and then displays them one by one with navigation buttons at the top. These buttons allow users to switch back and forth between the images. At the top of the page, there ar ...

htmlcss

Vertical Alignment Challenge in Bootstrap Container

I'm struggling with formatting my simple website. I have a navbar, footer, and a centered container where I want to display text and buttons. However, I can't seem to get the elements to appear on separate lines - I want the text on one line and ...

htmlcssbootstrap-4

element obscured by overlapping elements

I'm unsure why this issue is occurring; it seems to be a CSS error, but I can't pinpoint the exact location. Working on this in Rails, so I'm relatively new to it, but it should follow standard CSS practices! https://i.sstatic.net/OtO6O.jp ...

htmlcss

Event firing in child components of Vue.js can occasionally fail to trigger

When using component A to render multiple instances of component B using v-for, an animationend event is fired from component B to A. However, there are cases where the animationend event fails to fire. View the code sandbox for more information ...

cssvue.jsvuejs2css-animations

Button click storage

I'm trying to keep track of button clicks with a counter, but every time I refresh the page, it resets back to '0'. Is there a way for me to store the input value so that even if I close the browser, the previous number will remain unchanged ...

javascriptjqueryhtml