Using HTML, CSS and JavaScript Design a page containing the menu that has the following features
Design a button to enter the screen by clicking the menu 100% height from the right side of the screen
Inside the menu put an option to (close) the menu
Front-End
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript7</title>
</head>
<style>
.saidebar{
width: 300px;
height: 100%;
position: fixed;
background: #c9aed196;
top: 0;
left: -300px;
transition: left 1s ease-out;
}
.saidebar li a{
text-decoration: none;
color: black;
}
.saidebar ul{
width: 200px;
list-style-type:circle;
left: 0;
}
</style>
<body>
<section>
<button id="open" style="color:#c403ff ;border-radius: 10px;background-color: rgba(110, 106, 106, 0.253);font-size: 20px;">open</button>
</section>
<section class="saidebar">
<button id="close" style="color:#c403ff ;border-radius: 10px;background-color: rgba(110, 106, 106, 0.253);font-size: 20px;" >close</button>
<ul>
<li><a href="#">main page</a></li>
<li><a href="#">log_in</a></li>
<li><a href="#">log_out</a></li>
<li><a href="#">panel</a></li>
</ul>
</section>
<script>
let side = document.querySelector(".saidebar")
let open = document.querySelector("#open")
let close = document.querySelector("#close")
open.onclick = ()=>{
side.style.left = 0
open.style.display = "none"
}
close.onclick = ()=>{
side.style.left = "-300px"
setTimeout(() => {
open.style.display = 'block'
}, 800);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>منوی جانبی</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden; # Preventing horizontal scroll
}
.menu {
position: fixed;
top: 0;
right: -300px; # Starting out of the page
width: 250px;
height: 100%;
background-color: #333;
color: white;
transition: right 0.3s ease; # Animation of menu entry
padding: 20px;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
}
.menu.open {
right: 0; # Menu Login to Page
}
.menu button {
background-color: red;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
}
.toggle-button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<button class="toggle-button" onclick="toggleMenu()">نمایش منو</button>
<div class="menu" id="menu">
<h2>منوی جانبی</h2>
<button onclick="toggleMenu()">بستن</button>
<p>این یک منوی جانبی است.</p>
</div>
<script>
function toggleMenu() {
const menu = document.getElementById('menu');
menu.classList.toggle('open'); # Added or delete the open class
}
</script>
</body>
</html>
HTML & CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body, html {
margin: 0;
padding: 0;
}
# Drawer body style
#DRAWER {
display: grid;
grid-template-columns: 20px 150px;
grid-template-rows: 30px 80px auto;
height: 100vh;
width: 170px;
position: fixed;
left: calc(100% - 20px);
transition: left 0.3s ease;
}
# The drawer style style
#DRAWER-handle {
grid-column: 1 / 2;
grid-row: 2 / 3;
border-radius: 10px 0px 0px 10px;
user-select: none;
font-size: 40px;
text-align: center;
line-height: 2;
color: #edeafc;
background: #204def;
}
# The drawer style of the drawer when the mouse puts on it
#DRAWER-handle:hover{
color: #c6b747;
cursor: pointer;
}
# Style in -drawer
#DRAWER-inside {
grid-column: 2 / 3;
grid-row: 1 / 4;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background: #204def;
}
# The style of the drawer
.Drawer-contents {
width: 70%;
height: 50px;
background: #76424255;
}
# Animation to open the drawer
@keyframes openDrawer {
0% { left: calc(100% - 20px); }
80% { left: calc(100% - 170px); }
100% { left: calc(100% - 160px); }
}
# Animation to close the drawer
@keyframes closeDrawer {
0% { left: calc(100% - 160px); }
100% { left: calc(100% - 20px); }
}
# Animation for the content of the drawer when opening
@keyframes Drawer-contents {
0% { transform: translateX(0); }
50% { transform: translateX(15px); }
100% { transform: translateX(-10px); }
}
</style>
</head>
<body>
<!-- بدنه کشو -->
<section id="DRAWER">
<!-- دستگیره کشو -->
<div id="DRAWER-handle">❰</div>
<!-- داخل کشو -->
<div id="DRAWER-inside">
<!-- محتویات کشو -->
<div class="Drawer-contents"></div>
<div class="Drawer-contents"></div>
<div class="Drawer-contents"></div>
<div class="Drawer-contents"></div>
<div class="Drawer-contents"></div>
</div>
</section>
<!-- افزودن تگهای صدا -->
<audio id="openSound" src="drawer-open-98801.mp3"></audio>
<audio id="closeSound" src="086183_dresser-drawer-closing-87326.mp3"></audio>
<script>
# Get drawer tag, drawer handle, drawer contents and sounds
const DRAWER = document.getElementById("DRAWER");
const DRAWERhandle = document.getElementById("DRAWER-handle");
const DRAWERcontents = document.querySelectorAll(".Drawer-contents");
const openSound = document.getElementById("openSound");
const closeSound = document.getElementById("closeSound");
# Run the instructions after clicking the drawer handle
DRAWERhandle.onclick = () => {
if (!DRAWER.classList.contains("open")) {
# Drawing Animation Animation
DRAWER.style.animation = "openDrawer 0.6s ease-out forwards";
# Animation of the contents inside the drawer
DRAWERcontents.forEach(v => {
v.style.animation = "none"; # Remove the previous animation
v.offsetHeight; # Trick to reset animation
v.style.animation = "Drawer-contents 0.6s ease-out";
});
# The change of drawer symbol
DRAWERhandle.innerHTML = "❱";
# Open
openSound.play();
# Add class (open) to drawer
DRAWER.classList.add("open");
}
else {
# The implementation of the drawer's animation
DRAWER.style.animation = "closeDrawer 0.5s";
# The change of the drawer of drawer
DRAWERhandle.innerHTML = "❰";
# The closure sound player
closeSound.play();
# Remove the class (open) from the drawer
DRAWER.classList.remove("open");
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.slidbar{
height: 100%;
width: 300px;
background-color: aquamarine;
position: fixed;
top: 0;
right:-300px;
}
.slidbar li{
margin: 13px;
padding: 5px;
background-color: rgb(65, 173, 137);
}
#close{
right: 0;
}
</style>
</head>
<body>
<button onclick="openToggle()">open toggle meno</button>
<section class=" slidbar">
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<button id="close" onclick="closeToggle()">close meno</button>
</div>
</section>
<script>
let open=document.querySelector('.slidbar')
let openToggle=()=>{
open.style.right=0
}
let closeToggle=()=>{
open.style.right='-300px'
}
Submitting answers is currently unavailable.
Write a program that receives a numeric as A from the input and prints all the first numbers smaller than A.
Python
Write a function that receives a username and if it was a character except the lowercase English letters, FALSE and otherwise TRUE
Python
Write a program that obtained a person's / BMI body / BMI formula and, according to the information below, shows the status of the person BMI = w / h * h formula = weight divided by second power BMI ...
JavaScript
Python
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام If you don’t understand the exercise or can’t solve it for any reason, that’s completely
normal—don’t worry 😊
Try checking out easier exercises and reviewing different answers
submitted by others. Gradually, you can move on to more challenging exercises. Also, your answer
might be correct even if it’s different from others.