-1

How to make this navigation effect. Demo link: https://hookandbarrelrestaurant.com/

My code Link: https://codepen.io/Dhaval182/pen/rQPMoW

Dhaval Patel
  • 100
  • 6
  • document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); vhexk the top answer here its the best thing ever: https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link – ptts Dec 01 '18 at 12:57

1 Answers1

1

I was able to achieve this by using CSS variables, and one event listener in Javascript.

It's not super complicated, however, it did take some tinkering to get it to work correctly.

Example:

In order to detect the mouse position and make the content move like that, you need to listener for the mousemove event in Javascript. However, you can transfer that value over into CSS (sharing CSS var() statements with Javascript), and do the rest with pure CSS.

For the CSS we use the display:inline-block property along with the white-space:nowrap property to make our columns.

We set the overflow to be hidden, and make the width and height 100%

The only thing I changed with the HTML was the info element. I changed it to a div, just to make it look prettier (that was not essential and can be changed to whatever).

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>
rootr
  • 382
  • 1
  • 11