كيفية إنشاء شريط جانبي (Sidebar) باستخدام HTML وCSS وJavaScript

لإنشاء شريط جانبي (Sidebar) باستخدام HTML وCSS وJavaScript، يمكنك اتباع الخطوات التالية:

1. كتابة كود HTML

ابدأ بكتابة الهيكل الأساسي لـ HTML. ستحتاج إلى عنصر HTML يمثل الشريط الجانبي وعناصر أخرى تمثل محتوى الصفحة.

<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>شريط جانبي</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="sidebar" class="sidebar">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">الرابط 1</a>
<a href="#">الرابط 2</a>
<a href="#">الرابط 3</a>
<a href="#">الرابط 4</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰ فتح الشريط الجانبي</button>
<h2>محتوى الصفحة الرئيسية</h2>
<p>بعض المحتويات هنا...</p>
</div>
<script src="script.js"></script>
</body>
</html>

2. كتابة كود CSS

استخدم CSS لتنسيق الشريط الجانبي ومحتوى الصفحة الرئيسية.

/* styles.css */
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
left: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
#main {
transition: margin-right .5s;
padding: 16px;
}

3. كتابة كود JavaScript

أضف وظائف JavaScript لفتح وإغلاق الشريط الجانبي.

// script.js
function openNav() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginRight= "0";
}