Adjust positioning of navigation when hovered over

Need help creating a cool navigation effect like this. Live example: 

https://hookandbarrelrestaurant.com/

Here is my code: 

https://codepen.io/Dhaval182/pen/rQPMoW

javascriptjqueryhtmlcss

Answer №1

I successfully implemented this technique using CSS variables and a single event listener in JavaScript.

Although the process was not overly complex, it did require some trial and error to ensure it functioned properly.

Illustration:

To track the mouse position and create corresponding content movement, you must listen for the mousemove event in JavaScript. By transferring this value to CSS (referencing CSS var() statements with JavaScript), you can handle the rest using pure CSS.

In our CSS, we utilize properties like display:inline-block and white-space:nowrap to structure our columns.

We set the overflow property to hidden, and make the width and height both 100%.

The only HTML modification I made was changing the info element to a div for aesthetic purposes (though this is optional and interchangeable).

const navbar = document.getElementById('navbar-list');

document.addEventListener('mousemove', evt => {
  let x = evt.clientX;

  navbar.style.setProperty('--pos-x', (-x / 1.35));
});
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.flex-container,
.menu,
ul,
li,
a {
  height: 100%;
}

.flex-container,
.menu {
  width: 100%;
  height: 100%;
}

.menu {
  overflow: hidden;
  position: relative;
}

.menu ul {
  position: absolute;
  /* Use calc() method to add "px" to the number transferred from Javascript */
  left: calc(var(--pos-x) * 1px);
  list-style: none;
  margin: 0px;
  padding: 0px;
  white-space: nowrap;
  width: 100%;
}

.menu ul>li {
  padding: 0px;
  margin: 0px;
  margin-left: -4px;
  text-align: center;
  display: inline-block;
  width: 25%;
}

.menu ul>li>a {
  display: inline-block;
  margin: 0px;
  width: 100%;
  text-decoration: none;
  color: #000;
  font-size: 18pt;
  background: rgba(0, 0, 0, 0.0);
  -webkit-transition: background-color 0.3s;
  /* Safari */
  transition: background-color 0.3s;
}

.menu ul>li>a>.info {
  position: absolute;
  bottom: -30px;
  display: block;
  width: 25%;
  -webkit-transition: bottom 0.3s;
  /* Safari */
  transition: bottom 0.3s;
}

.menu ul>li>a:hover .info {
  bottom: 20px;
}

.menu ul>li>a:hover {
  background: rgba(0, 0, 0, 0.6);
  color: #FFF;
}
<!-- Menu -->
<div class="menu" id="menu">
  <ul class="flex-container" id="navbar-list">
    <li>
      <a href="#">
        <span class="menu-title">About us</span>
        <div class="info">Est. 1995</div>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="menu-title">About us</span>
        <div class="info">Est. 1995</div>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="menu-title">About us</span>
        <div class="info">Est. 1995</div>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="menu-title">About us</span>
        <div class="info">Est. 1995</div>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="menu-title">About us</span>
        <div class="info">Est. 1995</div>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="menu-title">About us</span>
        <div class="info">Est. 1995</div>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="menu-title">About us</span>
        <div class="info">Est. 1995</div>
      </a>
    </li>
  </ul>
</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

Why isn't my List<string> being retrieved from the MVC Controller in an $ajax request?

I am attempting to generate customized lists in my cshtml file through an ajax request. .ajax({ type: "GET", cache: false, url: "@Url.Action("getValidationLists")", contentType: "application/json", dataType: "json", ...

javascriptc#ajaxasp.net-mvcrazor

Is there a way to trigger the animation of this text effect only when the mouse is scrolled to that specific section?

Here is a cool typing text effect created using HTML, CSS, and JavaScript. Check out the code below: (function($) { var s, spanizeLetters = { settings: { letters: $('.js-spanize'), }, init: function() { ...

javascripthtmlcss

Click to Resize Window with the Same Dimensions

I have a link on my website that opens a floating window containing more links when clicked. <a href='javascript:void(0);' onclick='window.open("http://mylink.html","ZenPad","width=150, height=900");' target='ZenPad'>&l ...

javascripthtmlcss

Unveiling the sequential fade-in feature with jQuery

Is there a method to modify this plugin so that the fade-in items are displayed at the top? Here is the link for reference: Thank you! ...

jquery

Adjust grading system based on user interaction with JavaScript

I am currently working on a grading system for a website and I am attempting to modify the interpretation of grades when a column is clicked. Specifically, I am looking to convert Average (%) to Letters to 4.0 Grade Average. To achieve this, I am using Jqu ...

javascripthtml

Arrange two divs next to each other on the page: the div on the right can be scrolled through, while the div on the

I am attempting to create a layout similar to this https://i.sstatic.net/Y1FCp.png My goal is to: Have two main divs positioned side by side inside a wrapper div Ensure the wrapper expands to fill 100% of the browser size The left div (banner) should b ...

htmlcss

The jQuery hide() method conceals an element without affecting its parent

Can't seem to figure out JQuery... So, here's the issue: I've got a page where visitors can enter their email address by clicking on a link inside a div (id="contact"). <div id="contact"><a href="">Interested in leaving your con ...

jqueryformshtmlhide

What is the source of this additional space?

To view my Codepen project, check out this link: http://codepen.io/leongaban/pen/aFJfs I have noticed that the spacing issue is related to the .email-tip-icon and the tip-message classes. When I remove them, the extra space disappears. Even though both th ...

htmlcsspositionspacing

Concealed Content Within Drawer Navigation

When using the Material UI permanent drawer component in different pages, I encountered an issue where the main content was getting hidden behind the drawer's toolbar and sidebar. I am unsure how to fix this problem. It seems like a styling issue, bu ...

javascriptcssreactjstypescriptmaterial-ui

Change the time format from '18/10/2016 10:31:22PM' to '18/10/2016 22:31:22' in JavaScript

var currentDate = new Date('18/10/2016 10:31:22PM'); var formattedTime = currentDate.toLocaleTimeString(); alert(formattedTime); This code is returning an 'invalid date' output. To fix this issue, I need to convert the date format to ...

javascript

Transform the jQuery Mobile slider into a jQuery UI slider and update the text

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> function modifycontent() { if (document.getElementById("slider").value<33) { $("#1").fadeIn("slow"); $("#2").fadeOut("slow"); ...

javascriptjqueryhtmljquery-uislider

Utilizing Beautiful Soup in Python to Scrape HTML Data from a Search Engine Results Page

I'm attempting to extract hotel information from booking.com using Beautiful Soup. I am specifically looking for certain details from all the accommodations in Spain. Here is the search URL: URL Upon inspecting an accommodation on the result page us ...

pythonhtmlweb-scrapingbeautifulsoup

Tips for preventing the error message "The property 'map' is not present on type 'string | string[]'."

I received an error message stating Property 'map' does not exist on type 'string | string[]': const data = [ ['1', ['11']], ['2', ['21']], ['3', ['31']], ] data.map(top ...

javascripttypescriptastrojs

Styling for the DataTable disappears upon loading jQuery

my PHP file named "zero3data.php" <?php printf('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">'); printf('<thead>'); printf('<tr>'); ...

javascriptcss

Enable the option to customize the icon of the recently activated sidebar menu item

I need help with changing the arrow icon of a menu-item only when it is clicked, without affecting all other menu-items. In the image below, you can see that currently, clicking on any menu-item changes all the arrows. Attached Image //sidebarMenu jQu ...

javascripthtmljquerycss

history.push() function is ineffective within a JavaScript file that does not contain a class

I've been delving into React and encountering an issue with the history.push("/dashboard") method, it's not functioning as expected. import axios from "axios"; import { GET_ERRORS, GET_PROJECT, GET_PROJECTS } from "./types"; export const createP ...

javascriptreactjsaxios

Transform the contents of a div tag into a function by removing the entire div tag

My goal is to find a clever solution for removing the contents between specific HTML classes using PHP. For example, I want to erase all the HTML within the "sometestclass" class. The function below is somewhat functional but not perfect. It eliminates so ...

phpfunctionhtml

How do I determine the appropriate image type to use?

I'm a beginner in the world of Node.js and I'm currently working on an application that stores image files. However, I am unsure about what type of data the images should be. const userSchema = new mongoose.Schema({ userImage: { type ...

javascriptnode.js

The Node.js Express Server runs perfectly on my own machine, but encounters issues when deployed to another server

I've encountered a strange issue. My node.js server runs perfectly fine on my local machine, but when I SSH into a digital ocean server and try to run it there, I get this error. I used flightplan to transfer the files to the new machine. deploy@myse ...

javascriptnode.jsexpress

How to Emphasize Html Select Element on Mobile Devices?

Is there a way to make the HTML select element on Android appear more distinguishable as a dropdown list, rather than just looking like plain text? Any suggestions for highlighting it so users can easily identify and select an option from this element? Up ...

androidhtmlcss