What is the best way to create a sliding motion to the right for a menu item, accompanied by a line when it

Is there a way to align the line to the right of the text when it's not selected, and have a new line appear on the left side that pushes the text and removes the line on the right side?

Here is the design I'm trying to emulate.

  • If you click the menu on the referenced website and select a menu item, you'll notice the appearance of a left-sided line.

Check this out for reference.

<nav class="col-12 primary__nav">
  <ul id="Primary" class="menu">
    <li id="menu-item-58" class="menu-item">
      <a href="#" aria-current="page">Home —</a></li> 
      <!--The right side line slides away, and a new line appears from the left side upon clicking-->
    <li id="menu-item-106" class="menu-item">
      <a href="#">Our Projects —</a>
    </li>
    <li id="menu-item-59" class="menu-item">
      <a href="#">— About Us</a> <!--appears from the left upon clicking-->
    </li>
    <li id="menu-item-112" class="menu-item">
      <a href="#">News  —</a>
    </li>
    <li id="menu-item-157" class="menu-item">
      <a href="#">Contact —</a>
    </li>
  </ul>                
</nav>
htmlcss

Answer №1

If you're interested in implementing this code on click, simply add a separate class instead of using the :hover pseudo-class as demonstrated in my example.

In order to achieve the effect, I have utilized a wrapper for the menu links along with before and after pseudo-elements for the lines, in addition to employing CSS transitions.

[EDIT]

For a live demonstration with onclick functionality, check out this JSFiddle link.

.menu li {
  list-style: none;
}

.menu a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-weight: bold;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
}

.menu .menu-link-wrapper {
  position: relative;
  transition: all 5s;
}

.menu .menu-link-wrapper::before {
  width: 50px;
  height: 10px;
  border-bottom: solid thin black;
  content: "";
  display: inline-block;
  transition: all 0.5s;
  vertical-align: top;
}

.menu .menu-link-wrapper::after {
  width: 0;
  height: 10px;
  border-bottom: solid thin black;
  content: "";
  display: inline-block;
  transition: all 0.5s;
  vertical-align: top;
}

.menu .menu-link-wrapper:hover {
  padding-left: 0;
}

.menu .menu-link-wrapper:hover::before {
  width: 0;
}

.menu .menu-link-wrapper:hover::after {
  width: 60px;
}
<nav class="col-12 primary__nav">
  <ul id="Primary" class="menu">
    <li id="menu-item-58" class="menu-item">
      <div class="menu-link-wrapper">
        <a href="#" aria-current="page">Home</a> 
      </div>
      </li>
      <!--The right side line to slide away, and a new line on the left side to slide out when clicked-->
    <li id="menu-item-106" class="menu-item">
      <div class="menu-link-wrapper">
        <a href="#">Our Projects</a>
      </div>
    </li>
    <li id="menu-item-59" class="menu-item">
    <div class="menu-link-wrapper">
      <a href="#">About Us</a> <!--slides out from the left and appears like this when clicked-->
      </div>
    </li>
    <li id="menu-item-112" class="menu-item">
    <div class="menu-link-wrapper">
      <a href="#">News</a>
      </div>
    </li>
    <li id="menu-item-157" class="menu-item">
    <div class="menu-link-wrapper">
      <a href="#">Contact</a>
      </div>
    </li>
  </ul>                
</nav>

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

What is the method for utilizing the variable from express in HTML?

Currently, I am working with Express and have the following code: app.get('/', requiresAuth(), (req, res) => res.sendFile('/db_auth_site/index.html', { title: 'Hey', message: 'Hello there!' }) ); I am trying ...

htmlnode.jsexpressnodejs-server

Center content within a div using the middle alignment

Here's a question that goes beyond your typical "vertical align center" query. What I want to accomplish is to take a div with an unspecified height and position it at a specific percentage down the page, let's say 33%. I have managed to get this ...

htmlcss

Harness the power of JavaScript to generate a dynamic overlay with a see-through image that can be expanded

Within different sections of my website, we display banner ads that are loaded in real-time from third-party sources and come in various sizes. I'm interested in adding a transparent overlay image to each ad which would allow me to trigger a click ev ...

javascriptjquerycss

Troubleshooting a problem with Select Dropdown in HTML and PHP

Hello, I am encountering an issue with a dropdown box as shown below: function createDropdown( $name, array $options, $selected=null ) { /*** starting the select element ***/ $dropdown = '<select name="'.$name.'" id="'.$name.'" ...

phphtml

Difficulty adjusting image size in "layouts with overflowing images on cards."

I have encountered an issue with resizing images on my browser using a card-based layout that I found on codepen. The strange thing is, the image resizing works perfectly fine on codepen itself, but when I try to implement the same HTML and stylesheet on m ...

htmlcsslayout

Interactive dropdown menu with options for different actions

They say a picture is worth a thousand words. I have an idea for a feature I want to add to my Django web application: I want to create a dynamic dropdown list that allows users to add values to the database and dynamically updates itself with the new sel ...

htmlajaxdjangodrop-down-menudjango-forms

The button now has a stylish 5px border, making it slightly larger in size. However, it seems

How can I add an active class with a 5px border-bottom on a button without increasing the button size by 5px? The box-sizing property is not working for me. Is there a simple solution to achieve this? *, *:after, *::before { -webkit-box-sizing: border ...

htmlcss

Contrasting box-shadow behavior observed in Chrome versus Firefox

I'm working on a project and aiming to achieve this design: https://i.stack.imgur.com/YflaU.png To test it out, I created a sample page with the following code: p { display: inline; background-color: yellow; box-shadow: 10px 0px 0px red, -1 ...

css

Adjust the size of the image as needed in order to fit within a container of fixed

Is there a clever way to use CSS and/or JavaScript/jQuery to adjust the size of images only when necessary for them to fit within a fixed-height container alongside the remaining content? Upon reviewing the images in the 'new this week' and &apos ...

javascriptjqueryhtmlcss

Prevent the top of the fifth row from displaying on mobile devices when the first four rows are hidden

My personal website features a collection of user-generated stories, with only the first 4 rows of each story visible in a fading text gradient from black to white. There is a "show more/less" button to reveal or hide the full content. While this layout ...

htmljquerycss

Find the position of an HTML5 canvas element within a webpage

I am currently facing an issue with a canvas within another canvas. <canvas id ='canvas2' height="718" width="1316"></canvas> The CSS for this canvas is as follows: #canvas2{ position:absolute; width :95%; height:90%; top:5%; lef ...

javascripthtmlcanvas

Styling tip: Distance the tooltip from its parent element when scrolling through a list

I have a table inside li tag, and I want to display the description on :hover inside td. However, when scrolling through the list, the description content starts to appear with a distance from its parent. Despite trying various combinations of position se ...

htmlangularjscssangularjs-ng-repeat

Python web scraping: Extracting data from HTML tag names

Seeking help with extracting user data from a website by retrieving User IDs directly from tag names. I am utilizing python selenium and beautiful soup to extract the UID specifically from the div tag. For instance: <"div id="UID_**60CE07D6DF5C02A987E ...

javascriptpythonhtmlseleniumbeautifulsoup

The styling of Material UI's contained button is being overridden by MuiButtonBase-root

Currently, I am working with material-ui in a react project. In one of my components, I have incorporated a simple contained button: <Button variant='contained' color='primary'> Edit</Button> However, despite setting it as ...

cssreactjsbuttonmaterial-ui

What is causing the bullets for the unordered list to appear before the items are inserted into the list?

Can you explain why the bullets are showing up before the list items are added? <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>To Do List</title> </head> <body> ...

javascripthtmlnode.jsejs

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

I'm attempting to scale my images precisely using CSS: HTML: <div id="thumbnail-container"> <img src="sample-pic.jpg"/> </div> CSS: #thumbnail-container img { max-height: 230px; max-width: 200px; } In this scenario, ...

javascripthtmlcssinternet-explorer

Storing Selenium WebElement in memory for extended periods to retrieve its details: A guide in C#

I am using Selenium and C# to monitor a website for any new items that may appear. The website contains a list of <div class="myClass"> elements displayed in a table format with multiple sub-divs. Periodically, I scan all the displayed divs to check ...

c#htmlseleniumdom

Resizable Bootstrap column-md-4

I need to make a bootstrap column fixed position (col-md-4). This is for a shop layout with 2 columns: Shop content (long & scrollable) col-md-8 Cart content (short & fixed so it stays visible while scrolling the shop content) col-md-4 I'm ...

csstwitter-bootstrapcss-position

Are there any JavaScript functions available that can navigate to a different HTML page?

Here is an example of the functionality I am attempting. Can it be implemented? function CloseHTML(){ ApplyCSSClosingTransition(); setTimeout(function() { RedirectToAnotherPage(); }, 2000); } <div onClick='CloseHTML()'&g ...

javascripthtmlhttp-redirecthyperlink

Transform a Microsoft Word table into HTML code

My boss has provided me with a very detailed table in an MS Word document filled with various colors, shapes, and lots of information that I need to incorporate into a website. I attempted saving the Word file as HTML and then transferring the code over, ...

htmlweb