Navigation Menu Slider với Clean CSS

Chia sẻ

---

1. HTML

section#nav-test
	#nav-container
		ul
			li.nav-li.active-nav
				a Home
			li.nav-li
				a Projects
			li.nav-li
				a Pricing
			li.nav-li
				a Contact
		#line

2. CSS

@import url(https://fonts.googleapis.com/css?family=Roboto);
body {
  margin: 0;
  font-family: "Roboto", "Helvetica Neue", "Helvetica",  "Arial", sans-serif;
  background: #eaeaea;
}

section#nav-test {
  height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
section#nav-test #nav-container {
  position: relative;
  margin: 60px auto;
  box-sizing: border-box;
}
section#nav-test #nav-container ul {
  display: -webkit-box;
  display: flex;
  background: #323639;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  padding-left: 30px;
  padding-right: 30px;
  margin: 0;
}
section#nav-test #nav-container ul li {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  min-height: 48px;
  margin-left: 60px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
section#nav-test #nav-container ul li:first-child {
  margin-left: 0;
}
section#nav-test #nav-container ul li a {
  color: #f1f1f1;
}
section#nav-test #nav-container #line {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: red;
  -webkit-transition: all 150ms ease-in-out;
  transition: all 150ms ease-in-out;
}
section#nav-test h1 {
  margin-top: 30px;
  font-weight: 500;
  color: #212121;
}

3. JAVASCRIPT

EXTERNAL JAVASCRIPT:
https://code.jquery.com/jquery-2.2.4.min.js

(function () {
  var $activeWidth, $defaultMarginLeft, $defaultPaddingLeft, $firstChild, $line, $navListItem;

  $line = $('#line');

  $navListItem = $('.nav-li');

  $activeWidth = $('.active-nav').width();

  $firstChild = $('.nav-li:first-child');

  $defaultMarginLeft = parseInt($('.nav-li:first-child').next().css('marginLeft').replace(/\D/g, ''));

  $defaultPaddingLeft = parseInt($('#nav-container > ul').css('padding-left').replace(/\D/g, ''));

  $line.width($activeWidth + 'px');

  $line.css('marginLeft', $defaultPaddingLeft + 'px');

  $navListItem.click(function () {
    var $activeNav, $currentIndex, $currentOffset, $currentWidth, $initWidth, $marginLeftToSet, $this;
    $this = $(this);
    $activeNav = $('.active-nav');
    $currentWidth = $activeNav.width();
    $currentOffset = $activeNav.position().left;
    $currentIndex = $activeNav.index();
    $activeNav.removeClass('active-nav');
    $this.addClass('active-nav');
    if ($this.is($activeNav)) {
      return 0;
    } else {
      if ($this.index() > $currentIndex) {
        if ($activeNav.is($firstChild)) {
          $initWidth = $defaultMarginLeft + $this.width() + $this.position().left - $defaultPaddingLeft;
        } else {
          $initWidth = $this.position().left + $this.width() - $currentOffset;
        }
        $marginLeftToSet = $this.position().left + $defaultMarginLeft + 'px';
        $line.width($initWidth + 'px');
        return setTimeout(function () {
          $line.css('marginLeft', $marginLeftToSet);
          return $line.width($this.width() + 'px');
        }, 175);
      } else {
        if ($this.is($firstChild)) {
          $initWidth = $currentOffset - $defaultPaddingLeft + $defaultMarginLeft + $currentWidth;
          $marginLeftToSet = $this.position().left;
        } else {
          $initWidth = $currentWidth + $currentOffset - $this.position().left;
          $marginLeftToSet = $this.position().left + $defaultMarginLeft;
        }
        $line.css('marginLeft', $marginLeftToSet);
        $line.width($initWidth + 'px');
        return setTimeout(function () {
          return $line.width($this.width() + 'px');
        }, 175);
      }
    }
  });

}).call(this);


//# sourceURL=coffeescript

---