From 00ab4e558135b8f735face2f5a4151449ae291c3 Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Wed, 3 May 2023 17:58:14 +0300
Subject: [PATCH] Add files via upload
---
.../71-responsive-sidebar-menu/css/style.css | 100 ++++++++++++++++++
.../71-responsive-sidebar-menu/index.html | 65 ++++++++++++
.../71-responsive-sidebar-menu/js/main.js | 10 ++
3 files changed, 175 insertions(+)
create mode 100644 100_projects/71-responsive-sidebar-menu/css/style.css
create mode 100644 100_projects/71-responsive-sidebar-menu/index.html
create mode 100644 100_projects/71-responsive-sidebar-menu/js/main.js
diff --git a/100_projects/71-responsive-sidebar-menu/css/style.css b/100_projects/71-responsive-sidebar-menu/css/style.css
new file mode 100644
index 0000000..a54a093
--- /dev/null
+++ b/100_projects/71-responsive-sidebar-menu/css/style.css
@@ -0,0 +1,100 @@
+*{
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+body{
+ min-height: 100vh;
+ background: #131313
+}
+.navigation{
+ position: fixed;
+ width: 60px;
+ height: 100%;
+ background: #3e0748;
+ transition: .5s;
+ overflow: hidden;
+}
+.navigation:hover,
+.navigation.active{
+ width: 300px;
+}
+
+.navigation ul{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+}
+.navigation ul li{
+ position: relative;
+ width: 100%;
+ list-style: none;
+}
+.navigation ul li:hover{
+ background: #8B0000;
+}
+.navigation ul li a{
+ position: relative;
+ display: block;
+ width: 100%;
+ display: flex;
+ text-decoration: none;
+ color: #fff;
+}
+.navigation ul li a .icon{
+ position: relative;
+ display: block;
+ min-width: 60px;
+ height: 60px;
+ line-height: 60px;
+ text-align: center;
+}
+.navigation ul li a .icon ion-icon{
+font-size: 24px;
+}
+.navigation ul li a .title{
+ position: relative;
+ display: block;
+ padding: 0 10px;
+ line-height: 60px;
+ text-align: start;
+ white-space: nowrap;
+}
+.toggle{
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 50px;
+ height: 50px;
+ background-color: #330748;
+ cursor: pointer;
+ border-radius: 50%;
+}
+.toggle.active{
+ background-color: #8B0000;
+}
+.toggle::before{
+ content: '≡';
+ color: #fff;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ line-height: 50px;
+ text-align: center;
+ font-size: 29px;
+ transition: .3s;
+}
+.toggle.active:before{
+ content: '✖';
+ font-size: 15px;
+}
+@media(max-width:767px){
+ .navigation{
+ left: -60px;
+ }
+ .navigation.active{
+ left: 0;
+ width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/100_projects/71-responsive-sidebar-menu/index.html b/100_projects/71-responsive-sidebar-menu/index.html
new file mode 100644
index 0000000..c618cbc
--- /dev/null
+++ b/100_projects/71-responsive-sidebar-menu/index.html
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/71-responsive-sidebar-menu/js/main.js b/100_projects/71-responsive-sidebar-menu/js/main.js
new file mode 100644
index 0000000..fdfe91e
--- /dev/null
+++ b/100_projects/71-responsive-sidebar-menu/js/main.js
@@ -0,0 +1,10 @@
+function toggleMenu(){
+ let navigation = document.querySelector('.navigation');
+ let toggle = document.querySelector('.toggle');
+ navigation.classList.toggle('active');
+ toggle.classList.toggle('active');
+}
+
+
+
+