Dot Navigation Styles

Today we'd like to share some subtle effects and styles for simple dot navigation with you. These styles could, for example, be used for a page scroll navigation or a thumbnail preview, in a vertical or horizontal fashion.

DotNavigationStyles

View demo Download source

Small UI elements usually don’t get too much attention when it comes to creative effects. They are often neglected because of their size. But they can offer a great opportunity to add some subtle, yet interesting effects. Recently, you might have seen some kind of dot navigation with a vertical or horizontal layout for scrolling a website to a section. Today we want to share a set of inspirational dot navigation styles with very subtle effects when we hover or when we click on them. For the effects we employ several techniques, including transitions on pseudo-elements, perspective and SVG.

Note that some effects might not work as intended in some browsers (SVG transition, 3D transform-style). For older browsers you might have to add a simple fallback for the selected dot in some examples.

For the structure we’ll have an unordered list with links:

<div class="dotstyle dotstyle-fillup">
	<ul>
		<li class="current"><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Products</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>

For some examples, we also use an additional empty list element, i.e. in order to “move” the current item in the “dot move” style.

We define some common styles:

.dotstyle ul {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	cursor: default;
}

.dotstyle li {
	position: relative;
	display: block;
	float: left;
	margin: 0 16px;
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.dotstyle li a {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	outline: none;
	border-radius: 50%;
	background-color: #fff;
	background-color: rgba(255,255,255,0.3);
	text-indent: -999em;
	cursor: pointer; /* make the text accessible to screen readers */
	position: absolute;
}

An example for a style and subtle effect is the following one, where we “fill” the inner circle. We do that by setting the link to overflow hidden and using a pseudo-element as the filling part:

/* Fill up */
.dotstyle-fillup li a {
	overflow: hidden;
	background-color: rgba(0,0,0,0);
	box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
	transition: background 0.3s;
}

.dotstyle-fillup li a::after {
	content: '';
	position: absolute;
	bottom: 0;
	height: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 0 1px #fff;
	transition: height 0.3s;
}

.dotstyle-fillup li a:hover,
.dotstyle-fillup li a:focus {
	background-color: rgba(0,0,0,0.2);
}

.dotstyle-fillup li.current a::after {
	height: 100%;
}

Another interesting example is the stroke that we draw using SVG and transitioning the stroke-dashoffset of the circle shape:

/* SVG draw circle stroke */	
.dotstyle-drawcircle li {
	width: 18px;
	height: 18px;
}

.dotstyle-drawcircle li a {
	top: 3px;
	left: 3px;
	width: 12px;
	height: 12px;
	background-color: #c44d48;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.dotstyle-drawcircle li svg {
	z-index: 10;
}

.dotstyle-drawcircle li svg circle {
	opacity: 0;
	fill: none;
	stroke: #fff;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 39 39; 
	stroke-dashoffset: 39; /* ~ length of circle path (pi*2r) */
	transition: stroke-dashoffset 0.3s, opacity 0.3s;
}

.dotstyle-drawcircle li.current a,
.dotstyle-drawcircle li a:hover,
.dotstyle-drawcircle li a:focus {
	opacity: 0.5;
}

.dotstyle-drawcircle li.current svg circle {
    opacity: 1;
    stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.3s, opacity 0.15s;
}

For the “hop” effect we also use an extra bit of JavaScript in order to add another class to the current item which indicates if the previous current item was on the right. This will allow us to change the transform origin and let the “hop” happen from the right.

Hope you enjoy these styles and find them inspiring!

View demo Download source

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.