كيفية إنشاء: قائمة خارج الرسام

إنشاء قائمة خارج الرسام

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

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

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

/* قائمة التوجيه الجانبية */
.sidenav {
  height: 100%; /* الطول الكامل */
  width: 0; /* عرض 0 - يتم تغيير هذا الإعداد عبر JavaScript */
  position: fixed; /* البقاء في الموضع الأصلي */
  z-index: 1; /* البقاء في الأعلى */
  top: 0;
  left: 0;
  background-color: #111; /* الأسود */
  overflow-x: hidden; /* تعطيل التمرير الأفقي */
  padding-top: 60px; /* المسافة بين المحتوى والجزء العلوي 60 بكسل */
  transition: 0.5s; /* تأثير انتقال 0.5 ثانية، لجعل قائمة التوجيه الجانبية تتحرك */
}
/* روابط قائمة التوجيه */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* تغيير لون الزر عند وضع الماوس فوق رابط التوجيه */
.sidenav a:hover {
  color: #f1f1f1;
}
/* موقعية ومظهر الزر المзакlosing (الجزء العلوي الأيمن) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* تعيين أسلوب محتوى الصفحة - إذا كنت ترغب في دفع محتوى الصفحة إلى اليمين عند فتح قائمة التوجيه الجانبية، استخدم هذا الخيار */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* في الشاشات الصغيرة التي يكون طولها أقل من 450 بكسل، يتم تغيير أسلوب قائمة التوجيه الجانبية (تقليل الهوامش الداخلية و حجم الخط) */
@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";
  document.getElementById("main").style.marginLeft = "250px";
}
/* 设置侧边导航的宽度为 0，页面内容的左外边距为0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

جربها بنفسك

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

القائمة الخارجية الشفافة للرسم

/* 设置侧边导航的宽度为 250px，页面内容的左外边距为 250px，并给 body 添加黑色背景色 */
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";
}

جربها بنفسك

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

دليل:شريط التصفح CSS