Windows 8 Style Tile Navigation

Developer
Toby
Size
4,384 Kb
Views
4,048
  1. Windows 8 Style Tile Navigation Previews
  2. Windows 8 Style Tile Navigation HTML Codes
  3. Windows 8 Style Tile Navigation CSS Codes
  4. Windows 8 Style Tile Navigation JS Codes

How do I make an windows 8 style tile navigation?

Inspired by Windows 8 tiles, a vertical navigation bar complete with the current time and date. . What is a windows 8 style tile navigation? How do you make a windows 8 style tile navigation? This script and codes were developed by Toby on 24 January 2023, Tuesday.

Windows 8 Style Tile Navigation Previews
IQ Test

Windows 8 Style Tile Navigation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Windows 8 Style Tile Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <!--[if !HTML5]> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <![endif]--> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Home – Web designer &amp; front-end developer – Hi, I’m Toby Dennison</title>
</head>
<nav role='navigation'> <ul> <li class="active"><a href="#">A Casa Mia</a></li> <li><a href="#">My Work</a></li> <li><a href="#">My Process</a></li> <li><a href="#">About Me</a></li> <li><a href="#">My Journal</a></li> </ul> <!-- Date --> <div class="box"> <div class="date"> <div id="daymonth"></div> <div id="year"></div> </div> </div> <div class="menu-bg"></div>
</nav>
<!-- Clock -->
<span class="clock"></span> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Windows 8 Style Tile Navigation - Script Codes CSS Codes

html { background-repeat: no-repeat; background-image: url('https://i.imgur.com/sbZbohF.jpg'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
* { box-sizing:border-box; outline:0;
}
body { /*background: #f9f9f9; /* Original #EEE */ font-family: "Open Sans", sans-serif; /* font-size:13px; Original */ font-size: 16px; /* New! */
}
a, li { transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
}
a { color:white; text-decoration:none;
}
li { list-style-type: none;
}
nav { width: 190px; height: 768px; text-align: center; /* float:left; Original */ position:relative; /* background:#333; Original */ /* background:#1b1b1b; Modified */ /*background:#033671; /* New! */ /* margin-top: -13px; Normal */ margin-top: 0px; margin-left: -48px; /* padding: 10px 0; Original */ padding: 118.5px 0; /* Space for Date & Time */ color: white; line-height: 80px; /* For Icons on the Left */ /* line-height: 100px; /* For Windows 8 tiles! */ /*border-radius:5px; box-shadow: -2px 1px 3px 0px rgba(0, 0, 0, 0.5);*/
}
nav ul li { position:relative; /* padding: 0 20px; Modified */ padding: 0 5px; /* Modified */
}
nav ul li:hover { /* background: crimson; Original Colours border-left: 5px solid #B31131; */ background: #0562ca; /* Tab Fill */ /*border-left: 5px solid #033671; /* Left Tab */
}
nav ul li:hover:before { content: ''; border-color: transparent #EEE transparent transparent ; right: 0; /* border-width:10px; Original */ border-width:0px; /* Modified */ position: absolute; border-style: solid; top: 5px;
}
.active { /* background: crimson; Original Colours border-left: 5px solid #B31131; */ background: #0562ca; /* Tab Fill */ /*border-left: 5px solid #033671; /* Left Tab */
}
.active:before { content: ''; border-color: transparent #EEE transparent transparent ; right: 0; /* border-width:10px; Original */ border-width:0px; /* Modified */ position: absolute; border-style: solid; top: 5px;
}
/* Clock */
.clock { margin-top: -756px; /* Top 776 */ margin-left: -3px; /* position: relative; /* Original */ position:absolute; /* New! */	font-family: "Sullivan", monaco,consolas,"courier new",monospace;	/* font-size:3.5rem; /* Original */ font-size:1.1rem; /* Updated! */	line-height:1.375; text-align: center;
}
.clock:before,
.clock:after {	position:absolute;	top:0;	bottom:0;	content:':';	z-index:2;	line-height:1.15; /* color:#333; Updated! */	color:#eee; /* Updated! */
}
.clock:before {	left:2.325em;
}
.clock:after {	right:2.325em;
}
.clock span {	position:relative;	display:inline-block;	padding:0 .25em;	margin:0 .06125em;	z-index:1;	-webkit-transform:perspective(750);	-moz-transform:perspective(750);	-ms-transform:perspective(750);	transform:perspective(750);	-webkit-transform-style:preserve-3d;	-moz-transform-style:preserve-3d;	-ms-transform-style:preserve-3d;	transform-style:preserve-3d;
}
.clock span:first-child {	margin-left:0;
}
.clock span:last-child {	margin-right:0;
}
.clock span:nth-child(2),
.clock span:nth-child(4) {	margin-right:.3em;
}
.clock span:nth-child(3),
.clock span:nth-child(5) {	margin-left:.3em;
}
.clock span:before,
.clock span:after {	position:absolute;	left:0;	top:0;	right:0;	bottom:0;	color:#eee;	text-shadow:0 1px 0 #fff; /* background: #333; Original */	background:#0562ca;	border-radius:.125em;	outline:1px solid transparent; /* fix jagged edges in ff */	-webkit-backface-visibility:hidden;	-moz-backface-visibility:hidden;	-ms-backface-visibility:hidden;	backface-visibility:hidden;	-webkit-transition:-webkit-transform .75s, opacity .75s;	-moz-transition:-moz-transform .75s, opacity .75s;	-ms-transition:-ms-transform .75s, opacity .75s;	transition:transform .75s, opacity .75s;
}
.clock span:before {	opacity:1;	z-index:1;	content:attr(data-old);	-webkit-transform-origin:0 0;	-moz-transform-origin:0 0;	-ms-transform-origin:0 0;	transform-origin:0 0;	-webkit-transform:translate3d(0,0,0) rotateX(0);	-moz-transform:translate3d(0,0,0) rotateX(0);	-ms-transform:translate3d(0,0,0) rotateX(0);	transform:translate3d(0,0,0) rotateX(0);
}
.clock span:after {	opacity:0;	z-index:2;	content:attr(data-now);	-webkit-transform-origin:0 100%;	-moz-transform-origin:0 100%;	-ms-transform-origin:0 100%;	transform-origin:0 100%;	-webkit-transform:translate3d(0,-102.5%,0) rotateX(90deg);	-moz-transform:translate3d(0,-102.5%,0) rotateX(90deg);	-ms-transform:translate3d(0,-102.5%,0) rotateX(90deg);	transform:translate3d(0,-102.5%,0) rotateX(90deg);
}
.clock .flip:before {	opacity:0;	-webkit-transform:translate3d(0,102.5%,0) rotateX(-90deg);	-moz-transform:translate3d(0,102.5%,0) rotateX(-90deg);	-ms-transform:translate3d(0,102.5%,0) rotateX(-90deg);	transform:translate3d(0,102.5%,0) rotateX(-90deg);
}
.clock .flip:after {	opacity:1;	-webkit-transform:translate3d(0,0,0) rotateX(0);	-moz-transform:translate3d(0,0,0) rotateX(0);	-ms-transform:translate3d(0,0,0) rotateX(0);	transform:translate3d(0,0,0) rotateX(0);
}
/* JavaScript Date */
.date #daymonth { color: #F1AE00; font-size: 2em; margin-top: -527px; margin-left: 36px;
}
.date #year { color: #EEE; font-size: 1.8em; margin-top: -40px; margin-left: 36px;
}
.menu-bg { width: 150px; height: 784px; background: #033671; /* New! */ margin-top: -152px; margin-left: 40px;
}

Windows 8 Style Tile Navigation - Script Codes JS Codes

// Menu
$('nav li').hover(function () { $('nav li:first-child').toggleClass("active"); });
// Original Pen: https://codepen.io/ravenous/pen/sdAqm
// Mother Flippin Clock!
var Clock = (function(){	var exports = function(element) {	this._element = element;	var html = '';	for (var i=0;i<6;i++) {	html += '<span>&nbsp;</span>';	}	this._element.innerHTML = html;	this._slots = this._element.getElementsByTagName('span');	this._tick();	};	exports.prototype = {	_tick:function() {	var time = new Date();	this._update(this._pad(time.getHours()) + this._pad(time.getMinutes()) + this._pad(time.getSeconds()));	var self = this;	setTimeout(function(){	self._tick();	},1000);	},	_pad:function(value) {	return ('0' + value).slice(-2);	},	_update:function(timeString) {	var i=0,l=this._slots.length,value,slot,now;	for (;i<l;i++) {	value = timeString.charAt(i);	slot = this._slots[i];	now = slot.dataset.now;	if (!now) {	slot.dataset.now = value;	slot.dataset.old = value;	continue;	}	if (now !== value) {	this._flip(slot,value);	}	}	},	_flip:function(slot,value) {	// setup new state	slot.classList.remove('flip');	slot.dataset.old = slot.dataset.now;	slot.dataset.now = value;	// force dom reflow	slot.offsetLeft;	// start flippin	slot.classList.add('flip');	}	};	return exports;
}());
var i=0,clocks = document.querySelectorAll('.clock'),l=clocks.length;
for (;i<l;i++) {	new Clock(clocks[i]);
}
// JavaScript Date
var date = new Date(), year = date.getFullYear(), month = date.getMonth(), day = date.getUTCDate(), months = [ "Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
document.getElementById('daymonth').innerHTML = months[month] + " " + day;
document.getElementById('year').innerHTML = year;
Windows 8 Style Tile Navigation - Script Codes
Windows 8 Style Tile Navigation - Script Codes
Home Page Home
Developer Toby
Username tobydennison
Uploaded January 24, 2023
Rating 3
Size 4,384 Kb
Views 4,048
Do you need developer help for Windows 8 Style Tile 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!

Toby (tobydennison) Script Codes
Name
Save a Quick Note
CSS3 Animated Type by Toby Dennison
BPL Table by Toby
JQuery Snow Animation
Code Editor Landing Page
A Pen by Toby
Custom Google Maps
Google reCaptcha Setup
FlowType.js Testing
JQuery Christmas Snow
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!