Navigation Menu Colourful CSS

Chia sẻ

---

1. HTML

<nav>
	<div class="dot"></div>
	<ul>
		<li class="active"><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">More</a></li>
	</ul>
</nav>

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);
});

---