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

Having difficulties with JavaScript's if statements

I'm facing an issue with my JavaScript code that is meant to modify the value of a price variable and then display the updated price. The problem arises when I have multiple select options, as the price only reflects the ID of the last statement. Here ...

javascripthtmlif-statement

Encountering a NaN result while attempting to incorporate a drop-down menu into a newly developed macro calculator

Before the calculator was functioning smoothly, but as soon as I included the activity level selection from the dropdown menu, things took a turn. The expected output is supposed to be the result of multiplying the user's chosen activity level by the ...

javascripthtmldrop-down-menu

Challenges with implementing @Html.EditorForModel

Currently, I am developing a web application using asp.net's mvc-5 framework. In this project, I have implemented the following model class: public class Details4 { [HiddenInput(DisplayValue=false)] public string RESOURCENAME { se ...

cssasp.netrazorhtml-helperasp.net-mvc-5

What are the best techniques for positioning text next to images in HTML and CSS?

I have attempted to position the text in close proximity to the images as shown in the picture below (to allow for spacing in the middle). As depicted in the image, the "AVENUE FOR GROWTH" and "NETWORKING OPPORTUNITIES" texts are near Man's hand and w ...

htmlcss

Verify the presence of blank space with javaScript

I currently have a text box on my website. <input type="text" name="FirstName" value="Mickey"> My goal is to prevent the user from entering empty spaces, tabs, or new lines in the text box. However, I want to allow spaces between characters. Does a ...

javascripthtml

Mastering the Zurb Foundation equalized grid: aligning content at the bottom of a div within a grid cell

One common challenge is how to position content at the bottom of a div, but with Flexbox, it's becoming easier nowadays. In my case, I'm using the Zurb Foundation grid with equalisation. This equalisation is crucial because my cells have an imag ...

csszurb-foundation

The unique GopikaTwo Gujarati font is unfortunately not compatible with Android mobile browsers and hybrid applications

I am currently trying to incorporate the custom font GopikaTwo into my hybrid application. Below is the code snippet I have added to my CSS file: @font-face { font-family: 'GopikaTwo' !important; src: url('GopikaTwo.eot') !impo ...

androidcssfont-faceandroid-browsercustom-font

Image upload failed after a successful submission using an HTML form

My PHP website is custom-built and hosted on a Plesk (Windows Hosting Server of Godaddy) After submitting a form, all values are updated except for the image. The error message displayed on the page is as follows: PHP Warning: move_uploaded_file(../../.. ...

phphtmlformsfile-uploadimage-uploading

How can we enhance the integration of HTML and PHP for a smoother workflow?

Are there alternative solutions, aside from using a template engine like Smarty, for managing large code like this? <table class="table table-striped dataTable table-bordered"> <thead> <tr> <?php $o ...

phphtml

Eliminate borders surrounding WordPress text widgets

Looking for some help with removing the border around the widgets on my home page. Despite my theme's CSS removing borders universally, I thought targeting specific Div text widgets (such as text-7, text-6) would do the trick. While I can control the ...

csswordpresswidget

What is the best way to arrange two divs inside a main div so they remain fixed in place at all times?

Struggling with aligning two smaller divs within a main wrapper for my website. Despite confining them to the main div, they don't stay fixed or aligned properly. How can this issue persist even when contained within a main div? I've attempted s ...

htmlcssalignmentwrapper

Rotate image in Vue3 using @click

I have a dashboard with a refresh button that I want to rotate 360 degrees every time it is clicked. How can I achieve this rotation effect on the image with each click of the refresh button? Below is the code snippet I have been working on, but it only r ...

javascriptcssvue.jsvuejs2

Set the class of the list item to "active" class

My approach to styling involves using a UL and li class to contain form selection options. I plan on hiding the radio button and using its value upon form submission. I have managed to enable checking the radio box when the <li> is clicked, but for s ...

javascriptjqueryhtml

What is causing the input tag and button tag to appear on separate lines instead of together?

Here is my HTML and CSS code: <!DOCTYPE html> <html> <head> <title>assignment1</title> <meta charset="utf-8"> <meta name = "description" content="assignment"> <meta name = "keywords" content="php, assignm ...

htmlcss

What is the best way to align this button next to the text and header on the page?

I'm struggling to position this button next to the paragraph element instead of below it. I want them both on the same line. <div class="up"> <div class="ban"> <div class="act"> <h2>Joi ...

htmlcssflexbox

Double Checkbox

My current project involves creating an update page, and I have successfully completed most of it except for the checkbox section. Strangely, the checkboxes are being duplicated, and I haven't been able to identify the reason behind this issue yet. Th ...

phphtmllaravel

Ways to make two blocks of text appear side by side and adapt to different screen sizes

Check out our website imageI'm facing a challenge in making these two text elements appear next to each other rather than stacking on top of each other. Additionally, I need them to adapt responsively to changes in screen size. When 'Icontext&ap ...

htmlcss

Deactivate an option within an angularjs multi-select menu

Currently, I am utilizing an angularjs multiselect box which is displayed below: https://i.stack.imgur.com/w6ffN.png Here is the html code snippet: <select multiple ng-options="Language.LangID as Language.LangName for Language in AllLanguages " ng-mo ...

htmlangularjsmulti-select

Update the CSS property according to the selected list item in the slider using Glider JS

Looking to dynamically change the background image in CSS based on the active slide value in Glider.js Here is the CSS: html { background-image: url("https://images.unsplash.com/photo-1496518908709-02b67989c265?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEy ...

javascriptjquerycss

What is the best technique to position a div at the bottom of a container that has a height of 100

After many attempts and searching for answers, I'm still struggling to figure out how to make the div float to the bottom with 100% height. I've even considered if it's an issue with Pure or something else entirely. It's definitely frus ...

htmlcssyui-pure-css