Simple Dot Navigation Style

Developer
Larry Geams Parangan
Size
3,612 Kb
Views
56,672
  1. Simple Dot Navigation Style Previews
  2. Simple Dot Navigation Style HTML Codes
  3. Simple Dot Navigation Style CSS Codes
  4. Simple Dot Navigation Style JS Codes

How do I make an simple dot navigation style?

Clicked one of the dots to view animation/effectCreated an experimental dot navigation perfect used for carousel or fixed sidebar navigation.. What is a simple dot navigation style? How do you make a simple dot navigation style? This script and codes were developed by Larry Geams Parangan on 13 September 2022, Tuesday.

Simple Dot Navigation Style Previews
IQ Test

Simple Dot Navigation Style - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Dot Navigation Style</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="table"> <div class="cell"> <ul class="dots"> <li><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>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Dot Navigation Style - Script Codes CSS Codes

html, body { margin: 0px; padding: 0px; font-family: 'Lato',sans-serif; font-size: 18px; font-weight: 300; height: 100%; color: #fff; background: #fbfbfb; box-sizing: border-box; -moz-box-sizing: border-box; transition: all 0.3s ease-in-out;
}
.table { width: 100%; height: 100%; background: #34495e; display: table;
}
.cell { display: table-cell; vertical-align: middle; margin: auto; text-align: center;
}
.dots { position: relative; display: inline-block; margin: 0; padding: 0; list-style: none; cursor: default;
}
.dots .active a { -webkit-transform: scale3d(1.3, 1.3, 1.3); transform: scale3d(1.3, 1.3, 1.3);
}
.dots .active a:after { height: 100%;
}
.dots li { position: relative; display: block; float: left; margin: 0 16px; width: 20px; height: 20px; cursor: pointer;
}
.dots li a { top: 0; left: 0; width: 100%; height: 100%; outline: none; border-radius: 50%; text-indent: -999em; cursor: pointer; position: absolute; overflow: hidden; background-color: transparent; box-shadow: inset 0 0 0 2px white; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);
}
.dots li a:after { content: ''; position: absolute; bottom: 0; height: 0; left: 0; width: 100%; background-color: #fff; box-shadow: 0 0 1px #fff; -webkit-transition: height 0.3s ease; transition: height 0.3s ease;
}
/*
* Font Face: Lato
*/
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; src: local("Lato Hairline"), local("Lato-Hairline"), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format("woff");
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; src: local("Lato Light"), local("Lato-Light"), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format("woff");
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; src: local("Lato Regular"), local("Lato-Regular"), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format("woff");
}
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; src: local("Lato Bold"), local("Lato-Bold"), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format("woff");
}

Simple Dot Navigation Style - Script Codes JS Codes

$('.dots li').click(function(){ $('.active').removeClass('active'); $(this).addClass('active');
});
Simple Dot Navigation Style - Script Codes
Simple Dot Navigation Style - Script Codes
Home Page Home
Developer Larry Geams Parangan
Username larrygeams
Uploaded September 13, 2022
Rating 3
Size 3,612 Kb
Views 56,672
Do you need developer help for Simple Dot Navigation Style?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Larry Geams Parangan (larrygeams) Script Codes
Name
Image Scale on Hover
Works by Category
Browser Detection - Google Chrome
Click and Hold Button Animation
Simple E-Commerce
Button Confirmation
Slide Toggle Navigation
Window.onload
Drag and Drop
CSS3 Accordion
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!