< >

CircularNavigation-index2.php


Quell Code


<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>Circular Navigation - Demo 2 | Codrops</title>

<style>
  article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}  
 @import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
    font-family: 'codropsicons';
    src:url('fonts/index.php?fonts&name=codropsicons.eot');
	src:url('fonts/index.php?fonts&name=codropsicons.eot?#iefix') format('embedded-opentype'),
		url('fonts/index.php?fonts&name=codropsicons.woff') format('woff'),
		url('fonts/index.php?fonts&name=codropsicons.ttf') format('truetype'),
		url('fonts/index.php?fonts&name=codropsicons.svg#codropsicons') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: 'Lato', Arial, sans-serif;
}

a, button {
	outline: none;
}

a {
	text-decoration: none;
}

.container > header {
	margin: 0 auto;
	padding: 2em;
	text-align: center;
	background: rgba(0,0,0,0.01);
}

.container > header h1 {
	font-size: 2.625em;
	line-height: 1.3;
	margin: 0;
	font-weight: 300;
}

.container > header span {
	display: block;
	font-size: 60%;
	opacity: 0.7;
	padding: 0 0 0.6em 0.1em;
}

/* To Navigation Style */
.codrops-top {
	background: #f06060;
	background: rgba(255, 255, 255, 0.1);
	text-transform: uppercase;
	width: 100%;
	font-size: 0.69em;
	line-height: 2.2;
}

.codrops-top a {
	text-decoration: none;
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #fff;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.95);
	color: #777;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

.codrops-icon:before {
	font-family: 'codropsicons';
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

/* Demo Buttons Style */
.codrops-demos {
	padding-top: 1em;
	font-size: 0.9em;
}

.codrops-demos a {
	text-decoration: none;
	outline: none;
	display: inline-block;
	margin: 0.5em;
	padding: 0.7em 1.1em;
	border: 3px solid #fff;
	color: #fff;
	font-weight: 700;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
	opacity: 0.6;
}

.container > section {
	padding: 2em;
	font-size: 1.4em;
	max-width: 50em;
	margin: 0 auto;
}

.container > section p {
	padding: 0.8em 0;
	text-align: justify;
	opacity: 0.5;
	font-weight: 300;
	line-height: 1.4;
}

@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}

}   
* {
    position: relative;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
}

html,
body {
	height: 100%;
}

body {
	background: #52be7f;
	color: #fff;
}

.component {
	position: relative;
	margin-bottom: 3em;
	height: 15em;
	background: rgba(0,0,0,0.05);
	font-family: 'Lato', Arial, sans-serif;
}

.component > h2 {
	position: absolute;
	overflow: hidden;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	font-weight: 300;
	font-style: italic;
	font-size: 12em;
	opacity: 0.1;
	cursor: default;
}

.cn-button {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 11;
	margin-top: -2.25em;
	margin-left: -2.25em;
	padding-top: 0em;
	width: 4.5em;
	height: 4.5em;
	border: none;
	border-radius: 50%;
	background: none;
	background-color: #fff;
	color: #52be7f;
	text-align: center;
	font-weight: 700;
	font-size: 1.5em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-backface-visibility: hidden;
}

.csstransforms .cn-wrapper {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 10;
	margin-top: -13em;
	margin-left: -13.5em;
	width: 27em;
	height: 27em;
	border-radius: 50%;
	background: transparent;
	opacity: 0;
	-webkit-transition: all .3s ease 0.3s;
	-moz-transition: all .3s ease 0.3s;
	transition: all .3s ease 0.3s;
	-webkit-transform: scale(0.1);
	-ms-transform: scale(0.1);
	-moz-transform: scale(0.1);
	transform: scale(0.1);
	pointer-events: none;
	overflow: hidden;
}

/*cover to prevent extra space of anchors from being clickable*/
.csstransforms .cn-wrapper:after{
  content:".";
  display:block;
  font-size:2em;
  width:6.2em;
  height:6.2em;
  position: absolute;
  left: 50%;
  margin-left: -3.1em;
  top:50%;
  margin-top: -3.1em;
  border-radius: 50%;
  z-index:10;
  color: transparent;
}

.csstransforms .opened-nav {
	border-radius: 50%;
	opacity: 1;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	transition: all .3s ease;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	pointer-events: auto;
}

.csstransforms .cn-wrapper li {
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: hidden;
	margin-top: -1.3em;
	margin-left: -10em;
	width: 10em;
	height: 10em;
	font-size: 1.5em;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	transition: all .3s ease;
	-webkit-transform: rotate(76deg) skew(60deg);
	-moz-transform: rotate(76deg) skew(60deg);
	-ms-transform: rotate(76deg) skew(60deg);
	transform: rotate(76deg) skew(60deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	transform-origin: 100% 100%;
	pointer-events: none;
}

.csstransforms .cn-wrapper li a {
	position: absolute;
	right: -7.25em;
	bottom: -7.25em;
	display: block;
	width: 14.5em;
	height: 14.5em;
	border-radius: 50%;
	background: #429a67;
	background: -webkit-radial-gradient(transparent 35%, #429a67 35%);
	background: -moz-radial-gradient(transparent 35%, #429a67 35%);
	background: radial-gradient(transparent 35%, #429a67 35%);
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 1.2em;
	line-height: 2;
	-webkit-transform: skew(-60deg) rotate(-75deg) scale(1);
	-moz-transform: skew(-60deg) rotate(-75deg) scale(1);
	-ms-transform: skew(-60deg) rotate(-75deg) scale(1);
	transform: skew(-60deg) rotate(-75deg) scale(1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	pointer-events: auto;
}

.csstransforms .cn-wrapper li a span {
	position: relative;
	top: 1.8em;
	display: block;
	font-size: .5em;
	font-weight: 700;
	text-transform: uppercase;
}

.csstransforms .cn-wrapper li a:hover,
.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
	background: -webkit-radial-gradient(transparent 35%, #449e6a 35%);
	background: -moz-radial-gradient(transparent 35%, #449e6a 35%);
	background: radial-gradient(transparent 35%, #449e6a 35%);
}
.csstransforms .cn-wrapper li a:focus {
    position: fixed; /* fix the displacement bug in webkit browsers when using tab key */
}

.csstransforms .opened-nav li {
	-webkit-transition: all .3s ease .3s;
	-moz-transition: all .3s ease .3s;
	transition: all .3s ease .3s;
}

.csstransforms .opened-nav li:first-child {
	-webkit-transform: rotate(-20deg) skew(60deg);
	-moz-transform: rotate(-20deg) skew(60deg);
	-ms-transform: rotate(-20deg) skew(60deg);
	transform: rotate(-20deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(2) {
	-webkit-transform: rotate(12deg) skew(60deg);
	-moz-transform: rotate(12deg) skew(60deg);
	-ms-transform: rotate(12deg) skew(60deg);
	transform: rotate(12deg) skew(60deg);
}

.csstransforms .opened-nav  li:nth-child(3) {
	-webkit-transform: rotate(44deg) skew(60deg);
	-moz-transform: rotate(44deg) skew(60deg);
	-ms-transform: rotate(44deg) skew(60deg);
	transform: rotate(44deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(4) {
	-webkit-transform: rotate(76deg) skew(60deg);
	-moz-transform: rotate(76deg) skew(60deg);
	-ms-transform: rotate(76deg) skew(60deg);
	transform: rotate(76deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(5) {
	-webkit-transform: rotate(108deg) skew(60deg);
	-moz-transform: rotate(108deg) skew(60deg);
	-ms-transform: rotate(108deg) skew(60deg);
	transform: rotate(108deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(6) {
	-webkit-transform: rotate(140deg) skew(60deg);
	-moz-transform: rotate(140deg) skew(60deg);
	-ms-transform: rotate(140deg) skew(60deg);
	transform: rotate(140deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(7) {
	-webkit-transform: rotate(172deg) skew(60deg);
	-moz-transform: rotate(172deg) skew(60deg);
	-ms-transform: rotate(172deg) skew(60deg);
	transform: rotate(172deg) skew(60deg);
}

.no-csstransforms .cn-wrapper {
	overflow: hidden;
	margin: 10em auto;
	padding: .5em;
	text-align: center;
}

.no-csstransforms .cn-wrapper ul {
	display: inline-block;
}

.no-csstransforms .cn-wrapper li {
	float: left;
	width: 5em;
	height: 5em;
	background-color: #fff;
	text-align: center;
	font-size: 1em;
	line-height: 5em;
}

.no-csstransforms .cn-wrapper li a {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
	background-color: #f8f8f8;
}

.no-csstransforms .cn-wrapper li.active a{
	background-color: #6F325C;
	color: #fff;
}

.no-csstransforms .cn-button {
	display: none;
}

@media only screen and (max-width: 620px) {
	.no-csstransforms li {
		width: 4em;
		height: 4em;
		line-height: 4em;
	}
}

@media only screen and (max-width: 500px) {
	.no-ccstransforms .cn-wrapper {
		padding: .5em;
	}

	.no-csstransforms .cn-wrapper li {
		width: 4em;
		height: 4em;
		font-size: .9em;
		line-height: 4em;
	}
}

@media only screen and (max-width: 480px) {
	.csstransforms .cn-wrapper {
		font-size: .68em;
	}

	.cn-button {
		font-size: 1em;
	}
}

@media only screen and (max-width:420px) {
	.no-csstransforms .cn-wrapper li {
		width: 100%;
		height: 3em;
		line-height: 3em;
	}
}
</style>

		<script src="js/index.php?js$name=modernizr-2.6.2.min.js"></script>
<!--
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
-->

	</head>
	<body>
		<div class="container">
			<!-- Top Navigation -->
			<div class="codrops-top clearfix">
				<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/CreativeLinkEffects/"><span>Previous Demo</span></a>
				<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=16114"><span>Back to the Codrops Article</span></a></span>
			</div>
			<header>
				<h1>Circular Navigation <span>Building a Circular Navigation with CSS Transforms</span></h1>	
				<nav class="codrops-demos">
    				<a class="current-demo" href="CircularNavigation-index1.php">Demo 1</a>
					<a href="CircularNavigation-index2.php">Demo 2</a>
					<a href="interactivedemo-index.html">Intractive demo</a>
				</nav>
			</header>
			<div class="component">
				<h2>Celery swiss chard melon</h2>
				<!-- Start Nav Structure -->
				<button class="cn-button" id="cn-button">Menu</button>
				<div class="cn-wrapper" id="cn-wrapper">
					<ul>
						<li><a href="#"><span>About</span></a></li>
						<li><a href="#"><span>Tutorials</span></a></li>
						<li><a href="#"><span>Articles</span></a></li>
						<li><a href="#"><span>Snippets</span></a></li>
						<li><a href="#"><span>Plugins</span></a></li>
						<li><a href="#"><span>Contact</span></a></li>
						<li><a href="#"><span>Follow</span></a></li>
					 </ul>
				</div>
				<!-- End of Nav Structure -->
			</div>
			<section>
				<p>Soko leek tomatillo quandong winter purslane caulie jícama daikon dandelion bush tomato. Daikon cress amaranth leek cabbage black-eyed pea kakadu plum scallion watercress garbanzo gram caulie welsh onion water spinach tomatillo groundnut desert raisin. Wakame salsify bunya nuts spring onion lotus root prairie turnip fennel onion dandelion black-eyed pea bok choy zucchini taro. Jícama collard greens amaranth bell pepper catsear brussels sprout sweet pepper daikon spring onion aubergine broccoli rabe quandong mustard celery corn groundnut peanut. Mung bean fennel eggplant water spinach bunya nuts sierra leone bologi epazote okra caulie groundnut black-eyed pea parsnip fava bean squash.</p>
				<p>Parsnip tomatillo swiss chard garbanzo gourd potato silver beet. Celery swiss chard melon zucchini arugula pea quandong beet greens radish artichoke black-eyed pea endive winter purslane horseradish garlic amaranth collard greens chickpea. Rock melon pumpkin collard greens celery broccoli rabe endive nori brussels sprout gourd courgette sea lettuce artichoke desert raisin coriander chard.</p>
				<p>Collard greens ricebean horseradish wattle seed chard epazote potato peanut gram earthnut pea spinach yarrow desert raisin salad mung bean summer purslane fennel. Water spinach celery cucumber grape cauliflower nori daikon sweet pepper endive lentil turnip greens catsear leek beet greens. Melon seakale parsnip soybean bamboo shoot fennel scallion. Coriander groundnut squash corn aubergine bitterleaf azuki bean dandelion courgette broccoli rabe. Chickweed salsify chickweed groundnut nori okra lentil water spinach rock melon broccoli. Soko leek tomatillo quandong winter purslane caulie jícama daikon dandelion bush tomato. Daikon cress amaranth leek cabbage black-eyed pea kakadu plum scallion watercress garbanzo gram caulie welsh onion water spinach tomatillo groundnut desert raisin. Wakame salsify bunya nuts spring onion lotus root prairie turnip fennel onion dandelion black-eyed pea bok choy zucchini taro. Jícama collard greens amaranth bell pepper catsear brussels sprout sweet pepper daikon spring onion aubergine broccoli rabe quandong mustard celery corn groundnut peanut. Mung bean fennel eggplant water spinach bunya nuts sierra leone bologi epazote okra caulie groundnut black-eyed pea parsnip fava bean squash.</p>
				<p>Parsnip tomatillo swiss chard garbanzo gourd potato silver beet. Celery swiss chard melon zucchini arugula pea quandong beet greens radish artichoke black-eyed pea endive winter purslane horseradish garlic amaranth collard greens chickpea. Rock melon pumpkin collard greens celery broccoli rabe endive nori brussels sprout gourd courgette sea lettuce artichoke desert raisin coriander chard.</p>
				<p>Collard greens ricebean horseradish wattle seed chard epazote potato peanut gram earthnut pea spinach yarrow desert raisin salad mung bean summer purslane fennel. Water spinach celery cucumber grape cauliflower nori daikon sweet pepper endive lentil turnip greens catsear leek beet greens. Melon seakale parsnip soybean bamboo shoot fennel scallion. Coriander groundnut squash corn aubergine bitterleaf azuki bean dandelion courgette broccoli rabe. Chickweed salsify chickweed groundnut nori okra lentil water spinach rock melon broccoli.</p>
			</section>
		</div><!-- /container -->
		<script src="js/index.php?js$name=polyfills.js"></script>
		<script>
    	 (function(){

    var button = document.getElementById('cn-button'),
    wrapper = document.getElementById('cn-wrapper');

    //open and close menu when the button is clicked
	var open = false;
	button.addEventListener('click', handler, false);

	function handler(){
	  if(!open){
	    this.innerHTML = "Close";
	    classie.add(wrapper, 'opened-nav');
	  }
	  else{
	    this.innerHTML = "Menu";
		classie.remove(wrapper, 'opened-nav');
	  }
	  open = !open;
	}
	function closeWrapper(){
		classie.remove(wrapper, 'opened-nav');
	}

})();

         
		</script>
		<!-- For the demo ad only 
<script src="http://tympanus.net/codrops/adpacks/demoad.js"></script>
-->
	</body>
</html>