04/10/2018, 20:18

Stripe Navigation : Mẫu menu cực cool với jQuery

Cách đây vài tuần , trong khi mình lang thang trên Internet thì bắt gặp một mẫu menu rất cool, ngay lập tức mình đã save lại và hôm nay mình sẽ chia sẻ cho các bạn cách làm menu này . Các bạn hoàn toàn có thể áp dụng mẫu này vào ngay trong trang web/blog của các bạn. Xem Demo | Download ...

Cách đây vài tuần , trong khi mình lang thang trên Internet thì bắt gặp một mẫu menu rất cool, ngay lập tức mình đã save lại và hôm nay mình sẽ chia sẻ cho các bạn cách làm menu này . Các bạn hoàn toàn có thể áp dụng mẫu này vào ngay trong trang web/blog của các bạn.

Stripe Navigation : Mẫu menu cực cool với jQuery

Xem Demo | Download

HTML

Cấu trúc HTML sẽ gồm có 2 phần chính : nav.main-nav cho các menu trên cùng, và  div.morph-dropdown-wrapper sẽ là nơi chứa các menu con.

<header class="cd-morph-dropdown">
	<a href="#0" class="nav-trigger">Open Nav<span aria-hidden="true"></span></a>
	
	<nav class="main-nav">
		<ul>
			<li class="has-dropdown gallery" data-content="about">
				<a href="#0">About</a>
			</li>
 
			<li class="has-dropdown links" data-content="pricing">
				<a href="#0">Pricing</a>
			</li>
 
			<li class="has-dropdown button" data-content="contact">
				<a href="#0">Contact</a>
			</li>
		</ul>
	</nav>
	
	<div class="morph-dropdown-wrapper">
		<div class="dropdown-list">
			<ul>
				<li id="about" class="dropdown gallery">
					 
				</li>
 
				<li id="pricing" class="dropdown links">
					 
				</li>
 
				<li id="contact" class="dropdown button">
					 
				</li>
			</ul>
 
			<div class="bg-layer" aria-hidden="true"></div>
		</div>  
	</div>  
</header>

CSS

Trong phần định dạng CSS , chúng ta sẽ khai báo thêm một số class không có ở phần html, những class này sẽ được tự động chèn vào khi người dùng rê chuột vào menu, và tính năng này được thực hiện bởi đoạn jQuery mà chúng ta sẽ xem ở phần sau.

/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Lato", sans-serif;
  color: #1A1A1A;
  background-color: #FFFFFF;
}

a {
  color: #DB6356;
  text-decoration: none;
}

/* -------------------------------- 

 Header

-------------------------------- */
.cd-morph-dropdown {
  position: relative;
  height: 60px;
  background-color: #FFFFFF;
}
.cd-morph-dropdown::before {
  /* never visible - used in JS to check mq */
  content: 'mobile';
  display: none;
}
.cd-morph-dropdown .nav-trigger {
  /* menu icon - visible on small screens only */
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  awidth: 60px;
  /* replace text with icon */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
}
.cd-morph-dropdown .nav-trigger span, .cd-morph-dropdown .nav-trigger span::after, .cd-morph-dropdown .nav-trigger span::before {
  /* these are the 3 lines of the menu icon */
  position: absolute;
  background-color: #1A1A1A;
  height: 3px;
  awidth: 26px;
}
.cd-morph-dropdown .nav-trigger span {
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transition: background-color .3s;
  transition: background-color .3s;
}
.cd-morph-dropdown .nav-trigger span::after, .cd-morph-dropdown .nav-trigger span::before {
  content: ';
  left: 0;
  -webkit-transition: -webkit-transform .3s;
  transition: -webkit-transform .3s;
  transition: transform .3s;
  transition: transform .3s, -webkit-transform .3s;
}
.cd-morph-dropdown .nav-trigger span::before {
  -webkit-transform: translateY(-9px);
      -ms-transform: translateY(-9px);
          transform: translateY(-9px);
}
.cd-morph-dropdown .nav-trigger span::after {
  -webkit-transform: translateY(9px);
      -ms-transform: translateY(9px);
          transform: translateY(9px);
}
.cd-morph-dropdown.nav-open .nav-trigger span {
  background-color: transparent;
}
.cd-morph-dropdown.nav-open .nav-trigger span::before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.cd-morph-dropdown.nav-open .nav-trigger span::after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.cd-morph-dropdown .main-nav {
  display: none;
}
.cd-morph-dropdown .morph-dropdown-wrapper {
  display: none;
  position: absolute;
  top: 60px;
  left: 0;
  awidth: 100%;
  padding: 1.2em 5%;
  box-shadow: inset 0 1px 0 #e6e6e6;
  background-color: #FFFFFF;
}
.cd-morph-dropdown.nav-open .morph-dropdown-wrapper {
  display: block;
}
.cd-morph-dropdown .dropdown-list > ul > li {
  margin-bottom: 3.3em;
}
.cd-morph-dropdown .label {
  display: block;
  font-size: 2.2rem;
  color: #1A1A1A;
  margin-bottom: .8em;
}
.cd-morph-dropdown .content li::after {
  clear: both;
  content: "";
  display: block;
}
.cd-morph-dropdown .gallery .content li {
  margin-bottom: 1.4em;
}
.cd-morph-dropdown .gallery .content a {
  display: block;
}
.cd-morph-dropdown .gallery .content a::before {
  /* icon on the left */
  content: ';
  display: inline-block;
  float: left;
  height: 54px;
  awidth: 54px;
  margin-right: .6em;
  background: red;
  border-radius: 50%;
  -webkit-transition: background .2s;
  transition: background .2s;
}
.cd-morph-dropdown .gallery .content a span, .cd-morph-dropdown .gallery .content a em {
  display: block;
  line-height: 1.2;
}
.cd-morph-dropdown .gallery .content a em {
  font-size: 1.8rem;
  padding: .4em 0 .2em;
  color: #1A1A1A;
}
.cd-morph-dropdown .gallery .content a span {
  font-size: 1.4rem;
  color: #a6a6a6;
}
.cd-morph-dropdown .gallery .content a:hover::before {
  background-color: #1A1A1A;
}
.cd-morph-dropdown .gallery li:nth-of-type(1) a::before {
  background: #f4e58a url(../img/cd-gallery-icons.svg) no-repeat 0 0;
}
.cd-morph-dropdown .gallery li:nth-of-type(2) a::before {
  background: #F4AF6D url(../img/cd-gallery-icons.svg) no-repeat -54px 0;
}
.cd-morph-dropdown .gallery li:nth-of-type(3) a::before {
  background: #DB6356 url(../img/cd-gallery-icons.svg) no-repeat -108px 0;
}
.cd-morph-dropdown .gallery li:nth-of-type(4) a::before {
  background: #8D4645 url(../img/cd-gallery-icons.svg) no-repeat -162px 0;
}
.cd-morph-dropdown .links .content > ul > li {
  margin-top: 1em;
}
.cd-morph-dropdown .links-list a,
.cd-morph-dropdown .btn {
  display: block;
  margin-left: 14px;
  font-size: 2.2rem;
  line-height: 1.6;
}
.cd-morph-dropdown .links-list a:hover,
.cd-morph-dropdown .btn:hover {
  color: #1A1A1A;
}
.cd-morph-dropdown .content h2 {
  color: #a6a6a6;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.3rem;
  margin: 20px 0 10px 14px;
}
@media only screen and (min-awidth: 1000px) {
  .cd-morph-dropdown {
    position: absolute;
    height: 80px;
    left: 0;
    top: 0;
    awidth: 100%;
    padding: 0;
    text-align: center;
    background-color: transparent;
  }
  .cd-morph-dropdown::before {
    content: 'desktop';
  }
  .cd-morph-dropdown .nav-trigger {
    display: none;
  }
  .cd-morph-dropdown .main-nav {
    display: inline-block;
  }
  .cd-morph-dropdown .main-nav > ul > li {
    display: inline-block;
    float: left;
  }
  .cd-morph-dropdown .main-nav > ul > li > a {
    display: block;
    padding: 0 1.8em;
    height: 70px;
    line-height: 70px;
    color: #FFFFFF;
    font-size: 1.8rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: opacity .2s;
    transition: opacity .2s;
  }
  .cd-morph-dropdown.is-dropdown-visible .main-nav > ul > li > a {
    /* main navigation hover effect - on hover, reduce opacity of elements not hovered over */
    opacity: .6;
  }
  .cd-morph-dropdown.is-dropdown-visible .main-nav > ul > li.active > a {
    opacity: 1;
  }
  .cd-morph-dropdown .morph-dropdown-wrapper {
    /* dropdown wrapper - used to create the slide up/slide down effect when dropdown is revealed/hidden */
    display: block;
    top: 58px;
    /* overwrite mobile style */
    awidth: auto;
    padding: 0;
    box-shadow: none;
    background-color: transparent;
    /* Force Hardware acceleration */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    will-change: transform;
    -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
            transform: translateY(20px);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
  }
  .cd-morph-dropdown.is-dropdown-visible .morph-dropdown-wrapper {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
  .cd-morph-dropdown .dropdown-list {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    will-change: transform, awidth, height;
    -webkit-transition: visibility .3s;
    transition: visibility .3s;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  }
  .no-csstransitions .cd-morph-dropdown .dropdown-list {
    display: none;
  }
  .cd-morph-dropdown .dropdown-list::before {
    /* dropdown top triangle */
    content: ';
    position: absolute;
    bottom: 100%;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    height: 0;
    awidth: 0;
    border: 8px solid transparent;
    border-bottom-color: #FFFFFF;
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
  }
  .cd-morph-dropdown .dropdown-list > ul {
    position: relative;
    z-index: 1;
    height: 100%;
    awidth: 100%;
    overflow: hidden;
  }
  .cd-morph-dropdown.is-dropdown-visible .dropdown-list {
    visibility: visible;
    -webkit-transition: awidth .3s, height .3s, -webkit-transform .3s;
    transition: awidth .3s, height .3s, -webkit-transform .3s;
    transition: transform .3s, awidth .3s, height .3s;
    transition: transform .3s, awidth .3s, height .3s, -webkit-transform .3s;
  }
  .cd-morph-dropdown.is-dropdown-visible .dropdown-list::before {
    opacity: 1;
  }
  .cd-morph-dropdown .dropdown {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    awidth: 100%;
    -webkit-transition: opacity .3s, visibility .3s;
    transition: opacity .3s, visibility .3s;
  }
  .cd-morph-dropdown .dropdown.active {
    opacity: 1;
    visibility: visible;
  }
  .cd-morph-dropdown .dropdown.move-left .content {
    -webkit-transform: translateX(-100px);
        -ms-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  .cd-morph-dropdown .dropdown.move-right .content {
    -webkit-transform: translateX(100px);
        -ms-transform: translateX(100px);
            transform: translateX(100px);
  }
  .cd-morph-dropdown .label {
    /* hide the label on bigger devices */
    display: none;
  }
  .cd-morph-dropdown .content {
    padding: 2.2em 1.8em;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    text-align: left;
  }
  .cd-morph-dropdown .content > ul::after {
    clear: both;
    content: "";
    display: block;
  }
  .cd-morph-dropdown .content > ul > li {
    awidth: 48%;
    float: left;
    margin-right: 4%;
    margin-top: 0;
  }
  .cd-morph-dropdown .content > ul > li:nth-of-type(2n) {
    margin-right: 0;
  }
  .cd-morph-dropdown .gallery .content {
    /* you need to set a awidth for the .content elements because they have a position absolute */
    awidth: 510px;
    padding-bottom: .8em;
  }
  .cd-morph-dropdown .gallery .content li {
    margin-bottom: 1.8em;
  }
  .cd-morph-dropdown .links .content > ul > li {
    margin-top: 0;
  }
  .cd-morph-dropdown .links .content,
  .cd-morph-dropdown .button .content {
    awidth: 390px;
  }
  .cd-morph-dropdown .links-list a {
    font-size: 1.6rem;
    margin-left: 0;
  }
  .cd-morph-dropdown .btn {
    display: block;
    awidth: 100%;
    height: 60px;
    margin: 1.5em 0 0;
    font-size: 1.8rem;
    text-align: center;
    color: #FFFFFF;
    line-height: 60px;
    background: #DB6356;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .cd-morph-dropdown .btn:hover {
    background: #1A1A1A;
    color: #FFFFFF;
  }
  .cd-morph-dropdown .content h2 {
    font-size: 1.8rem;
    text-transform: none;
    font-weight: normal;
    color: #1A1A1A;
    margin: 0 0 .6em;
  }
  .cd-morph-dropdown .bg-layer {
    /* morph dropdown background */
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    awidth: 1px;
    background: #FFFFFF;
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    will-change: transform;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .cd-morph-dropdown.is-dropdown-visible .bg-layer {
    opacity: 1;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s, -webkit-transform .3s;
  }
}

/* -------------------------------- 

Main site content

-------------------------------- */
.cd-main-content {
  min-height: 100vh;
  background-color: #548c7e;
}
@media only screen and (min-awidth: 1000px) {
  .cd-main-content {
    padding-top: 80px;
  }
}

jQuery

Đây là phần  phức tạp nhất và cũng là quan trọng nhất của menu, ở mỗi đoạn script đều có ghi chú đính kèm, các bạn có thể hiễu rõ chức năng của từng câu lệnh.

jQuery(document).ready(function($){
	function morphDropdown( element ) {
		this.element = element;
		this.mainNavigation = this.element.find('.main-nav');
		this.mainNavigationItems = this.mainNavigation.find('.has-dropdown');
		this.dropdownList = this.element.find('.dropdown-list');
		this.dropdownWrappers = this.dropdownList.find('.dropdown');
		this.dropdownItems = this.dropdownList.find('.content');
		this.dropdownBg = this.dropdownList.find('.bg-layer');
		this.mq = this.checkMq();
		this.bindEvents();
	}

	morphDropdown.prototype.checkMq = function() {
		//check screen size
		var self = this;
	return window.getComputedStyle(self.element.get(0), '::before').getPropertyValue('content').replace(/"/g, "").replace(/"/g, "").split(', ');
	};

	morphDropdown.prototype.bindEvents = function() {
		var self = this;
		//hover over an item in the main navigation
		this.mainNavigationItems.mouseenter(function(event){
			//hover over one of the nav items -> show dropdown
			self.showDropdown($(this));
		}).mouseleave(function(){
			setTimeout(function(){
				//if not hovering over a nav item or a dropdown -> hide dropdown
				if( self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) self.hideDropdown();
			}, 50);
		});
		
		//hover over the dropdown
		this.dropdownList.mouseleave(function(){
			setTimeout(function(){
				//if not hovering over a dropdown or a nav item -> hide dropdown
				(self.mainNavigation.find('.has-dropdown:hover').length == 0 && self.element.find('.dropdown-list:hover').length == 0 ) && self.hideDropdown();
			}, 50);
		});

		//click on an item in the main navigation -> open a dropdown on a touch device
		this.mainNavigationItems.on('touchstart', function(event){
			var selectedDropdown = self.dropdownList.find('#'+$(this).data('content'));
			if( !self.element.hasClass('is-dropdown-visible') || !selectedDropdown.hasClass('active') ) {
				event.preventDefault();
				self.showDropdown($(this));
			}
		});

		//on small screens, open navigation clicking on the menu icon
		this.element.on('click', '.nav-trigger', function(event){
			event.preventDefault();
			self.element.toggleClass('nav-open');
		});
	};

	morphDropdown.prototype.showDropdown = function(item) {
		this.mq = this.checkMq();
		if( this.mq == 'desktop') {
			var self = this;
			var selectedDropdown = this.dropdownList.find('#'+item.data('content')),
				selectedDropdownHeight = selectedDropdown.innerHeight(),
				selectedDropdownWidth = selectedDropdown.children('.content').innerWidth(),
				selectedDropdownLeft = item.offset().left + item.innerWidth()/2 - selectedDropdownWidth/2;

			//update dropdown position and size
			this.updateDropdown(selectedDropdown, parseInt(selectedDropdownHeight), selectedDropdownWidth, parseInt(selectedDropdownLeft));
			//add active class to the proper dropdown item
			this.element.find('.active').removeClass('active');
			selectedDropdown.addClass('active').removeClass('move-left move-right').prevAll().addClass('move-left').end().nextAll().addClass('move-right');
			item.addClass('active');
			//show the dropdown wrapper if not visible yet
			if( !this.element.hasClass('is-dropdown-visible') ) {
				setTimeout(function(){
					self.element.addClass('is-dropdown-visible');
				}, 10);
			}
		}
	};

	morphDropdown.prototype.updateDropdown = function(dropdownItem, height, awidth, left) {
		this.dropdownList.css({
		    '-moz-transform': 'translateX(' + left + 'px)',
		    '-webkit-transform': 'translateX(' + left + 'px)',
			'-ms-transform': 'translateX(' + left + 'px)',
			'-o-transform': 'translateX(' + left + 'px)',
			'transform': 'translateX(' + left + 'px)',
			'awidth': awidth+'px',
			'height': height+'px'
		});

		this.dropdownBg.css({
			'-moz-transform': 'scaleX(' + awidth + ') scaleY(' + height + ')',
		    '-webkit-transform': 'scaleX(' + awidth + ') scaleY(' + height + ')',
			'-ms-transform': 'scaleX(' + awidth + ') scaleY(' + height + ')',
			'-o-transform': 'scaleX(' + awidth + ') scaleY(' + height + ')',
			'transform': 'scaleX(' + awidth + ') scaleY(' + height + ')'
		});
	};

	morphDropdown.prototype.hideDropdown = function() {
		this.mq = this.checkMq();
		if( this.mq == 'desktop') {
			this.element.removeClass('is-dropdown-visible').find('.active').removeClass('active').end().find('.move-left').removeClass('move-left').end().find('.move-right').removeClass('move-right');
		}
	};

	morphDropdown.prototype.resetDropdown = function() {
		this.mq = this.checkMq();
		if( this.mq == 'mobile') {
			this.dropdownList.removeAttr('style');
		}
	};

	var morphDropdowns = [];
	if( $('.cd-morph-dropdown').length > 0 ) {
		$('.cd-morph-dropdown').each(function(){
			//create a morphDropdown object for each .cd-morph-dropdown
			morphDropdowns.push(new morphDropdown($(this)));
		});

		var resizing = false;

		//on resize, reset dropdown style property
		updateDropdownPosition();
		$(window).on('resize', function(){
			if( !resizing ) {
				resizing =  true;
				(!window.requestAnimationFrame) ? setTimeout(updateDropdownPosition, 300) : window.requestAnimationFrame(updateDropdownPosition);
			}
		});

		function updateDropdownPosition() {
			morphDropdowns.forEach(function(element){
				element.resetDropdown();
			});

			resizing = false;
		};
	}
});

Chúc các bạn thành công !

Tags: jQuery menu menu effect

Chuyên Mục: Javascript

Bài viết được đăng bởi webmaster

Bài liên quan

Stripe Navigation : Mẫu menu cực cool với jQuery

Cách đây vài tuần , trong khi mình lang thang trên Internet thì bắt gặp một mẫu menu rất cool, ngay lập tức mình đã save lại và hôm nay mình sẽ chia sẻ cho các bạn cách làm menu này . Các bạn hoàn toàn có thể áp dụng mẫu này vào ngay trong trang web/blog của các bạn. Xem Demo | Download ...

Trần Trung Dũng viết 20:18 ngày 04/10/2018

Mẫu chia sẻ mạng xã hội cực cool bằng jQuery Plugin

Lại một ngày vất vả nữa đã qua và tiếp tục công việc thường ngày là viết những bài chia sẻ về web cho các bạn. Hôm nay mình sẽ mang đến cho các bạn một hiệu ứng khá đẹp dùng cho người dùng tương tác với các mạng xã hội. Trong bài viết này mình có sử dụng file jQuery plugin và file css đính kèm của ...

Hoàng Hải Đăng viết 20:17 ngày 04/10/2018

Tạo hiệu ứng chèn sản phẩm vào giỏ hàng cực đẹp với jQuery

Hôm nay mình sẽ chia sẻ cho các bạn một hiệu ứng dành cho những trang bán hàng. Với hiệu ứng này, mình đảm bảo là khách hàng của các bạn sẽ hài lòng với trang web mà các bạn thiết kế cho họ. Trong bài viết này mình có chèn thêm jQuery Easing Plugin và các bạn có thể download plugin này tại mục ...

Trần Trung Dũng viết 20:17 ngày 04/10/2018

Tạo mẫu menu cực đẹp với jQuery Plugin

Hôm nay mình sẽ mang đến cho các bạn một mẫu menu với hiệu ứng xoay vòng cực kỳ ấn tượng, với sự trợ giúp của jQuery. Với kiểu menu này, các bạn có thể áp dụng vào bất kì trang web hay blog mà các bạn đang dùng. Xem Demo | Download HTML Trước tiên, chúng ta xây dựng menu với đoạn ...

Trần Trung Dũng viết 20:16 ngày 04/10/2018

Ấn tượng mẫu login form với dây kéo cực cool

Chào tất cả các bạn, hôm nay mình sẽ tiếp tục mang đến cho các bạn một mẫu form login cực cool, đảm bảo các bạn sẽ có thể sử dụng ngay cho chính trang web hoặc blog của các bạn. Xem Demo | Download HTML Các bạn copy theo cấu trúc html bên dưới. <div id="login_el" ...

Hoàng Hải Đăng viết 20:12 ngày 04/10/2018
0