ເມນູຕັ້ງສໍາລັບເວັບໄຊໃນຮູບແບບຂອງຫີບເພງກັບ jQuery ໄດ້

ເມນູ, ເປັນທີ່ທ່ານຮູ້ຈັກ - ເປັນສ່ວນຫນຶ່ງຂອງເວັບໄຊດັ່ງກ່າວ. ຫນ້າສົນໃຈຊັບພະຍາກອນອອນໄລນ໌ນໍາທິດແມ່ນສາມາດໃຫ້ນັກທ່ອງທ່ຽວມີຄວາມສົນໃຈ. ໃນນອກຈາກນັ້ນ, ເປັນຄຸນສົມບັດທີ່ສໍາຄັນຂອງເມນູໃດ - ຄວາມເປັນປຶກແຜ່ນຂອງຕົນ. A ເມນູຕັ້ງງ່າຍດາຍໄດ້ຢ່າງງ່າຍດາຍສ້າງການນໍາໃຊ້ HTML ແລະ CSS. ແຕ່ພວກເຮົາໄປຕື່ມອີກ: ໃຫ້ພວກເຮົາຮຽນຮູ້ທີ່ຈະສ້າງເມນູ "ຫີບ" ການຊ່ວຍເຫຼືອຂອງ jQuery ໄດ້.

ສ້າງເມນູ "ຫີບ"

ເປັນເມນູຕັ້ງໃນຮູບແບບຂອງຫີບເພງເປັນແນວໃດ? ນີ້ແມ່ນບັນຊີລາຍຊື່ເລື່ອນລົງ, ເຊິ່ງເປັນການສ້າງສະດວກໃນການນໍາແລະເຮັດໃຫ້ເວັບໄຊ stylish. ເມນູ, ປະຕິບັດໃນວິທີການດັ່ງກ່າວນີ້, ອະນຸຍາດໃຫ້ທ່ານເພື່ອເຮັດໃຫ້ຫຼາຍຂອງຍ່ອຍລາຍ-a. ການເຂົ້າເຖິງພວກເຂົາເກີດຂຶ້ນໃນເວລາທີ່ທ່ານຄລິກໃສ່ຫນູໃນລາຍການທີ່ຕ້ອງການ. ຜູ້ໃດຜູ້ຫນຶ່ງອາດຈະເວົ້າວ່າມັນເປັນໄປໄດ້ທີ່ຈະເຮັດໃຫ້ເປັນເມນູທີ່ງ່າຍດາຍໃນຄົນອັບເດດ: ນີ້ໂດຍບໍ່ມີການນໍາໃຊ້ຂອງ jQuery ໄດ້. ແມ່ນແລ້ວ, ມັນເປັນ. ແຕ່ຈຸດປະສົງນີ້ຈະບໍ່ເປັນປະໂຫຍດທີ່ສຸດເພື່ອເຈົ້າຂອງໂທລະສັບສະຫຼາດຫຼືຢາເມັດ. ໃຫ້ຂອງສ້າງເມນູຕັ້ງ, ການອຸທອນເພື່ອທຸກຄົນ. ຫຼັງຈາກນັ້ນ, ການປ່ຽນແປງສີທີ່ຄໍເຕົ້າໄຂ່ທີ່ນໍາທິດ, ມັນຈະເປັນໄປໄດ້ທີ່ຈະປັບການອອກແບບເວັບໄຊໃດຫນຶ່ງ.

ລະຫັດ HTML

ດັ່ງນັ້ນ, ການສ້າງເມນູຕັ້ງຂອງພວກເຮົາ, ທ່ານທໍາອິດຕ້ອງຫນ້າປັດ HTML, ລະຫັດ, ເຊິ່ງຈະປະກອບດ້ວຍສາຍດັ່ງຕໍ່ໄປນີ້:

ຊ່ວຍປະຢັດລະຫັດນີ້ໃນເອກະສານທີ່ເອີ້ນວ່າ Accord_menu.html.

ຂະນະທີ່ທ່ານສາມາດເບິ່ງ, ພວກເຮົາໄດ້ສ້າງບັນຊີລາຍຊື່ unordered. ມັນປະກອບດ້ວຍ 3 ຈຸດຕົ້ນຕໍ:

- ຮູບພາບ;

- ຮູບເງົາ;

- ຫນັງສື.

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

CSS ລະຫັດ

ມີຄໍເຕົ້າໄຂ່ທີ່ທ່ານບໍ່ຄວນຈະມີຄວາມຫຍຸ້ງຍາກ. ພວກເຮົາສັງເກດມີພຽງແຕ່ວ່າໃນຕົວຢ່າງນີ້ນໍາໃຊ້ເປັນຕື່ມຂໍ້ມູນ gradient. ຕໍ່ໄປນີ້ແມ່ນ CSS ລະຫັດໄດ້:

ສີລະບຸໄວ້ໃນ CSS, ເອກະສານ, ເຄື່ອງຫມາຍຂະຫນາດຖືກໂຍກຍ້າຍອອກຈາກລາຍການໃນບັນຊີລາຍຊື່ທາງດ້ານຊ້າຍໄດ້. ມັນກໍານົດວິທີການປະຕິບັດຕົວໃນແຕ່ລະລາຍການແລະອະນຸເມນູໃນເວລາທີ່ທ່ານ hover ຫຼາຍກວ່າມັນ. ສໍາລັບຕົວຢ່າງເຊັ່ນ:

# e1fee2 - ນີ້ ສີຂີ້ເຖົ່າຈາງສີຂຽວ ຍ່ອຍ.

# C4f0f7 ຍ່ອຍຮົ່ມ -golubovaty ໃນເວລາທີ່ທ່ານ hover ຫຼາຍກວ່າເຂົາເຈົ້າ.

ຄຸນສົມບັດການສະແດງຮ້ອງຂໍໃຫ້ມູນຄ່າ block ເພື່ອປັບ padding ມີຄວາມຈໍາເປັນແລະຂະຫນາດ. ສີ, ຂະຫນາດ, ປະເພດຕົວອັກສອນ, ສະຖານທີ່ - ທຸກສິ່ງທຸກຢ່າງແມ່ນເປັນອະທິບາຍໃນເອກະສານ CSS ໄດ້. ໂທຫາມັນ, ສໍາລັບການຍົກຕົວຢ່າງ, accordionmenu_my1.css.

ເຊື່ອມຕໍ່ການປັບປຸງເມນູ jQuery

ຂະນະທີ່ທ່ານອາດຈະ recall, ເປົ້າຫມາຍຂອງພວກເຮົາ - ເພື່ອສ້າງ jQuery ເມນູຕັ້ງ. ຖ້າຫາກວ່າທ່ານບໍ່ຄຸ້ນເຄີຍກັບເຕັກໂນໂລຊີດັ່ງກ່າວນີ້, ບໍ່ຕ້ອງກັງວົນ. ພວກເຮົານໍາໃຊ້ repository ກູໂກແລະເຊື່ອມຕໍ່ script JQuery. ນີ້ຈະເຮັດໃຫ້ມັນເມນູທີ່ຫນ້າສົນໃຈຫຼາຍ. jQuery ເປັນຫ້ອງສະຫມຸດ JavaScript ໂດຍອີງໃສ່ປະຕິສໍາພັນຂອງ Hypertext Markup HTML ແລະ JavaScript ໄດ້. jQuery ອະນຸຍາດໃຫ້ທ່ານສາມາດເຂົ້າເຖິງເນື້ອຫາແລະຄຸນລັກສະນະຂອງອົງປະກອບ.

ດັ່ງນັ້ນ, ການເຊື່ອມຕໍ່ script ທີ່ຈໍາເປັນໃນຮ່າງກາຍຂອງ HTML, ໄຟລ໌ແລະກໍານົດກົດລະບຽບສໍາລັບການເກັບຮັກສາຂອງ 2 ຕົວປ່ຽນແປງ, ຍົກເວັ້ນສໍາລັບອົງປະກອບແຂ່ງມ້າ. ປະກອບສ່ວນລະຫັດປິດກ່ອງອື່ນ ໆ ໃນການເປີດຫນຶ່ງທີ່ມີການຄລິກຫນູໄດ້. ຕໍ່ໄປນີ້ແມ່ນວິທີມັນເບິ່ງຄືວ່າ:

ຊ່ວຍປະຢັດການປ່ຽນແປງທັງຫມົດ, ເບິ່ງສິ່ງທີ່ມັນຄ້າຍຄືຢູ່ໃນເມນູຂອງຕົວທ່ອງເວັບໄດ້. ທີ່ເປັນຜົນທົ່ວໄປຂອງ: ດັ່ງນັ້ນ, ພວກເຮົາໄດ້ມາເປັນເມນູຫນ້າສົນໃຈທີ່ທ່ານສະເຫມີສາມາດປ່ຽນແປງ, ອີງຕາມຄວາມມັກຂອງເຂົາເຈົ້າ. ແລະຊອກຫາຄວາມຮູ້ໃຫມ່ໃນພາກສະຫນາມຂອງ jQuery, CSS, ທ່ານຈະສ້າງອົງປະກອບເປັນເອກະລັກຂອງເວັບໄຊດັ່ງກ່າວ, ການປັບປຸງຄວາມສາມາດຂອງເຂົາເຈົ້າ.