ວິທີການເຮັດໃຫ້ເປັນເລື່ອນລົງເມນູ CSS

ຄໍາແນະນໍາແລະ

ຫນ້າທໍາອິດ, ໃຫ້ເຂົ້າໃຈສິ່ງທີ່ເປັນເມນູເລື່ອນລົງ. ພາຍໃຕ້ຄໍານິຍາມນີ້ໄດ້ຮັບຫຼາຍຂອງວິທີການທີ່ແຕກຕ່າງກັນການກໍ່ສ້າງຮູບແບບທີ່ແຕກຕ່າງກັນໄດ້. ໃນກໍລະນີດັ່ງກ່າວນີ້, ພວກເຮົາຈະວິເຄາະໂຄງສ້າງປະກອບດ້ວຍລາຍການສັງເກດເຫັນສະເຫມີຫຼາຍແລະຫຼາຍເພີ່ມເຕີມ (ເຊື່ອງໄວ້). ໃຫ້ສໍາເລັດຮູບທີ່ມີທິດສະດີແລະເລີ່ມຕົ້ນການປະຕິບັດ.

• ພວກເຮົາສ້າງຮູບລັກຂອງເມນູຂອງພວກເຮົາໄດ້. ເພື່ອເຮັດສິ່ງນີ້, ການຕິດສະຫລາກ HTML, ລະຫັດ. ສ້າງບັນຊີລາຍຊື່ຊ້ອນ:
  • • < / ul>. ບາງສິ່ງບາງຢ່າງເຊັ່ນ: ນີ້ຄວນຄືເມນູເລື່ອນລົງຂອງທ່ານ. CSS ທີ່ຈະແຊກແຊງໃນພາຍຫລັງ. ໃນກໍລະນີນີ້ບັນຊີລາຍຊື່ຕົ້ນຕໍປະກອບດ້ວຍສາມຂົງເຂດຕົ້ນຕໍແລະສອງຊອງ.
    • ເຊື່ອງການຍ່ອຍເມນູ. ສໍາລັບນີ້ພວກເຮົາໃຊ້ສະໄຕຊີດ, ກໍານົດຄຸນສົມບັດດັ່ງຕໍ່ໄປນີ້: ul ul {display: none;} ນີ້ຈະເອົາອົງປະກອບຂອງບັນຊີລາຍຊື່ທີ່ສອງຈາກຫນ້າຈໍໄດ້.
    • ສ້າງ CSS ເມນູ, drop-down ຈາກບັນຊີລາຍຊື່ຕົ້ນຕໍ. ເອກະສານແບບ cascading ຂຽນກົດດັ່ງຕໍ່ໄປນີ້: li ul: hover ul {display: block;}. ນີ້ຫມາຍຄວາມວ່າໃນເວລາທີ່ຫນູແມ່ນໃນໄລຍະ li ອົງປະກອບ, ທີ່ຕັ້ງຢູ່ໃນບັນຊີລາຍຊື່ ul ປະກົດວ່າໃນ ul ຫນ້າຈໍ (ທີ່ຕິດຄັດມາ). ຢູ່ glance ທໍາອິດ, ໂຄງການດັ່ງກ່າວອາດຈະເບິ່ງຄືວ່າສັບສົນແລະສັບສົນ. ແຕ່ໃນຄວາມເປັນຈິງ, ທຸກສິ່ງທຸກຢ່າງແມ່ນງ່າຍດາຍຫຼາຍ.
    • ໃຊ້ຮູບແບບນີ້ຕົວທ່ານເອງໄດ້ໂດຍ inserting ເປັນ tags ໄດ້
    • ເນື້ອໃນຂອງທ່ານ. ທ່ານສາມາດມີການປ່ຽນແປງຈໍານວນຂອງອົງປະກອບບັນຊີລາຍຊື່.

    ການປ່ຽນແປງອອກແບບ

    ທັນທີທີ່ໄດ້ຮູບລັກເມນູຕົ້ນຕໍແມ່ນກຽມພ້ອມ, ທ່ານສາມາດດໍາເນີນການກັບການຈົດທະບຽນ. ອາດຈະເປັນ, ຈໍານວນຫຼາຍໃນສະຖານທີ່ທໍາອິດເຕັມໃຈທີ່ຈະໄດ້ຮັບການກໍາຈັດຂອງເຄື່ອງຫມາຍທີ່ຊີ້ບອກວ່າລາຍການບັນຊີລາຍການ. ນີ້ແມ່ນເຮັດໃຊ້ CSS ຄຸນສົມບັດດຽວ, ຄືບັນຊີລາຍຊື່-style-type. ທ່ານຈໍາເປັນຕ້ອງເພີ່ມເຂົ້າດັ່ງຕໍ່ໄປນີ້: li {ບັນຊີລາຍຊື່-style-type: none;}. ຫຼັງຈາກນັ້ນທ່ານສາມາດສະແດງກິ່ງງ່າກອບແລະເຮັດໃຫ້ ພື້ນຖານຂອງ. ຊາຍແດນແລະຄວາມເປັນມາຊ່ວຍໃຫ້ທ່ານມີນີ້. ບາງທີອາດມີບາງຄົນຈະບໍ່ມັກເມນູດຶງລົງລຸ່ມຈະໄປປາກົດເປັນບັນຊີລາຍຊື່ເພີ່ມເຕີມ, ຊຸກຍູ້ໃຫ້ຢູ່ໃນອົງປະກອບພື້ນຖານດຽວກັນ. ເປັນການແກ້ໄຂດັ່ງກ່າວນີ້, ທ່ານສາມາດວາງຕໍາແຫນ່ງມັນ. ເພື່ອເຮັດສິ່ງນີ້, ແຜ່ນແບບ cascading ຂຽນເຂົ້າດັ່ງຕໍ່ໄປນີ້: ul ul {position: absolute; ຊ້າຍ: 15px; ສິດທິ: 15px; top: 15px; ລຸ່ມ: 15px;}. ແນ່ນອນວ່າ, ຄ່າທີ່ທ່ານຈະນໍາໃຊ້ຂອງທ່ານເອງ. ອີງຕາມບ່ອນທີ່ທ່ານຕ້ອງການທີ່ຈະເບິ່ງເມນູເລື່ອນລົງ, CSS ຈະສະເຫນີໃຫ້ຄຸນນະສົມບັດເພີ່ມເຕີມຈໍານວນຫຼາຍທີ່ສາມາດເພີ່ມຜົນກະທົບຕ່າງໆແລະ decorate ລາຍຂອງພວກເຮົາ.

    ສະຫຼຸບ

    ເມື່ອອີກເທື່ອຫນຶ່ງມັນເປັນມູນຄ່າບອກກໍ່ສ້າງຂອງຮູບລັກເມນູໄດ້. ການກໍາຫນົດກົດລະບຽບ CSS ທີ່ໃຊ້ໃນມູນຄ່າກໍລະນີຝັງດັ່ງກ່າວນີ້, ສໍາລັບການຍົກຕົວຢ່າງ, ul ul. ຖ້າຫາກວ່າທ່ານຢູ່ໃນເອກະສານທີ່ຈະຕອບສະຫນອງໂຄງສ້າງທີ່ຄ້າຍຄືກັນອື່ນໆ, ອາດຈະມີບັນຫາໃຫຍ່. ໃນສະຖານະການເຫຼົ່ານີ້, ທ່ານຈໍາເປັນຕ້ອງໄດ້ນໍາໃຊ້ເປັນຈຸດປະສົງສະເພາະໃດຫນຶ່ງ, ສໍາລັບການຍົກຕົວຢ່າງ, selectors ຫຼື id, IDs. ເມນູເລື່ອນລົງຮູບບົດຄວາມຂ້າງເທິງນີ້ໄດ້ຖືກອອກແບບທີ່ຈະຄຸ້ນເຄີຍໃນການອອກແບບໂດຍທົ່ວໄປ. ສ່ວນທີ່ເຫຼືອຂອງການເຮັດວຽກທີ່ rests ສຸດ shoulders ຂອງທ່ານ.