如何创建:可折叠的侧边栏
ຮຽນວິທີການສ້າງສາຍຂາຍສົງກັນທີ່ສາມາດປິດປາກັນໄດ້
ການຄົ້ນຫາຄຳສັ່ງທີ່ຈະເປີດສາຍຂາຍສົງກັນ:
ການສ້າງສາຍຂາຍສົງກັນທີ່ສາມາດປິດປາກັນໄດ້
ການສະຖິຕິທີໜຶ່ງ - ການເພີ່ມ HTML:
<div id="mySidebar" class="sidebar"> <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> <div id="main"> <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button> <h2>Collapsed Sidebar</h2> <p>Content...</p> </div>
ການສະຖິຕິທີສອງ - ການເພີ່ມ CSS:
/* ການເຊື່ອມຕໍ່ອອກສາຍຂາຍ */ .sidebar { height: 100%; /* 100% ສູງທັງໝົດ */ width: 0; /* ການປ່ຽນສີລະບົບວິນາທີທີ່ຈະປ່ຽນຕາມ JavaScript */ position: fixed; /* ຮັກສາຢູ່ສະຖານະບ່ອນເບື້ອງຕົ້ນ */ z-index: 1; /* ຮັກສາຢູ່ເທິງຕົວເຫນືອ */ top: 0; left: 0; background-color: #111; /* ສີດຳ */ overflow-x: hidden; /* ປິດການສາຍຊັບສາຍວອກຂອງທີ່ທຳມະດາ */ padding-top: 60px; /* ການຕິດຕັ້ງເຂົ້າມາສູງ 60px */ transition: 0.5s; /* 0.5 ວິນາທີຂອງການປ່ຽນສະພາບ */ } /* ການເຊື່ອມຕໍ່ຂອງສາຍອອກສາຍຂາຍ */ .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; right: 25px; font-size: 36px; margin-left: 50px; } /* ການຕັດສິນຄືດວ່າກົດລະບຽບສຳຫຼັບກົດລະບຽບສາຍທາງຊາຍ */ .openbtn { font-size: 20px; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border: none; } .openbtn:hover { background-color: #444; } /* ການຕັດສິນຄືດວ່າຮູບແບບຂອງຂໍ້ມູນໃນເບື້ອງຫົວໃນຂະນະທີ່ການເປີດສາຍທາງຊາຍ */ #main { transition: margin-left .5s; /* ຖ້າທ່ານຕ້ອງການຜົນກະທົບການປ່ຽນກວດສູດ */ padding: 20px; } /* ການປ່ຽນຮູບແບບສາຍທາງຊາຍໃນສະໜາມທີ່ມີຄວາມສູງຕໍ່າກວ່າ450ພັນກຳນາທິການ(ຫຼຸດການກວດສູດໃນພາຍໃນແລະຂະແໜງຂອງມູນລະບົບມູນລະບົບ) */ @media screen and (max-height: 450px) { .sidebar {padding-top: 15px;} .sidebar a {font-size: 18px;} }
ບາງການທີ3 - ການເພີ່ມ JavaScript:
/* ການຕັດສິນຄືດວ່າຄວາມກວດສູດທີ່ພາຍໃນຂະແໜງສາຍທາງຊາຍຂອງສາຍທາງຊາຍຂອງຂໍ້ມູນແລະການຕັດສິນຄືດວ່າຄວາມກວດສູດທີ່ພາຍໃນຂະແໜງທີ່ສາຍທາງຊາຍຂອງຂໍ້ມູນ */ function openNav() { document.getElementById("mySidebar").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } /* ການຕັດສິນຄືດວ່າຄວາມກວດສູດທີ່ພາຍໃນຂະແໜງຂອງສາຍທາງຊາຍຂອງຂໍ້ມູນແລະການຕັດສິນຄືດວ່າຄວາມກວດສູດທີ່ພາຍໃນຂະແໜງທີ່ສາຍທາງຊາຍຂອງຂໍ້ມູນ */ function closeNav() { document.getElementById("mySidebar").style.width = "0"; document.getElementById("main").style.marginLeft = "0"; }
相关页面
教程:CSS 导航栏