Ajax Loader
×
HTML
<ul class="nav">
1
<ul class="nav">
2
    <li id="settings">
3
        <a href="#"><img src="http://designmodo.com/demo/dropdown-menu-search/settings.png" /></a>
4
    </li>
5
    <li>
6
        <a href="#">Application</a>
7
    </li>
8
    <li>
9
        <a href="#">Board</a>
10
    </li>
11
    <li id="search">
12
        <form action="" method="get">
13
            <input type="text" name="search_text" id="search_text" placeholder="Search"/>
14
            <input type="button" name="search_button" id="search_button">
15
        </form>
16
    </li>
17
    <li id="options">
18
        <a href="#">Options</a>
19
        <ul class="subnav">
20
            <li><a href="#">Settings</a></li>
21
            <li><a href="#">Application</a></li>
22
            <li><a href="#">Board</a></li>
23
            <li><a href="#">Options</a></li>
24
        </ul>
25
    </li>
26
</ul>
27
 
28
 
29
 
30
<script src="prefixfree-1.0.7.js" type="text/javascript"></script>
31
 
 
CSS
@import url(http://fonts.googleapis.com/css?family=Montserrat);
1
@import url(http://fonts.googleapis.com/css?family=Montserrat);
2
 
3
* {
4
  margin: 0;
5
  padding: 0;
6
}
7
 
8
.nav {
9
  background: #232323;
10
  height: 60px;
11
  display: inline-block;
12
}
13
 
14
.nav li {
15
  float: left;
16
  list-style-type: none;
17
  position: relative;
18
}
19
 
20
.nav li a {
21
  font-size: 16px;
22
  color: white;
23
  display: block;
24
  line-height: 60px;
25
  padding: 0 26px;
26
  text-decoration: none;
27
  border-left: 1px solid #2e2e2e;
28
  font-family: Montserrat, sans-serif;
29
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
30
}
31
 
32
.nav li a:hover {
33
  background-color: #2e2e2e;
34
}
35
 
36
#settings a {
37
  padding: 18px;
38
  height: 24px;
39
  font-size: 10px;
40
  line-height: 24px;
41
}
42
 
43
#search {
44
  width: 357px;
45
  margin: 4px;
46
}
47
 
48
#search_text {
49
  width: 297px;
50
  padding: 15px 0 15px 20px;
51
  font-size: 16px;
52
  font-family: Montserrat, sans-serif;
53
  border: 0 none;
54
  height: 52px;
55
  margin-right: 0px;
56
  color: white;
57
  outline: none;
58
  background: #1f7f5c;
59
  float: left;
60
  box-sizing: border-box;
61
  transition: all 0.15s;
62
}
63
::-webkit-input-placeholder {
64
  color:white;
65
}
66
:-moz-placeholder {
67
  color:white;
68
}
69
::-moz-placeholder {
70
  color:white;
71
}
72
:-ms-input-placeholder {
73
  color:white;
74
}
75
#search_text:focus{
76
  background: rgb(64, 151, 119);
77
}
78
#search_button{
79
  border: 0 none;
80
  background: #1f7f5c url(http://designmodo.com/demo/dropdown-menu-search/search.png) center no-repeat;
81
  width: 60px;
82
  float: left;
83
  padding: 0;
84
  text-align: center;
85
  height: 52px;
86
  cursor: pointer;
87
}
88
 
89
#options a{
90
  border-left: 0 none;
91
}
92
 
93
#options>a {
94
  background-image: url(http://designmodo.com/demo/dropdown-menu-search/triangle.png);
95
  background-position: 85% center;
96
  background-repeat: no-repeat;
97
  padding-right: 42px;
98
}
99
 
100
.subnav {
101
  visibility: hidden;
102
  position: absolute;
103
  top:110%;
104
  right: 0;
105
  width: 200px;
106
  height: auto;
107
  opacity: 0;
108
  transition: all 0.1s;
109
  background: #232323;
110
}
111
 
112
.subnav li {
113
  float: none;
114
}
115
 
116
.subnav li a {
117
  border-bottom: 1px solid #2e2e2e;
118
}
119
 
120
#options:hover .subnav{
121
  visibility: visible;
122
  top:100%;
123
  opacity: 1;
124
}
 

Untitled

CSSDeck G+