Ajax Loader
×
HTML 
<!DOCTYPE HTML>
1
<!DOCTYPE HTML>
2
<html lang="en-US">
3
<head>
4
  <meta charset="UTF-8"/>
5
  <title>title</title>
6
</head>
7
<body>
8
  <div class="menu">
9
    <ul>
10
      <li>
11
        <div class="top_door"></div>
12
        <a href="#">home</a>
13
        <div class="bottom_door"></div>
14
      </li>
15
      <li>
16
        <div class="top_door"></div>
17
        <a href="#">blog</a>
18
        <div class="bottom_door"></div>
19
      </li>
20
      <li>
21
        <div class="top_door"></div>
22
        <a href="#">products</a>
23
        <div class="bottom_door"></div>
24
      </li>
25
      <li>
26
        <div class="top_door"></div>
27
        <a href="#">about</a>
28
        <div class="bottom_door"></div>
29
      </li>
30
      <div class="badboy"></div>
31
    </ul>
32
  </div>
33
</body>
34
</html>
 
CSS 
*{
1
*{
2
  padding:0;
3
  margin: 0;
4
}
5
 
6
.badboy{
7
  clear: both;
8
  width: 0;
9
  height: 0;
10
}
11
 
12
.menu{
13
  /* background-color: red; */
14
}
15
 
16
.menu ul{
17
  background: -webkit-linear-gradient(top,#bbb 0%,#000 50% , #bbb 100%);
18
     background: -moz-linear-gradient(top,#bbb 0%,#000 50% , #bbb 100%);
19
      background: -ms-linear-gradient(top,#bbb 0%,#000 50% , #bbb 100%);
20
       background: -o-linear-gradient(top,#bbb 0%,#000 50% , #bbb 100%);
21
          background: linear-gradient(top,#bbb 0%,#000 50% , #bbb 100%);
22
  list-style-type: none;
23
  width:365px;
24
  margin: 20px auto;
25
  padding-left:20px;
26
  border-radius: 10px;
27
}
28
 
29
.menu li{
30
  background-color: #000;
31
  float: left;
32
  position: relative;
33
  background: -webkit-linear-gradient(top,#888 0%,#000 50% , #888 100%);
34
     background: -moz-linear-gradient(top,#888 0%,#000 50% , #888 100%);
35
      background: -ms-linear-gradient(top,#888 0%,#000 50% , #888 100%);
36
       background: -o-linear-gradient(top,#888 0%,#000 50% , #888 100%);
37
          background: linear-gradient(top,#888 0%,#000 50% , #888 100%);
38
}
39
 
40
.menu .top_door,.menu .bottom_door{
41
  position:absolute;
42
  height:50%;
43
  width:100%;
44
  left: 0;
45
  -webkit-transition: height .3s linear;
46
     -moz-transition: height .3s linear;
47
      -ms-transition: height .3s linear;
48
       -o-transition: height .3s linear;
49
          transition: height .3s linear;
50
 
51
 
52
}
53
.menu .top_door{
54
  top: 0;
55
  /* background-position:0 0 ; */
56
  background: -webkit-linear-gradient(top,#bbb,#000);
57
     background: -moz-linear-gradient(top,#bbb,#000);
58
      background: -ms-linear-gradient(top,#bbb,#000);
59
       background: -o-linear-gradient(top,#bbb,#000);
60
          background: linear-gradient(top,#bbb,#000);
61
}
62
.menu .bottom_door{
63
  bottom: 0;
64
  background: -webkit-linear-gradient(top,#000,#bbb);
65
     background: -moz-linear-gradient(top,#000,#bbb);
66
      background: -ms-linear-gradient(top,#000,#bbb);
67
       background: -o-linear-gradient(top,#000,#bbb);
68
          background: linear-gradient(top,#000,#bbb);
69
}
70
 
71
.menu li:hover > div{
72
  height:5px;
73
}
74
 
75
.menu a{
76
  display: block;
77
  padding: 15px 20px;
78
  text-transform: capitalize;
79
  text-decoration: none;
80
  color:white;
81
  font-size: 18px;
82
}
83
 
 

eyelid-menu

CSSDeck G+