Ajax Loader
×
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="utf-8">
5
<meta name="description" content="Lavalike css-only menu effect" />
6
<meta name="keywords" content="css-only menu hover effect transitions" />
7
<meta name="author" content="PeHaa for PEPSized" />
8
<link href='http://fonts.googleapis.com/css?family=Unica+One' rel='stylesheet' type='text/css'>
9
 
10
<link rel="stylesheet" href="stylesheets/style.css"  media="screen" title="no title" >
11
 
12
<title>Lava-Lamp-like hover effect</title>
13
</head>
14
<body>
15
  <div class="ph-line-nav nav">
16
    <a href="#">Home</a>
17
    <a href="#">About</a>
18
    <a href="#">Gallery</a>
19
    <a href="#">Contact</a>
20
    <div class="effect"></div>
21
  </div>
22
 
23
  <div class="ph-dot-nav nav">
24
    <a href="#">Home</a>
25
    <a href="#">About</a>
26
    <a href="#">Gallery</a>
27
    <a href="#">Contact</a>
28
    <div class="effect"></div>
29
  </div>
30
31
  <div class="ph-heart-nav nav">
32
    <a href="#">Home</a>
33
    <a href="#">About</a>
34
    <a href="#">Gallery</a>
35
    <a href="#">Contact</a>
36
    <div class="effect"></div>
37
  </div>
38
 
39
</body>
40
</html>
 
CSS 
/* ---- reset ------*/
1
/* ---- reset ------*/
2
html, body, div, a {
3
  margin: 0;
4
  padding: 0;
5
  border: 0;
6
  font: inherit;
7
  font-size: 100%;
8
  vertical-align: baseline; }
9
 
10
html {
11
  line-height: 1; }
12
 
13
 
14
/* --- basic styles ----*/
15
 
16
body {
17
  font-family: "Unica One";
18
  font-size: 1.5em;
19
  background: #f2f2f2;
20
  text-shadow: 0 1px 0 white; }
21
 
22
/* --- for all three examples ----*/
23
 
24
.nav {
25
  text-align: center;
26
  overflow: hidden;
27
  margin: 2em auto;
28
  width: 480px;
29
  position: relative; }
30
  .nav a {
31
    display: block;
32
    position: relative;
33
    float: left;
34
    padding: 1em 0 2em;
35
    width: 25%;
36
    text-decoration: none;
37
    color: #393939;
38
    -webkit-transition: .7s;
39
    -moz-transition: .7s;
40
    -o-transition: .7s;
41
    -ms-transition: .7s;
42
    transition: .7s; }
43
    .nav a:hover {
44
      color: #c6342e; }
45
 
46
.effect {
47
  position: absolute;
48
  left: -12.5%;
49
  -webkit-transition: 0.7s ease-in-out;
50
  -moz-transition: 0.7s ease-in-out;
51
  -o-transition: 0.7s ease-in-out;
52
  -ms-transition: 0.7s ease-in-out;
53
  transition: 0.7s ease-in-out; }
54
 
55
  .nav a:nth-child(1):hover ~ .effect {
56
    left: 12.5%; }
57
  .nav a:nth-child(2):hover ~ .effect {
58
    left: 37.5%; }
59
  .nav a:nth-child(3):hover ~ .effect {
60
    left: 62.5%; }
61
  .nav a:nth-child(4):hover ~ .effect {
62
    left: 87.5%; }
63
 
64
/* ----- line example -----*/
65
 
66
.ph-line-nav .effect {
67
  width: 90px;
68
  height: 2px;
69
  bottom: 36px;
70
  background: #c6342e;
71
  box-shadow: 0 1px 0 white;
72
  margin-left:-45px;
73
}
74
 
75
/* ----- dot example -----*/
76
 
77
.ph-dot-nav:after {
78
  content: "";
79
  display: block;
80
  position: absolute;
81
  width: 100%;
82
  height: 1px;
83
  background: #c6342e;
84
  bottom: 40px; }
85
.ph-dot-nav a:after {
86
  content: "";
87
  position: absolute;
88
  width: 4px;
89
  height: 4px;
90
  bottom: 38px;
91
  left: 50%;
92
  margin-left: -2px;
93
  background: #c6342e;
94
  border-radius: 100%; }
95
.ph-dot-nav .effect {
96
  width: 10px;
97
  height: 10px;
98
  bottom: 36px;
99
  margin-left: -5px;
100
  background: #c6342e;
101
  border-radius: 100%; }
102
 
103
/* ----- heart example -----*/
104
 
105
.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
106
  background: url('http://pepsized.com/wp-content/uploads/2013/01/llldemo/images/heart.png') no-repeat; }
107
.ph-heart-nav .effect {
108
  position: absolute;
109
  bottom: 26px;
110
  background-position: 0 0;
111
  height: 8px;
112
  width: 62px;
113
  margin-left:-31px; }
114
 
115
.ph-heart-nav a:before {
116
  content: "";
117
  display: block;
118
  position: absolute;
119
  left: 50%;
120
  bottom: 20px;
121
  background-position: -62px 0;
122
  height: 20px;
123
  width: 11px;
124
  margin-left: -11px; }
125
 
126
.ph-heart-nav a:after {
127
  content: "";
128
  display: block;
129
  position: absolute;
130
  left: 50%;
131
  bottom: 20px;
132
  z-index: 1;
133
  background-position: -73px 0;
134
  height: 20px;
135
  width: 11px; }
136
 
137
 
138
 
 

Untitled

CSSDeck G+