كيفية إنشاء: قائمة توجيه جانبية

إنشاء قائمة توجيه جانبية بملامح حركية

الخطوة الأولى - إضافة HTML:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">عننا</a>
  <a href="#">خدمات</a>
  <a href="#">عملاء</a>
  <a href="#">اتصل بنا</a>
</div>
<!-- استخدم أي عنصر لفتح القائمة الجانبية -->
<span onclick="openNav()">open</span>
<!-- إذا كنت ترغب في أن تقوم القائمة الجانبية بطرح محتوى الصفحة إلى اليمين، فضع جميع محتويات الصفحة داخل هذا div (إذا كنت ترغب في أن تظل القائمة الجانبية في أعلى الصفحة، فلا تستخدم هذا الإعداد) -->
<div id="main">
  ...
</div>

الخطوة الثانية - إضافة CSS:

/* قائمة التوجيه الجانبية */
.sidenav {
  الارتفاع: 100%; /* الارتفاع الكامل */
  العرض: 0; /* عرض 0 - يتم تغيير هذا الإعداد باستخدام JavaScript */
  الوضع: ثابت; /* البقاء في المكان */
  الترتيب-الزمني: 1; /* البقاء في الأعلى */
  الجزء-الاعلى: 0; /* البقاء في الأعلى */
  left: 0;
  لون-الخلفية: #111; /* أسود */
  overflow-x: hidden; /* تعطيل التمرير الأفقي */
  ملء-العمود: 60بكسل; /* وضع المحتوى على بعد 60بكسل من الأعلى */
  过渡: 0.5ثانية; /* تأثير انتقال لمدة 0.5ثانية، يستخدم لعرض تمرير القائمة الجانبية */
}
/* رابط قائمة التوجيهThe navigation menu links */
.sidenav a {
  ملء: 8بكسل 8بكسل 8بكسل 32بكسل;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* تغيير لون الروابط عند وضع المؤشر عليها */
.sidenav a:hover {
  color: #f1f1f1;
}
/* موقع و تنسيق زر الإغلاق (في الزاوية العلوية اليمنى) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* ضبط تنسيق محتوى الصفحة - إذا كنت ترغب في تحريك محتوى الصفحة إلى اليمين عند فتح النافذة الجانبية، استخدم هذا الإعداد. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* في الشاشات الصغيرة ذات الارتفاع أقل من 450px، تغيير تنسيق النافذة الجانبية (تقليل الهوامش الداخلية و حجم الخط) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

الخطوة الثالثة - إضافة JavaScript:

في المثال التالي، سيسمح النافذة الجانبية بالسحب إلى اليسار، وسيتم ضبط عرضها إلى 250px:

مثال تغطية النافذة الجانبية

/* ضبط عرض النافذة الجانبية إلى 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* ضبط عرض النافذة الجانبية إلى 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

جربها بنفسك

في المثال التالي، سيسمح النافذة الجانبية بالسحب إلى اليسار، وتحريك محتوى الصفحة إلى اليمين (القيم المستخدمة لضبط عرض النافذة الجانبية هي نفسها التي تُستخدم لضبط الهوامش الخارجية للنص على اليسار):

النافذة الجانبية تدفع المحتوى

/* ضبط عرض النافذة الجانبية إلى 250px، عرض الهوامش الخارجية للنص على اليسار إلى 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* ضبط عرض النافذة الجانبية إلى 0، عرض الهوامش الخارجية للنص على اليسار إلى 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

جربها بنفسك

في المثال التالي، سيسمح النافذة الجانبية بالسحب إلى اليسار، وتحريك محتوى الصفحة إلى اليمين. ولكن هذه المرة، تم إضافة لون خلفية أسود شفاف بنسبة 40% إلى عنصر الجسم ل "الإبراز" النافذة الجانبية.

النافذة الجانبية ذات الشفافية تدفع المحتوى

/* ضبط عرض النافذة الجانبية إلى 250px، عرض الهوامش الخارجية للنص على اليسار إلى 250px، وإضافة لون خلفية أسود للجسم */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* 设置侧边导航宽度为 0，页面内容左外边距为 0，body 背景色为白色 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

جربها بنفسك

在下面的例子中，侧边导航将从左侧滑入，并覆盖整个页面（宽度为 100%）：

全宽的侧边导航：

/* 打开侧边导航 */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* 关闭/隐藏侧边导航 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

جربها بنفسك

下面的例子在打开和关闭侧边导航菜单时不带动画效果。

没有动画的 Sidenav

/* 打开侧边导航 */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* 关闭/隐藏侧边导航 */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

جربها بنفسك

下面的例子展示了如何创建右侧导航菜单：

右侧导航：

.sidenav {
  right: 0;
}

جربها بنفسك

下面的例子展示了如何创建一个始终显示的侧边导航菜单（固定位置）：

始终显示的侧边导航：

/* 侧边导航 */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* 页面内容 */
.main {
  margin-left: 200px; /* 与侧边导航的宽度相同 */
}

جربها بنفسك

الصفحات ذات الصلة

دليل:ميزة قائمة التصفح CSS