Navigation Menu Slider với Clean CSS



Đây là một điều hướng CSS rất mượt với một thanh trượt cực cool.

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						



Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.