Skip to content
This repository was archived by the owner on Sep 5, 2019. It is now read-only.

Commit f898b99

Browse files
accgitaccgit
committed
Update
1 parent 8370d2e commit f898b99

File tree

5 files changed

+67
-64
lines changed

5 files changed

+67
-64
lines changed

‎src/css/style.dropdown.css

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,34 @@
44
*/
55
.dropdown {
66
margin-left: 12px;
7-
margin-top: 8px;
87
position: relative;
98
}
109

1110
.dropdown p { margin: 0; }
1211
.dropdown .employ-toggle { text-decoration: none; }
1312
.dropdown .employ-toggle.click {
1413
border-radius: 30px;
14+
transition: all 0.1s ease-in-out;
1515
font-size: 14px;
1616
padding: 2px 12px;
1717
}
1818

19+
.dropdown.light .employ-toggle.click {
20+
color: #acacac;
21+
}
22+
23+
.dropdown.light .employ-toggle.click:hover {
24+
background-color: white;
25+
}
26+
27+
.dropdown.dark .employ-toggle.click {
28+
color: #acacac;
29+
}
30+
31+
.dropdown.dark .employ-toggle.click:hover {
32+
background-color: white;
33+
}
34+
1935
.dropdown ul.expand-dropdown {
2036
list-style: none;
2137
margin-top: 5px;
@@ -46,3 +62,23 @@
4662
display: block;
4763
padding: 3px 10px;
4864
}
65+
66+
.dropdown.light ul.expand-dropdown li a {
67+
background-color: rgb(255, 255, 255);
68+
color: #808080;
69+
}
70+
71+
.dropdown.light ul.expand-dropdown li a:hover {
72+
background-color: rgb(248, 248, 248);
73+
color: #494949;
74+
}
75+
76+
.dropdown.dark ul.expand-dropdown li a {
77+
background-color: rgb(29, 34, 44);
78+
color: #9197a1;
79+
}
80+
81+
.dropdown.dark ul.expand-dropdown li a:hover {
82+
background-color: rgb(39, 48, 63);
83+
color: white;
84+
}

‎src/css/style.dropdown.min.css

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/theme/style.dropdown.dark.css

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/css/theme/style.dropdown.light.css

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎src/index.html

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,34 +15,43 @@
1515
<link rel="stylesheet" href="css/style.dropdown.css">
1616

1717
<!-- css dropdown themes -->
18-
<link rel="stylesheet" href="css/theme/style.dropdown.light.css">
19-
<!--<link rel="stylesheet" href="css/theme/style.dropdown.dark.css">-->
18+
<!--<link rel="stylesheet" href="css/theme/style.dropdown.light.css">-->
19+
<link rel="stylesheet" href="css/theme/style.dropdown.dark.css">
2020
<style>
2121
body {
22-
background-color: #f2f2f2;
23-
font-family: 'Open Sans', sans-serif;
22+
background-color: #f2f2f2;
23+
font-family: 'Open Sans', sans-serif;
2424
}
2525
</style>
2626
</head>
2727
<body>
28-
<div class="wrapper" style="padding: 25px; width: 200px;">
28+
<!--
29+
sample page
30+
-->
31+
<div class="container" style="width: 600px; padding-top: 50px;">
32+
<h2>CSS UI - Dropdown menu</h2>
33+
<div class="clear">
34+
<div class="float left">Click to menu</div>
35+
<div class="float left">
2936

30-
<!-- dropdown menu -->
31-
<div class="dropdown">
37+
<!-- dropdown menu -->
38+
<div class="dropdown light">
3239

33-
<!-- dropdown menu click -->
34-
<div class="clear">
35-
<a class="employ-toggle click float right" href="#">
36-
<i class="fa fa-ellipsis-v " aria-hidden="true"></i>
37-
</a>
38-
</div>
40+
<!-- dropdown menu click -->
41+
<div class="clear">
42+
<a class="employ-toggle click float right" href="#">
43+
<i class="fa fa-ellipsis-v " aria-hidden="true"></i>
44+
</a>
45+
</div>
3946

40-
<!-- show or hide menu -->
41-
<ul class="expand-dropdown">
42-
<li><a href="#" class="top">One</a></li>
43-
<li><a href="#">Two</a></li>
44-
<li><a href="#" class="bottom">Three</a></li>
45-
</ul>
47+
<!-- show or hide menu -->
48+
<ul class="expand-dropdown">
49+
<li><a href="#" class="top">One</a></li>
50+
<li><a href="#">Two</a></li>
51+
<li><a href="#" class="bottom">Three</a></li>
52+
</ul>
53+
</div>
54+
</div>
4655
</div>
4756
</div>
4857

0 commit comments

Comments
 (0)