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

Commit 778c66c

Browse files
accgitaccgit
committed
dev
0 parents  commit 778c66c

File tree

6 files changed

+217
-0
lines changed

6 files changed

+217
-0
lines changed

‎license.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2015 Zdeněk Papučík
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎readme.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
## Responsive menu
2+
3+
Simple responsive sidebar menu, based on CSS UI.
4+
5+
## Instruction
6+
7+
Download and insert css.ui.min.css to directory css.

‎src/css/style.css

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
2+
/*
3+
import css styles
4+
*/
5+
@import url(css.ui.min.css);
6+
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
7+
8+
/*
9+
custom styles
10+
*/
11+
body {
12+
background-color: #f4f4f4;
13+
font-family: Segoe UI, sans-serif;
14+
}
15+
16+
/*
17+
responsive menu style
18+
*/
19+
.nav .click {
20+
cursor: pointer;
21+
height: 36px;
22+
margin: 10px;
23+
float: right;
24+
color: #5b5b5b;
25+
width: 36px;
26+
}
27+
28+
.nav .click .material-icons {
29+
padding: 5px;
30+
}
31+
32+
.nav .click .material-icons:hover {
33+
border-radius: 30px;
34+
background: white;
35+
}
36+
37+
.nav .responsive { display: none; }
38+
.nav .expand { display: block !important; }
39+
40+
.sidebar-title {
41+
background-color: #353637;
42+
font-size: 1.5em;
43+
padding: 20px;
44+
color: white;
45+
}
46+
47+
/*
48+
menu
49+
*/
50+
ul.menu {
51+
background-color: white;
52+
font-weight: 500;
53+
list-style: none;
54+
margin: 0;
55+
}
56+
57+
ul.menu li {
58+
color: #353637;
59+
}
60+
61+
ul.menu li.title {
62+
padding: 6px 15px 6px 25px;
63+
}
64+
65+
ul.menu li.title.first {
66+
padding-top: 25px;
67+
}
68+
69+
ul.menu li .material-icons.menu-icon {
70+
margin-right: 10px;
71+
font-weight: 700;
72+
font-size: 12px;
73+
}
74+
75+
ul.menu li {
76+
margin: 0;
77+
}
78+
79+
ul.menu li a {
80+
text-decoration: none;
81+
padding-left: 25px;
82+
line-height: 42px;
83+
display: block;
84+
color: #858585;
85+
}
86+
87+
ul.menu li a:hover {
88+
background-color: #e4e4e4;
89+
color: #353637;
90+
}
91+
92+
ul.menu li a.current {
93+
background-color: #f4f4f4;
94+
color: #2b69c6;
95+
}
96+
97+
@media only screen and (min-width: 768px) {
98+
99+
.nav .click { visibility: hidden; }
100+
.nav .responsive { display: block; }
101+
102+
.sidebar {
103+
background-color: white;
104+
position: absolute;
105+
bottom: 0;
106+
width: 230px;
107+
top: 0;
108+
}
109+
110+
.content {
111+
margin-left: 230px;
112+
}
113+
114+
}

‎src/index.html

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="cs">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="description" content="CSS UI Framework">
6+
<meta name="author" content="Zdeněk Papučík, zdenek.papucik@gmail.com">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<title>CSS UI - Menu</title>
9+
10+
<!-- CSS styles -->
11+
<link rel="stylesheet" href="css/style.css">
12+
13+
</head>
14+
<body>
15+
<!-- navigation -->
16+
<div class="nav">
17+
18+
<!-- menu icons -->
19+
<div class="clear">
20+
<div class="click">
21+
<i class="material-icons">menu</i>
22+
</div>
23+
</div>
24+
25+
<!-- sidebar -->
26+
<div class="sidebar">
27+
<div class="responsive">
28+
<div class="sidebar-title">CSS UI - Menu</div>
29+
<ul class="menu">
30+
<li class="title first clear">
31+
<span class="float left">Languages</span>
32+
<span class="float right"><i class="material-icons">keyboard_arrow_down</i></span>
33+
</li>
34+
<li><a href="" class="current"><i class="material-icons menu-icon">radio_button_unchecked</i>Czech</a></li>
35+
<li><a href=""><i class="material-icons menu-icon">radio_button_unchecked</i>English</a></li>
36+
37+
<li class="title clear">
38+
<span class="float left">Blog</span>
39+
<span class="float right"><i class="material-icons">keyboard_arrow_down</i></span>
40+
</li>
41+
<li><a href=""><i class="material-icons menu-icon">radio_button_unchecked</i>Add</a></li>
42+
<li><a href=""><i class="material-icons menu-icon">radio_button_unchecked</i>List</a></li>
43+
44+
<li class="title clear">
45+
<span class="float left">Members</span>
46+
<span class="float right"><i class="material-icons">keyboard_arrow_down</i></span>
47+
</li>
48+
<li><a href=""><i class="material-icons menu-icon">radio_button_unchecked</i>Registred</a></li>
49+
<li><a href=""><i class="material-icons menu-icon">radio_button_unchecked</i>Banned</a></li>
50+
</ul>
51+
</div>
52+
</div>
53+
</div>
54+
55+
<!-- content -->
56+
<div class="content"></div>
57+
58+
<!-- javascript libraries and plugins -->
59+
<script src="js/jquery.min.js"></script>
60+
<script src="js/jquery.responsive.menu.js"></script>
61+
</body>
62+
</html>

‎src/js/jquery.min.js

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

‎src/js/jquery.responsive.menu.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
2+
// jQuery responsive menu.
3+
$(function()
4+
{
5+
$('.nav .click').click(function()
6+
{
7+
$('.nav .responsive').toggleClass('expand');
8+
});
9+
});

0 commit comments

Comments
 (0)