Add files via upload
This commit is contained in:
Sam
GitHub
parent
e870a6eed9
commit
ebc8e26294
130
100_projects/46-dropdown-menu-user-account/css/style.css
Normal file
130
100_projects/46-dropdown-menu-user-account/css/style.css
Normal file
@ -0,0 +1,130 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(45deg, #4e65ff, #92effd);
|
||||
}
|
||||
.navigation{
|
||||
position: fixed;
|
||||
top:20px;
|
||||
right: 20px;
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
background: #fff;
|
||||
box-shadow: 0 25px 30px rgba(0, 0, 0, .1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
transition: height 0.5s, width 0.5s;
|
||||
transition-delay: 0s, .5s;
|
||||
overflow: hidden;
|
||||
}
|
||||
.navigation.active{
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
transition: width 0.5s, height 0.5s;
|
||||
transition-delay: 0s, .5s;
|
||||
}
|
||||
.navigation .userBx{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width:60px;
|
||||
height:60px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
transition: .5s;
|
||||
transition-delay: .5s;
|
||||
}
|
||||
.navigation.active .userBx {
|
||||
width: calc(100% - 60px);
|
||||
transition-delay: 0s
|
||||
}
|
||||
.navigation.userBx .username{
|
||||
white-space: nowrap;
|
||||
color: #555;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.navigation .userBx .imgBx{
|
||||
position: relative;
|
||||
min-width:60px;
|
||||
height: 60px;
|
||||
background: #000;
|
||||
border-radius: 50%;
|
||||
border: 10px solid #fff;
|
||||
}
|
||||
.navigation .userBx .imgBx img{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.navigation .menuToggle{
|
||||
position: relative;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.navigation .menuToggle::before{
|
||||
content:'';
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
background: #555;
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 8px #555;
|
||||
transition: .5s;
|
||||
}
|
||||
.navigation .menuToggle::after{
|
||||
content:'';
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
background: #555;
|
||||
transform: translateY(8px);
|
||||
box-shadow: 0 -8px #555;
|
||||
transition: .5s;
|
||||
}
|
||||
.navigation.active .menuToggle::before{
|
||||
transform: translateY(0px) rotate(45deg);
|
||||
box-shadow: 0 0 #555;
|
||||
}
|
||||
.navigation.active .menuToggle::after{
|
||||
transform: translateY(0px) rotate(-45deg);
|
||||
box-shadow: 0 0 #555;
|
||||
}
|
||||
.menu{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
margin-top: 60px;
|
||||
padding: 20px;
|
||||
border-top: 1px solid rgba(0,0,0, .1)
|
||||
}
|
||||
.menu li{
|
||||
list-style: none;
|
||||
}
|
||||
.menu li a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap:10px;
|
||||
margin: 20px 0;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
}
|
||||
.menu LI A:hover{
|
||||
color:#4e65ff;
|
||||
|
||||
}
|
||||
.menu li a ion-icon{
|
||||
font-size: 21px;
|
||||
}
|
||||
34
100_projects/46-dropdown-menu-user-account/index.html
Normal file
34
100_projects/46-dropdown-menu-user-account/index.html
Normal file
@ -0,0 +1,34 @@
|
||||
<!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/all.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navigation">
|
||||
<div class="userBx">
|
||||
<div class="imgBx">
|
||||
<img src="user.jpg" alt="">
|
||||
</div>
|
||||
<div class="username">Sam .... </div>
|
||||
</div>
|
||||
<div class="menuToggle"></div>
|
||||
<ul class="menu">
|
||||
<li><a href="#"><ion-icon name="people-outline"></ion-icon>My Profile</a></li>
|
||||
<li><a href="#"><ion-icon name="chatbubble-ellipses-outline"></ion-icon>Messages</a></li>
|
||||
<li><a href="#"><ion-icon name="notifications-outline"></ion-icon>Notification</a></li>
|
||||
<li><a href="#"><ion-icon name="settings-outline"></ion-icon>Settings</a></li>
|
||||
<li><a href="#"><ion-icon name="help-circle-outline"></ion-icon>Help & Support</a></li>
|
||||
<li><a href="#"><ion-icon name="log-out-outline"></ion-icon>Logout</a></li>
|
||||
</ul>
|
||||
</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>
|
||||
6
100_projects/46-dropdown-menu-user-account/js/main.js
Normal file
6
100_projects/46-dropdown-menu-user-account/js/main.js
Normal file
@ -0,0 +1,6 @@
|
||||
let menuToggle = document.querySelector(".menuToggle");
|
||||
let navigation = document.querySelector(".navigation");
|
||||
menuToggle.onclick = function(){
|
||||
navigation.classList.toggle('active');
|
||||
}
|
||||
|
||||
BIN
100_projects/46-dropdown-menu-user-account/user.jpg
Normal file
BIN
100_projects/46-dropdown-menu-user-account/user.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Loading…
Reference in New Issue
Block a user