Pure CSS3 breadcrumb navigation

Developer
Arkev
Size
3,222 Kb
Views
38,456
  1. Pure CSS3 breadcrumb navigation Previews
  2. Pure CSS3 breadcrumb navigation HTML Codes
  3. Pure CSS3 breadcrumb navigation CSS Codes
  4. Pure CSS3 breadcrumb navigation JS Codes

How do I make an pure css3 breadcrumb navigation?

Breadcrumb navigation using pure CSS3. What is a pure css3 breadcrumb navigation? How do you make a pure css3 breadcrumb navigation? This script and codes were developed by Arkev on 10 August 2022, Wednesday.

Pure CSS3 breadcrumb navigation Previews
IQ Test

Pure CSS3 breadcrumb navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS3 breadcrumb navigation</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- a simple div with some links -->
<div class="breadcrumb">	<a href="#" class="active">Browse</a>	<a href="#">Compare</a>	<a href="#">Order Confirmation</a>	<a href="#">Checkout</a>
</div>
<br /><br />
<!-- another version - flat style with animated hover effect -->
<div class="breadcrumb flat">	<a href="#" class="active">Browse</a>	<a href="#">Compare</a>	<a href="#">Order Confirmation</a>	<a href="#">Checkout</a>
</div>
<!-- Prefixfree -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script> <script src="js/index.js"></script>
</body>
</html>

Pure CSS3 breadcrumb navigation - Script Codes CSS Codes

/*custom font*/
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);
* {margin: 0; padding: 0;}
html, body {min-height: 100%;}
body {	text-align: center;	padding-top: 100px;	background: #689976;	background: linear-gradient(#689976, #ACDACC);	font-family: 'Merriweather Sans', arial, verdana;
}
.breadcrumb {	/*centering*/	display: inline-block;	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);	overflow: hidden;	border-radius: 5px;	/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/	counter-reset: flag;
}
.breadcrumb a {	text-decoration: none;	outline: none;	display: block;	float: left;	font-size: 12px;	line-height: 36px;	color: white;	/*need more margin on the left of links to accomodate the numbers*/	padding: 0 10px 0 60px;	background: #666;	background: linear-gradient(#666, #333);	position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {	padding-left: 46px;	border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb a:first-child:before {	left: 14px;
}
.breadcrumb a:last-child {	border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/	padding-right: 20px;
}
/*hover/active styles*/
.breadcrumb a.active, .breadcrumb a:hover{	background: #333;	background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {	background: #333;	background: linear-gradient(135deg, #333, #000);
}
/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {	content: '';	position: absolute;	top: 0;	right: -18px; /*half of square's length*/	/*same dimension as the line-height of .breadcrumb a */	width: 36px;	height: 36px;	/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:	length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)	if diagonal required = 1; length = 1/1.414 = 0.707*/	transform: scale(0.707) rotate(45deg);	/*we need to prevent the arrows from getting buried under the next link*/	z-index: 1;	/*background same as links but the gradient will be rotated to compensate with the transform applied*/	background: #666;	background: linear-gradient(135deg, #666, #333);	/*stylish arrow design using box shadow*/	box-shadow:	2px -2px 0 2px rgba(0, 0, 0, 0.4),	3px -3px 0 2px rgba(255, 255, 255, 0.1);	/*	5px - for rounded arrows and	50px - to prevent hover glitches on the border created using shadows*/	border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {	content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {	content: counter(flag);	counter-increment: flag;	/*some styles now*/	border-radius: 100%;	width: 20px;	height: 20px;	line-height: 20px;	margin: 8px 0;	position: absolute;	top: 0;	left: 30px;	background: #444;	background: linear-gradient(#444, #222);	font-weight: bold;
}
.flat a, .flat a:after {	background: white;	color: black;	transition: all 0.5s;
}
.flat a:before {	background: white;	box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active,
.flat a:hover:after, .flat a.active:after{	background: #9EEB62;
}

Pure CSS3 breadcrumb navigation - Script Codes JS Codes

// no requiere javascript
Pure CSS3 breadcrumb navigation - Script Codes
Pure CSS3 breadcrumb navigation - Script Codes
Home Page Home
Developer Arkev
Username arkev
Uploaded August 10, 2022
Rating 4.5
Size 3,222 Kb
Views 38,456
Do you need developer help for Pure CSS3 breadcrumb navigation?

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!

Arkev (arkev) Script Codes
Name
Mapa hgm prueba
Fake Login page with jQuery
Slider vertical
Snake game using HTML5
Vertical accordion menu using jQuery and CSS3
Stopwatch using CSS3
CSS3 pricing table
Encabezados persistentes
Lightbox Gallery with Jquery and CSS3
Leyenda de Tifis
Create amazing SEO 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!