导航_01

In this example below you will see how to do a 导航_01 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by yshenhua, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright yshenhua ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>导航_01</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <nav id="nav" class="nav_box">
  <a href="javascript:;" class="cur">
    <svg width="42" height="42" viewBox="0 0 24 24"><path fill="#000000" d="M15,5H14V4H15M10,5H9V4H10M15.53,2.16L16.84,0.85C17.03,0.66 17.03,0.34 16.84,0.14C16.64,-0.05 16.32,-0.05 16.13,0.14L14.65,1.62C13.85,1.23 12.95,1 12,1C11.04,1 10.14,1.23 9.34,1.63L7.85,0.14C7.66,-0.05 7.34,-0.05 7.15,0.14C6.95,0.34 6.95,0.66 7.15,0.85L8.46,2.16C6.97,3.26 6,5 6,7H18C18,5 17,3.25 15.53,2.16M20.5,8A1.5,1.5 0 0,0 19,9.5V16.5A1.5,1.5 0 0,0 20.5,18A1.5,1.5 0 0,0 22,16.5V9.5A1.5,1.5 0 0,0 20.5,8M3.5,8A1.5,1.5 0 0,0 2,9.5V16.5A1.5,1.5 0 0,0 3.5,18A1.5,1.5 0 0,0 5,16.5V9.5A1.5,1.5 0 0,0 3.5,8M6,18A1,1 0 0,0 7,19H8V22.5A1.5,1.5 0 0,0 9.5,24A1.5,1.5 0 0,0 11,22.5V19H13V22.5A1.5,1.5 0 0,0 14.5,24A1.5,1.5 0 0,0 16,22.5V19H17A1,1 0 0,0 18,18V8H6V18Z" /></svg>
  </a>
  <a href="javascript:;">
    <svg width="42" height="42" viewBox="0 0 24 24"><path d="M18.71,19.5C17.88,20.74 17,21.95 15.66,21.97C14.32,22 13.89,21.18 12.37,21.18C10.84,21.18 10.37,21.95 9.1,22C7.79,22.05 6.8,20.68 5.96,19.47C4.25,17 2.94,12.45 4.7,9.39C5.57,7.87 7.13,6.91 8.82,6.88C10.1,6.86 11.32,7.75 12.11,7.75C12.89,7.75 14.37,6.68 15.92,6.84C16.57,6.87 18.39,7.1 19.56,8.82C19.47,8.88 17.39,10.1 17.41,12.63C17.44,15.65 20.06,16.66 20.09,16.67C20.06,16.74 19.67,18.11 18.71,19.5M13,3.5C13.73,2.67 14.94,2.04 15.94,2C16.07,3.17 15.6,4.35 14.9,5.19C14.21,6.04 13.07,6.7 11.95,6.61C11.8,5.46 12.36,4.26 13,3.5Z"></path></svg>
  </a>
  <a href="javascript:;">
    <svg width="42" height="42" viewBox="0 0 24 24"><path fill="#000000" d="M3,12V6.75L9,5.43V11.91L3,12M20,3V11.75L10,11.9V5.21L20,3M3,13L9,13.09V19.9L3,18.75V13M20,13.25V22L10,20.09V13.1L20,13.25Z" /></svg>
  </a>
  <a href="javascript:;">
    <svg width="42" height="42" viewBox="0 0 24 24"><path fill="#000000" d="M21,14H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10L8,21V22H16V21L14,18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z" /></svg>
  </a>
</nav>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/yshenhua/andx5bfcandx822a_01-Xqwqev */
.nav_box {
  position: absolute;
  bottom: 40px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
}

.nav_box > a {
  box-sizing: border-box;
  width: 120px;
  height: 75px;
  border-bottom: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: .7;
}

.nav_box > a:hover,
.nav_box > a.cur {
  border-bottom-width: 2px;
  opacity: 1;
}

.nav_box > a svg {
  transition: transform .5s;
}

.nav_box a:hover svg {
  transform: translateY(-2px);
}

/*Downloaded from https://www.codeseek.co/yshenhua/andx5bfcandx822a_01-Xqwqev */
const nav = document.getElementById('nav')
nav.addEventListener('mouseover', function (ev) {
  if (ev.target !== ev.currentTarget && !ev.target.className.includes('cur')) {
    ev.currentTarget.querySelectorAll('a').forEach(ele => {
      ele.className = ele.className.split('cur').join('')
    })
    ev.target.className += 'cur'
  }
})

Comments