Tạo bài viết
Đăng ký
04/10/2018, 20:06

Hiệu ứng menu xoay vòng kiểu 3D với CSS3 và jQuery

Để tạo ấn tượng cho khách hàng cũng như gây thu hút người dùng, thì ngoài việc viết tốt nội dung trên trang web hoặc blog, thì các bạn cũng nên có những hiệu ứng ” độc và lạ “. Hôm nay, trong bài viết này, mính sẽ chia sẻ cho các bạn một mẫu menu với hiệu ứng 3D cực đẹp và chuyên ...

Để tạo ấn tượng cho khách hàng cũng như gây thu hút người dùng, thì ngoài việc viết tốt nội dung trên trang web hoặc blog, thì các bạn cũng nên có những hiệu ứng ” độc và lạ “. Hôm nay, trong bài viết này, mính sẽ chia sẻ cho các bạn một mẫu menu với hiệu ứng 3D cực đẹp và chuyên nghiệp. Mình tin chắc là các bạn sẽ áp dụng rất nhiều cho các mẫu thiết kế web của các bạn sau này.

3d-rotating-navigation

Xem Demo | Download

HTML

Để tạo được menu, các  bạn cần có khung chuẩn html với 3 phần như sau :

 – Phần header dùng để chứa button , khi người dùng click vào button này, nó sẽ hiển thị menu.

<header class="cd-header">
		<a href="#0" class="cd-3d-nav-trigger">
			Menu
			<span></span>
		</a>
	</header>  

 – Phần thứ 2 sẽ là nội dung trên trang web hay blog.

<main>
	 
</main>

Phần thứ 3 sẽ là danh sách các menu mà chúng ta muốn có trên trang web.

<nav class="cd-3d-nav-container">
		<ul class="cd-3d-nav">
			<li class="cd-selected">
				<a href="#0">Dashboard</a>
			</li>

			<li>
				<a href="#0">Projects</a>
			</li>

			<li>
				<a href="#0">Images</a>
			</li>

			<li>
				<a href="#0">Settings</a>
			</li>

			<li>
				<a href="#0">New</a>
			</li>
		</ul>  

		<span class="cd-marker color-1"></span>
	</nav>  

CSS

Bây giờ là lúc chúng ta định dạng hiển thị cho từng phần bằng CSS. Đầu tiên là phần header.

.cd-header {
  height: 80px;
  awidth: 90%;
  margin: 0 auto;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  .cd-header:after {
    content: "";
    display: table;
    clear: both; }
  .cd-header.nav-is-visible {
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
    transform: translateY(80px); }
  @media only screen and (min-awidth: 768px) {
    .cd-header.nav-is-visible {
      -webkit-transform: translateY(170px);
      -moz-transform: translateY(170px);
      -ms-transform: translateY(170px);
      -o-transform: translateY(170px);
      transform: translateY(170px); } }

.cd-3d-nav-trigger {
  position: relative;
  float: right;
  height: 45px;
  awidth: 45px;
  margin-top: 18px;
  /* replace text with background image */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent; }
  .cd-3d-nav-trigger span,
  .cd-3d-nav-trigger span::before,
  .cd-3d-nav-trigger span::after {
    /* hamburger icon in CSS */
    position: absolute;
    awidth: 28px;
    height: 3px;
    background-color: #FFF;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
  .cd-3d-nav-trigger span {
    /* this is the central line */
    top: 21px;
    left: 8px;
    -webkit-transition: background 0.2s 0.5s;
    -moz-transition: background 0.2s 0.5s;
    transition: background 0.2s 0.5s; }
    .cd-3d-nav-trigger span::before, .cd-3d-nav-trigger span:after {
      /* these are the upper and lower lines */
      content: ';
      left: 0;
      -webkit-transition: -webkit-transform 0.2s 0.5s;
      -moz-transition: -moz-transform 0.2s 0.5s;
      transition: transform 0.2s 0.5s; }
    .cd-3d-nav-trigger span::before {
      bottom: 8px; }
    .cd-3d-nav-trigger span::after {
      top: 8px; }
  .nav-is-visible .cd-3d-nav-trigger span {
    /* hide line in the center */
    background-color: rgba(255, 255, 255, 0); }
    .nav-is-visible .cd-3d-nav-trigger span::before, .nav-is-visible .cd-3d-nav-trigger span::after {
      /* keep visible other 2 lines */
      background-color: white; }
    .nav-is-visible .cd-3d-nav-trigger span::before {
      -webkit-transform: translateY(8px) rotate(-45deg);
      -moz-transform: translateY(8px) rotate(-45deg);
      -ms-transform: translateY(8px) rotate(-45deg);
      -o-transform: translateY(8px) rotate(-45deg);
      transform: translateY(8px) rotate(-45deg); }
    .nav-is-visible .cd-3d-nav-trigger span::after {
      -webkit-transform: translateY(-8px) rotate(45deg);
      -moz-transform: translateY(-8px) rotate(45deg);
      -ms-transform: translateY(-8px) rotate(45deg);
      -o-transform: translateY(-8px) rotate(45deg);
      transform: translateY(-8px) rotate(45deg); }

Trong đoạn css bên trên, chúng ta có định dạng cho một số class không có sẵn ở khung html, đây là những class sẽ được jQuery tự động chèn vào khi chúng ta nhấn nút hiển thị menu. Chúng ta sẽ tiếp tục định dạng css cho phần menu chính.

.cd-3d-nav-container {
  /* this is the 3D navigation container */
  position: fixed;
  top: 0;
  left: 0;
  height: 80px;
  awidth: 100%;
  background-color: #000000;
  visibility: hidden;
  /* enable a 3D-space for children elements */
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
  -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
  transition: transform 0.5s 0s, visibility 0s 0.5s; }
  .cd-3d-nav-container.nav-is-visible {
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.5s 0s, visibility 0.5s 0s;
    -moz-transition: -moz-transform 0.5s 0s, visibility 0.5s 0s;
    transition: transform 0.5s 0s, visibility 0.5s 0s; }
  @media only screen and (min-awidth: 768px) {
    .cd-3d-nav-container {
      height: 170px; } }

.cd-3d-nav {
  /* this is the 3D rotating navigation */
  position: relative;
  height: 100%;
  background-color: #343c55;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s; }
  .cd-3d-nav::after {
    /* menu dark cover layer - to enhance perspective effect */
    content: ';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    awidth: 100%;
    background-color: #000000;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s 0s, visibility 0.5s 0s;
    -moz-transition: opacity 0.5s 0s, visibility 0.5s 0s;
    transition: opacity 0.5s 0s, visibility 0.5s 0s; }
  .cd-3d-nav li {
    height: 100%;
    awidth: 20%;
    float: left; }
    .cd-3d-nav li:first-of-type a::before {
      background-image: url(../img/icon-1.svg); }
    .cd-3d-nav li:nth-of-type(2) a::before {
      background-image: url(../img/icon-2.svg); }
    .cd-3d-nav li:nth-of-type(3) a::before {
      background-image: url(../img/icon-3.svg); }
    .cd-3d-nav li:nth-of-type(4) a::before {
      background-image: url(../img/icon-4.svg); }
    .cd-3d-nav li:nth-of-type(5) a::before {
      background-image: url(../img/icon-5.svg); }
  .cd-3d-nav a {
    position: relative;
    display: block;
    height: 100%;
    color: transparent;
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    transition: background-color 0.2s; }
    .cd-3d-nav a::before {
      /* navigation icons */
      content: ';
      height: 32px;
      awidth: 32px;
      position: absolute;
      left: 50%;
      top: 50%;
      bottom: auto;
      right: auto;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      background-size: 32px 64px;
      background-repeat: no-repeat;
      background-position: 0 0; }
    .no-touch .cd-3d-nav a:hover {
      background-color: #2b3145; }
  .cd-3d-nav .cd-selected a {
    background-color: #212635; }
    .no-touch .cd-3d-nav .cd-selected a:hover {
      background-color: #212635; }
    .cd-3d-nav .cd-selected a::before {
      background-position: 0 -32px; }
  .nav-is-visible .cd-3d-nav {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); }
    .nav-is-visible .cd-3d-nav::after {
      /* menu cover layer - hide it when navigation is visible */
      opacity: 0;
      visibility: hidden;
      -webkit-transition: opacity 0.5s 0s, visibility 0s 0.5s;
      -moz-transition: opacity 0.5s 0s, visibility 0s 0.5s;
      transition: opacity 0.5s 0s, visibility 0s 0.5s; }
  @media only screen and (min-awidth: 768px) {
    .cd-3d-nav a {
      padding: 7.6em 1em 0;
      color: #ffffff;
      font-size: 1.3rem;
      font-weight: 600;
      text-align: center;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      /* truncate text with ellipsis if too long */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .cd-3d-nav a::before {
        top: 4.4em;
        left: 50%;
        right: auto;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%); } }

.cd-marker {
  /* line at the bottom of nav selected item */
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  awidth: 20%;
  background-color: currentColor;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: translateZ(0) rotateX(90deg);
  -moz-transform: translateZ(0) rotateX(90deg);
  -ms-transform: translateZ(0) rotateX(90deg);
  -o-transform: translateZ(0) rotateX(90deg);
  transform: translateZ(0) rotateX(90deg);
  -webkit-transition: -webkit-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
  -moz-transition: -moz-transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s;
  transition: transform 0.5s, left 0.5s, color 0.5s, background-color 0.5s; }
  .cd-marker::before {
    /* triangle at the bottom of nav selected item */
    content: ';
    position: absolute;
    bottom: 3px;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 0;
    awidth: 0;
    border: 10px solid transparent;
    border-bottom-color: inherit; }
  .nav-is-visible .cd-marker {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0); }

/* these are the colors of the markers - line + arrow */
.color-1 {
  color: #9a57bd; }

.color-2 {
  color: #c96aa4; }

.color-3 {
  color: #d6915e; }

.color-4 {
  color: #5397c7; }

.color-5 {
  color: #77cd91; }

Cuối cùng là phần nội dung.

main {
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  main h1 {
    text-align: center;
    font-size: 2.4rem;
    font-weight: 300;
    color: #ffffff;
    margin: 2em auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
  main.nav-is-visible {
    -webkit-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -ms-transform: translateY(80px);
    -o-transform: translateY(80px);
    transform: translateY(80px); }
  @media only screen and (min-awidth: 768px) {
    main.nav-is-visible {
      -webkit-transform: translateY(170px);
      -moz-transform: translateY(170px);
      -ms-transform: translateY(170px);
      -o-transform: translateY(170px);
      transform: translateY(170px); }
    main h1 {
      font-size: 3.6rem;
      margin: 4em auto; } }

jQuery

Việc cuối cùng mà các bạn cần làm là copy đoạn script sau để hiệu ứng có thể chạy được.

jQuery(document).ready(function($){
	//toggle 3d navigation
	$('.cd-3d-nav-trigger').on('click', function(){
		toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
	});

	//select a new item from the 3d navigation
	$('.cd-3d-nav a').on('click', function(){
		var selected = $(this);
		selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected');
		updateSelectedNav('close');
	});

	$(window).on('resize', function(){
		window.requestAnimationFrame(updateSelectedNav);
	});

	function toggle3dBlock(addOrRemove) {
		if(typeof(addOrRemove)==='undefined') addOrRemove = true;
		$('.cd-header').toggleClass('nav-is-visible', addOrRemove);
		$('main').toggleClass('nav-is-visible', addOrRemove);
		$('.cd-3d-nav-container').toggleClass('nav-is-visible', addOrRemove);
	}

	//this function update the .cd-marker position
	function updateSelectedNav(type) {
		var selectedItem = $('.cd-selected'),
			selectedItemPosition = selectedItem.index() + 1,
			leftPosition = selectedItem.offset().left,
			backgroundColor = selectedItem.data('color');

		$('.cd-marker').removeClassPrefix('color').addClass('color-'+ selectedItemPosition).css({
			'left': leftPosition,
		});
		if( type == 'close') {
			$('.cd-marker').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
				toggle3dBlock(false);
			});
		}
	}

	$.fn.removeClassPrefix = function(prefix) {
	    this.each(function(i, el) {
	        var classes = el.className.split(" ").filter(function(c) {
	            return c.lastIndexOf(prefix, 0) !== 0;
	        });
	        el.className = $.trim(classes.join(" "));
	    });
	    return this;
	};
});

Mình hy vọng với bài viết này, các bạn sẽ có thêm một chút sáng tạo cho trang web hay blog của mình với những hiệu ứng mới và độc cho khách hàng hay người dùng.

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

Tags: 3D effect 3d menu css3 jQuery menu

Chuyên Mục: Css, Javascript

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

Tạ Quốc Bảo

23 chủ đề

7270 bài viết

Có thể bạn quan tâm
0
Các chủ đề đang được quan tâm
phần mềm lập trình php | lập trình web php + mysql | khóa học lập trình php | tự học lập trình php | học php cơ bản thachpham | Code24h | Cho thuê phòng trọ hà nội | Cho thuê phòng trọ bình thạnh | Cho thuê phòng trọ | Cho thuê nhà trọ
Đăng ký

Đăng ký nhận thông báo

Các bài học thú vị sẽ được gửi đến inbox của bạn

HỖ TRỢ HỌC VIÊN
VỀ CODE24H
HỢP TÁC VÀ LIÊN KẾT
KẾT NỐI VỚI CHÚNG TÔI
TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI

CCode 24h, code mọi lúc, mọi nơi

© Copy right 2018 - 2024