Navigation Menu Colourful CSS



Khi bạn hover vào thanh điều hướng màu sắc này, dấu chấm sẽ theo các bước di chuyển của bạn đến mục hiện tại.

1. HTML

													

2. CSS

							@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400);

*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body{
	font-family: 'Source Sans Pro', sans-serif;
	background-color: rgb(230, 233, 236);
}

nav{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	text-align: center;
	
	transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	
	&:after {
		content:"";
		display:table;
		clear:both;
	}
	
	ul{
		li{
			list-style: none;
			display: inline-block;
			oveflow: hidden;
			
			a{
				display: block;
				padding: 10px 40px;
				text-decoration: none;
				font-size: 18px;
				position: relative;
				color: fade(white, 80%);
				transform: translateX(-15%);
				border-radius: 50px;
				width: 130%;
				text-align: center;
				transition-duration: 0.25s;
				
				&:hover{
					color: white;
				}
			}
			
			&.active{
				a{
					color: white;
				}
			}
			
			&:nth-child(1){
				a{
					background-color: #69AF23;
				}
			}
			
			&:nth-child(2n){
				a{
					background-color: #008737;
				}
			}
			
			&:nth-child(3n){
				a{
					background-color: #FFC300;
				}
			}
			
			&:nth-child(4n){
				a{
					background-color: #E62D87;
				}
			}
			
			&:nth-child(5n){
				a{
					background-color: #552382;
				}
			}
		}
	}
	
	.dot{
		background-color: red;
		width: 6px;
		height: 6px;
		position: absolute;
		bottom: -20px;
		left: 0;
		border-radius: 50%;
		transition-duration: 0.5s;
	}
}						

3. JAVASCRIPT

							https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

var activeOffset = $('nav ul .active').position().left;
var activeItemWidth = $('nav ul .active').width();

$('document').ready(function(){
	$('.dot').css('left', activeOffset + activeItemWidth / 2);
	var bgColor = $('.active a').css("background-color");
	$('.dot').css('background-color', bgColor);
});

$('nav').mouseout(function(){
	$('.dot').css('left', activeOffset + activeItemWidth / 2);
	var bgColor = $('.active a').css("background-color");
	$('.dot').css('background-color', bgColor);
});

$('nav ul li').hover(function(){
	var navOffset = $(this).position().left;
	var navItemWidth = $(this).width();
	
	$('.dot').css('left', navOffset + navItemWidth / 2);
	
	var bgColor = $('a', this).css("background-color");
	
	$('.dot').css('background-color', bgColor);
});						

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.