Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Sep 5, 2019. It is now read-only.

Commit f898b99

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /