x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-05-03 17:58:14 +03:00 committed by GitHub
parent c5de37d654
commit 00ab4e5581
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 175 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
100_projects/71-responsive-sidebar-menu/css/style.css Normal file
View File

@ -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%;
}
}

65
100_projects/71-responsive-sidebar-menu/index.html Normal file
View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="navigation">
<ul>
<li>
<a href="#">
<span class="icon"><ion-icon name="home-outline"></ion-icon></span>
<span class="title">Home</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><ion-icon name="person-outline"></ion-icon></span>
<span class="title">Profile</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><ion-icon name="chatbubbles-outline"></ion-icon></span>
<span class="title">Messages</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><ion-icon name="help-outline"></ion-icon></span>
<span class="title">Help</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><ion-icon name="settings-outline"></ion-icon></span>
<span class="title">Setting</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><ion-icon name="arrow-redo-outline"></ion-icon></span>
<span class="title">Share</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><ion-icon name="log-out-outline"></ion-icon></span>
<span class="title">Singout</span>
</a>
</li>
</ul>
</div>
<div class="toggle" onclick="toggleMenu()"></div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<script src="js/main.js">
</script>
</body>
</html>

10
100_projects/71-responsive-sidebar-menu/js/main.js Normal file
View File

@ -0,0 +1,10 @@
function toggleMenu(){
let navigation = document.querySelector('.navigation');
let toggle = document.querySelector('.toggle');
navigation.classList.toggle('active');
toggle.classList.toggle('active');
}