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:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 33

    • 3

      cheapest way to do that is by removing float:left inside “.dogstyle li{}”

  1. 4

    As always, the effects are splendid.

    I’ve noticed though there’s been a trend of articles without the iconic walkthrough of how most of the effects came in fruition; That’s what the github issues section and the ‘contact us’ section are for, I guess.

    At the same time, I’m surprised there isn’t a gittip button or plans of a CoDrops book (going through the nuts and bolts of the most advanced examples of SVG, CSS & JavaScript awesomeness on this site). yet.

  2. 5

    This is awesome!
    However when I tried it the animation works fine but the buttons are not. I figured out that the code below is the reason. I m just new in web development and I can’t fully understand each character (in the code below) means.

    [].slice.call( document.querySelectorAll( ‘.dotstyle > ul’ ) ).forEach( function( nav ) {
    new DotNav( nav, {
    callback : function( idx ) {
    //console.log( idx )
    }
    } );
    } );

    Help please. Thanks!

  3. 6

    Another idea to fill the circles can be effects similar to filling it with pencil. It looks great when implemented just in black and white.

  4. 7

    Great work!!

    I’ve used the tooltip version, you could add -ms-transform to the CSS to cater for IE9

    @Mariam, to make vertical add clear:both to the li tag in CSS, then adjust the margin

  5. 9

    Hello, I am trying to use this for my website. It works for Chrome and Mozilla. But doesn’t show up at all in IE and Safari. I have added webkit equivalents of box-shadow and border-radius, but that hasnt helped. Is there anything more that I am missing? Any help will be appreciated. Thanks.

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>