Glassy Navbar | ReactJs

Author - personCodeatnow

Follow Us On Telegram   Telegram link

Download Code

HTML 
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow | Navigation: Responsive Glassy Navbar with ReactJS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>
<body>
<!-- partial:index.partial.html -->
<div id="app"></div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js'></script><script  src="./script.js"></script>

</body>
</html>
CSS 
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
:root {
  --animation-time: 300ms;
  --app-font-family: Montserrat, sans-serif;
  --app-background-image:
    linear-gradient(to top left, #79a8bb, #b36dd4, #f06699);
  --cpc-menu-background-color: rgba(0, 0, 0, 0.5);
  --cpc-menu-max-width: 320px;
  --cpc-menu-padding: 0.4rem;
  --cpc-menu-border-radius: 0.7rem;
  --cpc-menu-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
  --cpc-menu-links-color: #ffffff;
  --cpc-menu-links-padding: 0.9rem 0.7rem;
  --cpc-menu-links-text-shadow: 0 -1px #000000;
  --cpc-menu-links-border-radius: 0.7rem;
  --cpc-menu-links-transition: background-color 300ms ease-in-out;
  --cpc-menu-links-hover-background-color: rgba(255, 255, 255, 0.5);
  --cpc-icon-margin-right: 0.5rem;
  --cpc-caret-margin-left: 0.5rem;
  --cpc-caret-transform: rotate(0deg) scale(1);
  --cpc-caret-transforming: rotate(90deg) scale(1.2);
  --cpc-caret-transformed: rotate(180deg) scale(1);
  --cpc-sub-menu-background-color: rgba(0, 0, 0, 0.5);
  --cpc-sub-menu-padding: 0.4rem;
  --cpc-sub-menu-border-radius: 0.7rem;
  --cpc-sub-menu-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}

html, body, #app {
  font-size: 16px;
  width: 100%;
  height: 100%;
}

#app {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--app-font-family);
  background: #11131e;
  padding: 2rem;
  overflow: auto;
  box-sizing: border-box;
}

.cpc-menu {
  width: 100%;
  max-width: var(--cpc-menu-max-width);
  background-color: var(--cpc-menu-background-color);
  padding: var(--cpc-menu-padding);
  margin: auto;
  box-sizing: border-box;
  border-radius: var(--cpc-menu-border-radius);
  box-shadow: var(--cpc-menu-box-shadow);
}

.cpc-main, .cpc-sub {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.cpc-main > li, .cpc-sub > li {
  width: 100%;
}
.cpc-main > li > a, .cpc-sub > li > a {
  color: var(--cpc-menu-links-color);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  width: 100%;
  padding: var(--cpc-menu-links-padding);
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  text-shadow: var(--cpc-menu-links-text-shadow);
  border-radius: var(--cpc-menu-links-border-radius);
  transition: var(--cpc-menu-links-transition);
}
.cpc-main > li > a:hover, .cpc-sub > li > a:hover {
  background-color: var(--cpc-menu-links-hover-background-color);
}

.cpc-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.cpc-sub {
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.cpc-caret {
  margin-left: var(--cpc-caret-margin-left);
}
.cpc-caret .cpc-active {
  animation: caret-is-active var(--animation-time) linear forwards;
}
.cpc-caret .cpc-inactive {
  animation: caret-is-active var(--animation-time) linear forwards;
}

.cpc-icon {
  margin-right: var(--cpc-icon-margin-right);
}

.cpc-hidden {
  visibility: hidden;
}

@keyframes caret-is-inactive {
  0% {
    transform: var(--cpc-caret-transform);
  }
  50% {
    transform: var(--cpc-caret-transforming);
  }
  100% {
    transform: var(--cpc-caret-transformed);
  }
}
@keyframes caret-is-active {
  0% {
    transform: var(--cpc-caret-transformed);
  }
  50% {
    transform: var(--cpc-caret-transforming);
  }
  100% {
    transform: var(--cpc-caret-transform);
  }
}
@media (min-width: 576px) {
  .cpc-menu {
    width: auto;
    max-width: none;
  }

  .cpc-main {
    flex-direction: row;
    position: relative;
  }
  .cpc-main > li > a {
    position: relative;
  }

  .cpc-sub {
    background-color: var(--cpc-sub-menu-background-color);
    padding: var(--cpc-sub-menu-padding);
    position: absolute;
    top: 120%;
    border-radius: var(--cpc-sub-menu-border-radius);
    box-shadow: var(--cpc-sub-menu-box-shadow);
  }

  .cpc-hidden {
    display: none;
  }
}
JS 
// TODO: Activate caret active animation

class CpcNavigation extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      jsxData: [],
      submenu: [] };

  }

  componentDidMount() {
    this.setState({ jsxData: this.createMenuJSX() });
  }

  menuClickEvent(i) {
    let submenu = this.state.submenu;
    let tmpmenu = submenu[i];
    let sub = tmpmenu.sub.current;
    let caret = tmpmenu.caret.current;

    if (tmpmenu.active === false) {
      tmpmenu.active = true;

      TweenLite.to(caret, 1, {
        transform: 'rotate(180deg)',
        ease: Elastic.easeOut.config(1, 0.3) });


      TweenLite.to(sub, 1, {
        height: sub.scrollHeight,
        visibility: 'visible',
        ease: Elastic.easeOut.config(1, 0.3) });

    } else {
      tmpmenu.active = false;

      TweenLite.to(caret, 1, {
        transform: 'rotate(0deg)',
        ease: Elastic.easeOut.config(1, 0.3) });


      TweenLite.to(sub, 0.5, {
        height: 0,
        ease: Bounce.easeOut }).
      eventCallback('onComplete', () => {
        TweenLite.to(sub, 0, {
          visibility: 'hidden' });

      });
    }

    submenu[i] = tmpmenu;

    this.setState({ submenu: submenu });
  }

  createMenuJSX(menu = this.props.menu) {
    let link = [];

    for (let i in menu) {
      let m = menu[i];
      let ic = /*#__PURE__*/React.createElement("i", { className: "cpc-icon cpc-hidden fas fa-caret-down" });

      if (typeof m.icon !== 'undefined') {
        ic = /*#__PURE__*/React.createElement("i", { className: 'cpc-icon ' + m.icon });
      }

      if (typeof m.menu === 'undefined') {
        link.push( /*#__PURE__*/
        React.createElement("li", null, /*#__PURE__*/
        React.createElement("a", { href: m.link },
        ic, /*#__PURE__*/
        React.createElement("span", null, i), /*#__PURE__*/
        React.createElement("i", { className: "cpc-caret cpc-hidden fas fa-caret-down" }))));



      } else if (typeof m.menu === 'object') {
        let tmpSubmenu = this.state.submenu;
        let tmpLength = tmpSubmenu.length;

        tmpSubmenu.push({
          'id': m.link,
          'active': false,
          'caret': React.createRef(),
          'sub': React.createRef() });


        link.push( /*#__PURE__*/
        React.createElement("li", null, /*#__PURE__*/
        React.createElement("a", {
          href: m.link,
          onClick: this.menuClickEvent.bind(this, tmpLength) },

        ic, /*#__PURE__*/
        React.createElement("span", null, i), /*#__PURE__*/
        React.createElement("i", {
          className: "cpc-caret fas fa-caret-down",
          ref: tmpSubmenu[tmpLength].caret })), /*#__PURE__*/


        React.createElement("ul", { className: "cpc-sub", ref: tmpSubmenu[tmpLength].sub },
        this.createMenuJSX(m.menu))));




        this.setState({ submenu: tmpSubmenu });
      }
    }

    return link;
  }

  render() {
    return /*#__PURE__*/(
      React.createElement("nav", { className: "cpc-menu" }, /*#__PURE__*/
      React.createElement("ul", { className: "cpc-main" },
      this.state.jsxData)));



  }}


// Navigation menu builder
const menu = {
  'Home': {
    'link': '#home',
    'icon': 'fas fa-home' },

  'About': {
    'link': '#about',
    'icon': 'fas fa-info-circle' },

  'Clients': {
    'link': '#clients',
    'icon': 'fas fa-user-tie',
    'menu': {
      'Burger King': {
        'link': '#burger_king',
        'icon': 'fas fa-check' },

      'Southwest Airlines': {
        'link': '#southwest_airlines',
        'icon': 'fas fa-check' },

      'Levi Strauss': {
        'link': '#levi_strauss',
        'icon': 'fas fa-check' } } },



  'Services': {
    'link': '#services',
    'icon': 'fas fa-cogs',
    'menu': {
      'Print Design': {
        'link': '#print_design',
        'icon': 'fas fa-check' },

      'Web Design': {
        'link': '#web_design',
        'icon': 'fas fa-check' },

      'Mobile App Development': {
        'link': '#mobile_app_development',
        'icon': 'fas fa-check' } } },



  'Contact': {
    'link': '#contact',
    'icon': 'fas fa-phone-square' } };



ReactDOM.render( /*#__PURE__*/
React.createElement(CpcNavigation, { menu: menu }),
document.querySelector('#app'));
Tags

You may like these posts

Show more

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link