Windows 10 Style Animated Navigation Box with jQuery CSS3 - Download Windows 10 Style Animated Navigation Box with jQuery and CSS3

Download Windows 10 Style Animated Navigation Box with jQuery and CSS3

By Posted on

This time I will share jQuery Plugin and tutorial about Windows 10 Style Animated Navigation Box with jQuery and CSS3, hope it will help you in programming stack.

Windows 10 Style Animated Navigation Box with jQuery CSS3 - Download Windows 10 Style Animated Navigation Box with jQuery and CSS3
File Size: 2.62 KB
Views Total: 28720
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A sliding dropdown navigation box built on top of jQuery, CSS / CSS3 and Font Awesome 4, inspired by Window 10 start menu.

How to use it:

1. Include the Font Awesome 4 for navigation icons.

view source
1 <link rel="stylesheet" href="/path/to/font-awesome.min.css">

2. Create the navigation box as follow:

view source
01 <div id="navigation-bar" class="navigation-bar">
02   <div class="bar">
03     <button id="navbox-trigger" class="navbox-trigger">
04       <i class="fa fa-lg fa-th"></i>
05     </button>
06   </div>
07   <div class="navbox">
08     <div class="navbox-tiles">
09       <a href="#" class="tile">
10         <div class="icon"><i class="fa fa-home"></i></div>
11         <span class="title">Home</span>
12       </a>
13       <a href="#" class="tile">
14         <div class="icon"><i class="fa fa-calendar"></i></div>
15         <span class="title">Calendar</span>
16       </a>
17       <a href="#" class="tile">
18         <div class="icon"><i class="fa fa-envelope-o"></i></div>
19         <span class="title">Email</span>
20       </a>
21       <a href="#" class="tile">
22         <div class="icon"><i class="fa fa-file-image-o"></i></div>
23         <span class="title">Photos</span>
24       </a>
25       <a href="#" class="tile">
26         <div class="icon"><i class="fa fa-cloud"></i></div>
27         <span class="title">Weather</span>
28       </a>
29       <a href="#" class="tile">
30         <div class="icon"><i class="fa fa-file-movie-o"></i></div>
31         <span class="title">Movies</span>
32       </a>
33     </div>
34   </div>
35 </div>

3. The CSS reset.

view source
01 * {
02   margin: 0;
03   padding: 0;
04   font-size: inherit;
05   color: inherit;
06   box-sizing: inherit;
07   -webkit-backface-visibility: hidden;
08   backface-visibility: hidden;
09   -webkit-font-smoothing: antialiased;
10 }
11  
12 *:focus { outline: none; }
13  
14 html { box-sizing: border-box; }
15  
16 a { text-decoration: none; }
17  
18 button {
19   background-color: transparent;
20   border: 0;
21   cursor: pointer;
22 }
23  
24 .navigation-bar, .navigation-bar .navbox-tiles, .navbox-trigger, .navbox-tiles .tile, .navbox-tiles .tile .icon .fa, .navbox-tiles .tile .title {
25   -webkit-transition: all .3s;
26   transition: all .3s;
27 }
28  
29 .navbox-tiles:after {
30   content: '';
31   display: table;
32   clear: both;
33 }

4. The core CSS / CSS3 styles.

view source
001 .navigation-bar {
002   height: 50px;
003   position: relative;
004   z-index: 1000;
005 }
006  
007 .navigation-bar .bar {
008   background-color: #252525;
009   width: 100%;
010   height: 100%;
011   position source : jqueryscript.net

Related posts: