Skip to content

Commit 022aa3f

Browse files
MAKUSrefMAKUSref
committed
Add examples
1 parent b3705f3 commit 022aa3f

File tree

357 files changed

+48199
-1
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

357 files changed

+48199
-1
lines changed

‎License.pdf

252 KB
Binary file not shown.

‎README.md

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,42 @@
1-
# side-menu
1+
Responsive Side menu with Bootstrap 5.Side Menu is a navigation component providing a clear way for navigating complex websites with lots of pages.
2+
3+
Check out [Bootstrap Height Documentation](https://mdbootstrap.com/docs/standard/extended/height/) for detailed instructions & even more examples.
4+
5+
## Basic example
6+
7+
[Bootstrap side navigation menu:
8+
![Bootstrap 5 side navigation menu](/assets/basic.png)](https://mdbootstrap.com/docs/standard/extended/side-menu/#section-basic-example)
9+
10+
## How to use?
11+
12+
1. Download MDB 5 - free UI KIT
13+
14+
2. Choose your favourite customized component and click on the image
15+
16+
3. Copy & paste the code into your MDB project
17+
18+
[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)
19+
20+
## More examples
21+
22+
[Bootstrap Side Menu positioning:
23+
![Bootstrap 5 Side Menu](/assets/positioning.png)](https://mdbootstrap.com/docs/standard/extended/side-menu/#section-positioning)
24+
25+
[Bootstrap Side Menu dark:
26+
![Bootstrap 5 Side Menu](/assets/dark.png)](https://mdbootstrap.com/docs/standard/extended/side-menu/#section-side-menu-dark)
27+
28+
[Bootstrap Side Menu item scroll:
29+
![Bootstrap 5 Side Menu](/assets/scroll.png)](https://mdbootstrap.com/docs/standard/extended/side-menu/#section-menu-item-scroll)
30+
31+
___
32+
33+
## More extended Bootstrap documentation
34+
35+
<ul>
36+
<li><a href="https://mdbootstrap.com/docs/standard/components/buttons/">Bootstrap buttons</a></li>
37+
<li><a href="https://mdbootstrap.com/docs/standard/methods/ripple/">Bootstrap ripple</a></li>
38+
<li><a href="https://mdbootstrap.com/docs/standard/content-styles/icons/">Bootstrap icons</a></li>
39+
<li><a href="https://mdbootstrap.com/docs/standard/components/collapse/">Bootstrap collapse</a></li>
40+
<li><a href="https://mdbootstrap.com/docs/standard/extended/sidebar/">Bootstrap sidebar</a></li>
41+
<li><a href="https://mdbootstrap.com/docs/standard/extended/side-navbar/">Bootstrap side-navbar</a></li>
42+
</ul>

‎assets/basic.png

11.2 KB
Loading

‎assets/dark.png

9.04 KB
Loading

‎assets/positioning.png

38.2 KB
Loading

‎assets/scroll.png

20.2 KB
Loading

‎basic.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7+
<meta http-equiv="x-ua-compatible" content="ie=edge" />
8+
<title>Material Design for Bootstrap</title>
9+
<!-- MDB icon -->
10+
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
11+
<!-- Font Awesome -->
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
13+
<!-- Google Fonts Roboto -->
14+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
15+
<!-- MDB -->
16+
<link rel="stylesheet" href="css/mdb.min.css" />
17+
<style>
18+
body {
19+
margin: 0;
20+
padding: 0;
21+
}
22+
.sidenav {
23+
position: absolute;
24+
z-index: 1030;
25+
top: 0;
26+
bottom: 0;
27+
left: 0;
28+
background-color: white;
29+
width: 300px;
30+
}
31+
32+
.backdrop {
33+
content: '';
34+
position: absolute;
35+
top: 0;
36+
bottom: 0;
37+
left: 0;
38+
right: 0;
39+
background-color: rgba(36, 26, 12, 0.178);
40+
z-index: 1029;
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
<div class="backdrop"></div>
47+
<!-- Sidenav -->
48+
<nav id="sidenav-1" class="sidenav shadow-3" data-mdb-hidden="false">
49+
<div class="list-group list-group-light p-3">
50+
<a
51+
href="#"
52+
class="list-group-item list-group-item-action px-3 border-0 active ripple"
53+
aria-current="true"
54+
>Ripple</a
55+
>
56+
<a
57+
href="#"
58+
class="list-group-item list-group-item-action px-3 border-0 ripple"
59+
>Dapibus ac facilisis in</a
60+
>
61+
<a
62+
href="#"
63+
class="list-group-item list-group-item-action px-3 border-0 ripple"
64+
>Morbi leo risus</a
65+
>
66+
<a
67+
href="#"
68+
class="list-group-item list-group-item-action px-3 border-0 ripple"
69+
>Porta ac consectetur ac</a
70+
>
71+
</div>
72+
</nav>
73+
<!-- Sidenav -->
74+
75+
<div class="container d-flex justify-content-center mt-3">
76+
<!-- Toggler -->
77+
<button data-mdb-toggle="sidenav" data-mdb-target="#sidenav-1" class="btn btn-primary" aria-controls="#sidenav-1"
78+
aria-haspopup="true">
79+
<i class="fas fa-bars"></i>
80+
</button>
81+
<!-- Toggler -->
82+
</div>
83+
84+
85+
<!-- MDB -->
86+
<script type="text/javascript" src="js/mdb.min.js"></script>
87+
<!-- Custom scripts -->
88+
<script type="text/javascript"></script>
89+
</body>
90+
91+
</html>

‎css/mdb.dark.min.css

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

‎css/mdb.dark.min.css.map

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

‎css/mdb.dark.rtl.min.css

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

‎css/mdb.dark.rtl.min.css.map

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

‎css/mdb.min.css

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

‎css/mdb.min.css.map

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

‎css/mdb.rtl.min.css

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

‎css/mdb.rtl.min.css.map

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

‎img/mdb-favicon.ico

1.12 KB
Binary file not shown.

‎js/mdb.min.js

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

‎js/mdb.min.js.map

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

‎package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "bootstrap-side-menu",
3+
"version": "1.0.0",
4+
"description": "Responsive Side menu with Bootstrap 5.Side Menu is a navigation component providing a clear way for navigating complex websites with lots of pages",
5+
"main": "basic.html",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/mdbootstrap/bootstrap-side-menu.git"
12+
},
13+
"keywords": [
14+
"bootstrap",
15+
"bootrap5",
16+
"bootstrap-theme",
17+
"bootstrap-template",
18+
"reponsive",
19+
"responsive-design"
20+
],
21+
"author": "",
22+
"license": "ISC",
23+
"bugs": {
24+
"url": "https://github.com/mdbootstrap/bootstrap-side-menu/issues"
25+
},
26+
"homepage": "https://mdbootstrap.com/docs/standard/extended/side-menu/"
27+
}

0 commit comments

Comments
 (0)