Front-End
تمرین جدید
JavaScript
HTML & CSS
تحلیل جواب با AI
Python - پایتون
PHP - پی اچ پی
C# - سی شارپ
C & C++ - سی و سی پلاس پلاس
Kotlin - کاتلین
Java - جاوا
DataBase - دیتابیس
Matlab - متلب
Rust - راست
Golang - گولنگ
Bash - بش
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام
<!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; /* جلوگیری از اسکرول افقی */
}
.menu {
position: fixed;
top: 0;
right: -300px; /* شروع از خارج صفحه */
width: 250px;
height: 100%;
background-color: #333;
color: white;
transition: right 0.3s ease; /* انیمیشن ورود منو */
padding: 20px;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
}
.menu.open {
right: 0; /* ورود منو به صفحه */
}
.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'); // اضافه یا حذف کلاس 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>
body, html {
margin: 0;
padding: 0;
}
/* استایل بدنه کشو */
#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;
}
/* استایل دستگیره کشو */
#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;
}
/* استایل دستگیره کشو وقتی موس روی آن قرار میگره */
#DRAWER-handle:hover{
color: #c6b747;
cursor: pointer;
}
/* استایل داخل کشو */
#DRAWER-inside {
grid-column: 2 / 3;
grid-row: 1 / 4;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
background: #204def;
}
/* استایل محتویات کشو */
.Drawer-contents {
width: 70%;
height: 50px;
background: #76424255;
}
/* انیمیشن برای باز شدن کشو */
@keyframes openDrawer {
0% { left: calc(100% - 20px); }
80% { left: calc(100% - 170px); }
100% { left: calc(100% - 160px); }
}
/* انیمیشن برای بسته شدن کشو */
@keyframes closeDrawer {
0% { left: calc(100% - 160px); }
100% { left: calc(100% - 20px); }
}
/* انیمیشن برای محتویات کشو هنگام باز شدن */
@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>
// گرفتن تگ کشو، دستگیره کشو، محتویات کشو و صداها
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");
// اجرای دستوراتی بعد از کلیک کردن دستگیره کشو
DRAWERhandle.onclick = () => {
if (!DRAWER.classList.contains("open")) {
//اجرای انیمیشن باز شدن کشو
DRAWER.style.animation = "openDrawer 0.6s ease-out forwards";
//اجرای انیمیشن محتویات داخل کشو
DRAWERcontents.forEach(v => {
v.style.animation = "none"; // حذف انیمیشن قبلی
v.offsetHeight; // ترفند برای بازنشانی انیمیشن
v.style.animation = "Drawer-contents 0.6s ease-out";
});
//تغیر نماد دستگیره کشو
DRAWERhandle.innerHTML = "❱";
// پخش صدای باز شدن
openSound.play();
//افزودن کلاس (باز) به کشو
DRAWER.classList.add("open");
}
else {
//اجرای انیمیشن بستن کشو
DRAWER.style.animation = "closeDrawer 0.5s";
//تغییر نماد دستگیره کشو
DRAWERhandle.innerHTML = "❰";
// پخش صدای بسته شدن
closeSound.play();
//حذف کلاس (باز) از کشو
DRAWER.classList.remove("open");
}
};
</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>Menu Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
#menu {
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100%;
background-color: #333;
color: white;
transition: right 0.3s;
}
#menu.open {
right: 0;
}
#toggleBtn {
margin: 20px;
padding: 10px 20px;
cursor: pointer;
}
</style>
</head>
<body>
<button id="toggleBtn">باز کردن منو</button>
<div id="menu">
<button id="closeBtn">بستن منو</button>
<p>گزینه 1</p>
<p>گزینه 2</p>
</div>
<script>
const toggleBtn = document.getElementById('toggleBtn');
const menu = document.getElementById('menu');
const closeBtn = document.getElementById('closeBtn');
toggleBtn.onclick = function() {
menu.classList.toggle('open');
};
closeBtn.onclick = function() {
menu.classList.remove('open');
};
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice</title>
<style>
#side {
width: 300px;
height: 100%;
background-color: gold;
position: fixed;
right: -300px;
top: 0px;
transition: right 1s ;
}
#side ul {
list-style-type: none;
}
#side ul li {
padding-top: 60px;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="openMenu()">menu</button>
<section id="side">
<button onclick="closeMenu()">close</button>
<ul>
<li>صفحه اصلی</li>
<li>صفحه فرعی</li>
<li>صفحه میانبر</li>
<li>صفحه جالب</li>
<li>صفحه جالبتر</li>
</ul>
</section>
<script>
let menu = document.getElementById("side")
let openMenu = ()=>{
menu.style.right = "0px"
}
let closeMenu = ()=> {
menu.style.right = "-300px"
}
</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'
}
برای استفاده از این بخش باید وارد حساب کاربریت بشی
ورود/ثبت نام