Ajax Loader
×

Google Style Navigation

If you have ever seen some Google pages like Google Wallet or Google Drive. You'll see this type of navigation bar. You can implement it on your small projects. Cheers.

HTML
<div id="topbar">
1
<div id="topbar">
2
<div class="inner-topbar">
3
  <ul style="margin-top:-15px;">
4
    <li><a href="#">Home</a></li> 
5
    <li><a href="#">About</a></li>      
6
    <li><a href="#">Contact</a></li>    
7
  </ul>
8
 
9
</div> <!-- inner-topbar -->
10
</div> <!-- topbar -->
 
CSS
/* Author: Hassan Yousuf / UPDATED 6/13/2014 */
1
/* Author: Hassan Yousuf / UPDATED 6/13/2014 */
2
 
3
#topbar {
4
  padding: 34px 1px;
5
  width: 100%;
6
  background-color: #FAFAFA;
7
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#F5F5F5));
8
  background-image: -webkit-linear-gradient(top, #FAFAFA, #F5F5F5);
9
  background-image: -moz-linear-gradient(top, #FAFAFA, #F5F5F5);
10
  background-image: -o-linear-gradient(top, #FAFAFA, #F5F5F5);
11
  background-image: linear-gradient(to bottom, #FAFAFA, #F5F5F5);
12
  border-bottom: 1px solid #EBEBEB;
13
}
14
 
15
.inner-topbar {
16
  margin: -5px auto;
17
  clear: both;
18
  display: block;
19
  position: relative;
20
}
21
 
22
#topbar ul {
23
  background: #fff  
24
}
25
 
26
#topbar ul li {
27
  float: left;
28
  list-style: none;
29
  margin-right: 10px;
30
}
31
 
32
#topbar ul .floatRight {
33
  float: right;
34
  margin-right: 0px;
35
  margin-left: 10px;
36
  background: transparent;
37
}
38
 
39
#topbar ul .highlight, #topbar ul .highlight a {
40
  background: transparent;
41
}
42
 
43
#topbar ul li a {
44
  padding: 10px 19px;
45
  padding-top: 0px;
46
  border-bottom: 0px;
47
  display: block;
48
  color: #000;
49
  text-decoration: none;
50
  
51
  -webkit-transition: all 0.3s ease-out; 
52
     -moz-transition: all 0.3s ease-out; 
53
      -ms-transition: all 0.3s ease-out; 
54
       -o-transition: all 0.3s ease-out; 
55
          transition: all 0.3s ease-out;
56
}
57
 
58
#topbar ul li a:hover {
59
  border-bottom: 5px solid #39C;
60
  margin-bottom: 0px;
61
}
62
 
63
#topbar ul li.current {
64
  padding: 0px 19px;
65
  display: block;
66
  color: #39C;
67
  text-decoration: none;
68
  margin-bottom: 0px;
69
}
70
 
 
JavaScript
// @see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
1
// @see http://paulirish.com/2011/requestanimationframe-for-smart-animating/
2
  window.requestAnimFrame = (function(){
3
      return  window.requestAnimationFrame       || 
4
              window.webkitRequestAnimationFrame || 
5
              window.mozRequestAnimationFrame    || 
6
              window.oRequestAnimationFrame      || 
7
              window.msRequestAnimationFrame     || 
8
              function(/* function */ callback, /* DOMElement */ element){
9
                window.setTimeout(callback, 1000 / 60);
10
              };
11
    })();
12
  // set the scene size
13
  var WIDTH = 900,
14
      HEIGHT = 600;
15
  
16
  // set some camera attributes
17
  var VIEW_ANGLE = 45,
18
      ASPECT = WIDTH / HEIGHT,
19
      NEAR = 0.1,
20
      FAR = 10000;
21
  
22
  // get the DOM element to attach to
23
  // - assume we've got jQuery to hand
24
  var $container = $('#container');
25
  
26
  // create a WebGL renderer, camera
27
  // and a scene
28
  var renderer = new THREE.WebGLRenderer();
29
  var camera = new THREE.Camera(  VIEW_ANGLE,
30
                                  ASPECT,
31
                                  NEAR,
32
                                  FAR  );
33
  var scene = new THREE.Scene();
34
  
35
  // the camera starts at 0,0,0 so pull it back
36
  camera.position.z = 300;
37
  
38
  // start the renderer - set the clear colour
39
  // to a full black
40
  renderer.setClearColor(new THREE.Color(0, 1));
41
  renderer.setSize(WIDTH, HEIGHT);
42
  
43
  // attach the render-supplied DOM element
44
  $container.append(renderer.domElement);
45
  
46
  // create the particle variables
47
  var particleCount = 1800,
48
      particles = new THREE.Geometry(),
49
    pMaterial = new THREE.ParticleBasicMaterial({
50
      color: 0xFFFFFF,
51
      size: 20,
52
      map: THREE.ImageUtils.loadTexture(
53
        "images/particle.png"
54
      ),
55
      blending: THREE.AdditiveBlending,
56
      transparent: true
57
    });
58
  
59
  // now create the individual particles
60
  for(var p = 0; p < particleCount; p++) {
61
  
62
    // create a particle with random
63
    // position values, -250 -> 250
64
    var pX = Math.random() * 500 - 250,
65
      pY = Math.random() * 500 - 250,
66
      pZ = Math.random() * 500 - 250,
67
        particle = new THREE.Vertex(
68
        new THREE.Vector3(pX, pY, pZ)
69
      );
70
    // create a velocity vector
71
    particle.velocity = new THREE.Vector3(
72
      0,        // x
73
      -Math.random(), // y
74
      0);       // z
75
 
76
    // add it to the geometry
77
    particles.vertices.push(particle);
78
  }
79
  
80
  // create the particle system
81
  var particleSystem = new THREE.ParticleSystem(
82
    particles,
83
    pMaterial);
84
  
85
  particleSystem.sortParticles = true;
86
  
87
  // add it to the scene
88
  scene.addChild(particleSystem);
89
  
90
  // animation loop
91
  function update() {
92
    
93
    // add some rotation to the system
94
    particleSystem.rotation.y += 0.01;
95
    
96
    var pCount = particleCount;
97
    while(pCount--) {
98
      // get the particle
99
      var particle = particles.vertices[pCount];
100
      
101
      // check if we need to reset
102
      if(particle.position.y < -200) {
103
        particle.position.y = 200;
104
        particle.velocity.y = 0;
105
      }
106
      
107
      // update the velocity
108
      particle.velocity.y -= Math.random() * .1;
109
      
110
      // and the position
111
      particle.position.addSelf(
112
        particle.velocity);
113
    }
114
    
115
    // flag to the particle system that we've
116
    // changed its vertices. This is the
117
    // dirty little secret.
118
    particleSystem.geometry.__dirtyVertices = true;
119
    
120
    renderer.render(scene, camera);
121
    
122
    // set up the next call
123
    requestAnimFrame(update);
124
  }
125
  requestAnimFrame(update);
 

Google Style Navigation

CSSDeck G+