ຄູ່ມືຂັ້ນຕອນໂດຍຂັ້ນຕອນ
ບໍ່ວ່າເມນູນໍາທິດຂອງທ່ານແມ່ນແຖວແນວນອນຕາມທາງເທິງຫຼືແຖວແນວຕັ້ງແນວໃດກໍ່ຕາມ, ມັນຍັງມີພຽງແຕ່ບັນຊີ. ໃນເວລາທີ່ການອອກແບບນໍາທິດເວັບ, ມັນງ່າຍມັກຈະລືມວ່າເມນູນໍາທິດແມ່ນພຽງແຕ່ກຸ່ມທີ່ເຊື່ອມໂຍງ. ແຕ່ຖ້າທ່ານຕັ້ງໂປລແກລມນໍາທາງຂອງທ່ານໂດຍໃຊ້ XHTML + CSS, ທ່ານສາມາດສ້າງເມນູທີ່ມີຂະຫນາດນ້ອຍທີ່ຈະດາວໂຫລດ (XHTML) ແລະງ່າຍທີ່ຈະປັບແຕ່ງ (CSS).
ການເລີ່ມຕົ້ນ
ເພື່ອເລີ່ມຕົ້ນການອອກແບບບັນຊີສໍາລັບນໍາທິດ, ທ່ານຈໍາເປັນຕ້ອງໃຊ້ບັນຊີລາຍຊື່.
ມັນອາດຈະເປັນບັນຊີລາຍຊື່ທີ່ບໍ່ມີມາດຕະຖານມາດຕະຖານທີ່ໄດ້ຖືກກໍານົດເປັນການນໍາທາງ:
ຖ້າທ່ານເບິ່ງຢ່າງໃກ້ຊິດຢູ່ໃນ HTML, ທ່ານຈະສັງເກດເຫັນວ່າການເຊື່ອມຕໍ່ "ຫນ້າທໍາອິດ" ມີ ID ຂອງທ່ານ. ນີ້ຈະຊ່ວຍໃຫ້ທ່ານສ້າງເມນູທີ່ກໍານົດສະຖານທີ່ປະຈຸບັນສໍາລັບຜູ້ອ່ານຂອງທ່ານ. ເຖິງແມ່ນວ່າທ່ານບໍ່ໄດ້ວາງແຜນທີ່ຈະມີໂຄ້ດຕາດັ່ງກ່າວໃນເວັບໄຊທ໌ຂອງທ່ານຕອນນີ້, ທ່ານສາມາດປະກອບມີຂໍ້ມູນນັ້ນ. ຖ້າທ່ານຕັດສິນໃຈຕື່ມຂໍ້ມູນຂ່າວສານໃນພາຍຫຼັງ, ທ່ານຈະມີລະຫັດຫນ້ອຍໃນການກະກຽມເວັບໄຊທ໌ຂອງທ່ານ.
ໂດຍບໍ່ມີ ຄໍເຕົ້າໄຂ່ CSS ໃດໆ, ເມນູ XHTML ນີ້ເບິ່ງຄືກັບບັນຊີລາຍຊື່ທີ່ບໍ່ມີມາດຕະຖານ. ມີປືນແລະ ລາຍການບັນຊີລາຍການ ມີການປາດຖະຫນາເລັກນ້ອຍ. ເນື່ອງຈາກວ່າຂ້ອຍນໍາໃຊ້ການ ເຊື່ອມໂຍງບ່ອນວາງສະແດງ , ຕົວທ່ອງເວັບສ່ວນໃຫຍ່ຈະບໍ່ສະແດງການເຊື່ອມຕໍ່ເປັນ clickable (ເນັ້ນຫນັກແລະສີຟ້າ). ຖ້າທ່ານວາງໃນ HTML ຂ້າງເທິງໃນຫນ້າເວັບ, ການນໍາທິດຂອງທ່ານຈະຄືແນວນີ້:
- ຫນ້າທໍາອິດ
- ຜະລິດຕະພັນ
- ບໍລິການ
- ຕິດຕໍ່ພວກເຮົາ
ນີ້ແມ່ນຫນ້າເບື່ອທີ່ສວຍງາມແລະບໍ່ມີລັກສະນະຄ້າຍຄືເມນູ. ແຕ່ມີຄໍເຕົ້າໄຂ່ທີ່ມີ CSS ພຽງເລັກນ້ອຍເພີ່ມເຂົ້າໃນບັນຊີ, ທ່ານສາມາດສ້າງເມນູທີ່ເຮັດໃຫ້ທ່ານມີຄວາມພູມໃຈ.
ເມນູນໍາທາງແນວຕັ້ງ
ເມນູນໍາທິດຕັ້ງເປັນເລື່ອງງ່າຍທີ່ຈະຂຽນເນື່ອງຈາກມັນສະແດງໃນແບບດຽວກັບບັນຊີປົກກະຕິ: ຂຶ້ນແລະລົງ.
ລາຍການບັນຊີລາຍຊື່ສະແດງລົງໃນຫນ້າລົງ.
ໃນເວລາທີ່ຂ້າພະເຈົ້າກໍາລັງອອກແບບເມນູ, ຂ້າພະເຈົ້າຢາກເລີ່ມຕົ້ນຢູ່ນອກແລະເຮັດວຽກຢູ່. ໂດຍນີ້, ຂ້ອຍຫມາຍຄວາມວ່າຂ້ອຍທໍາອິດ ul # ນໍາທິດແລະຫຼັງຈາກນັ້ນຍ້າຍກັບອົງປະກອບ li ແລະຫຼັງຈາກນັ້ນການເຊື່ອມຕໍ່, ແລະອື່ນໆດັ່ງນັ້ນສໍາລັບເມນູນີ້, ທໍາອິດທ່ານກໍານົດຄວາມກວ້າງຂອງເມນູ. ນີ້ຈະເຮັດໃຫ້ແນ່ໃຈວ່າເຖິງວ່າລາຍະການເມນູຍາວ, ພວກເຂົາຈະບໍ່ກົດສ່ວນທີ່ເຫຼືອຂອງຮູບແບບຫຼືເຮັດໃຫ້ເລື່ອນພາບແບບເລື່ອນໄດ້.
ul # navigation {width: 12em }
ເມື່ອຂ້ອຍມີຄວາມກວ້າງ, ຂ້າພະເຈົ້າສາມາດຫຼິ້ນກັບລາຍການລາຍການ. ນີ້ອະນຸຍາດໃຫ້ຂ້າພະເຈົ້າຕັ້ງສິ່ງຕ່າງໆເຊັ່ນ: (ເພື່ອກໍາຈັດປືນ), ສີພື້ນຫລັງ, ຂອບ, ການປັບຮູບເສັ້ນແລະຂອບໃບ.
ul # navigation li {
list-style: none;
ພື້ນຫລັງສີ: # 039;
border-top: solid 1px # 039
text-align: left
margin: 0
}
ເມື່ອທ່ານໄດ້ກໍານົດພື້ນຖານສໍາລັບບັນຊີລາຍການລາຍການ, ທ່ານສາມາດເລີ່ມຕົ້ນມັກຫຼີ້ນກັບວິທີການເບິ່ງເມນູໃນພື້ນທີ່ເຊື່ອມຕໍ່. ແບບທໍາອິດ UL # navigation LI ແລະຫຼັງຈາກນັ້ນ A: link, A: ໄດ້ໄປຢ້ຽມຢາມ, A: hover, ແລະ A: active (ຖ້າທ່ານຕ້ອງການ). ສໍາລັບການເຊື່ອມຕໍ່, ຂ້າພະເຈົ້າຢາກເຮັດໃຫ້ການເຊື່ອມຕໍ່ເປັນອົງປະກອບຕັນ (ແທນທີ່ຈະເປັນຄ່າເລີ່ມຕົ້ນໃນເສັ້ນ). ນີ້ເຮັດໃຫ້ພວກເຂົາໃຊ້ເວລາເຖິງພື້ນທີ່ທັງຫມົດຂອງ LI - ແລະພວກເຂົາປະຕິບັດຫຼາຍເຊັ່ນວັກ, ເຊິ່ງເຮັດໃຫ້ພວກເຂົາງ່າຍທີ່ຈະລົງແບບເປັນປຸ່ມເມນູ. ສິ່ງອື່ນທີ່ຂ້ອຍມັກຈະເຮັດແມ່ນການຖອດລະຫັດ (text-decoration: none;), ຍ້ອນວ່ານີ້ເຮັດໃຫ້ປຸ່ມເບິ່ງຫຼາຍຄືປຸ່ມກັບຂ້ອຍ.
ແຕ່ແນ່ນອນ, ການອອກແບບຂອງທ່ານອາດແຕກຕ່າງກັນ.
ul # navigation li a {
display: block
text-decoration: none
padding: 25em
ດ້ານລຸ່ມ: ແຂງ 1px # 39f;
border-right: solid 1px # 39f
}
ສັງເກດເຫັນວ່າມີການສະແດງ: ຕັນ; ກໍານົດກ່ຽວກັບການເຊື່ອມຕໍ່, ກ່ອງທັງຫມົດຂອງລາຍການເມນູແມ່ນ clickable, ບໍ່ພຽງແຕ່ຕົວອັກສອນ. ນີ້ແມ່ນຍັງດີສໍາລັບການນໍາໃຊ້. ໃຫ້ແນ່ໃຈວ່າການກໍານົດ ສີເຊື່ອມຕໍ່ (ການເຊື່ອມຕໍ່, ການໄປຢ້ຽມຢາມ, ການຫມຸນແລະການເຄື່ອນໄຫວ) ຖ້າທ່ານຕ້ອງການໃຫ້ພວກເຂົາແຕກຕ່າງຈາກສີຟ້າ, ສີແດງແລະສີມ່ວງ.
a: link, a: visited {color: #fff }
a: hover, a: active {color: # 000 }
ຂ້າພະເຈົ້າຍັງຢາກໃຫ້ ລັດສະຖານະ ການຕໍາຫຼວດມີຄວາມສົນໃຈຫຼາຍຂຶ້ນໂດຍການປ່ຽນສີພື້ນຫລັງ.
a: hover {background-color: #fff }
ຖ້າທ່ານຕ້ອງການຕົວຢ່າງຫຼາຍຢ່າງກ່ຽວກັບເມນູຕັ້ງຕົວ, ເບິ່ງລາຍະການຂ້າງລຸ່ມນີ້.
- A Styled Vertical Menu
- ຕົວແບບຂອງເມນູແບບເບື້ອງຕົ້ນພື້ນຖານ
- ເມນູແນວຕັ້ງແບບຍືດຫຍຸ່ນທີ່ມີທ່ານຢູ່ທີ່ນີ້
- ຮູບແບບເມນູແບບພື້ນເມືອງພື້ນຖານທີ່ມີທ່ານຢູ່ທີ່ນີ້
ເມນູນໍາທາງແນວນອນ
ການສ້າງເມນູນໍາທິດແບບນອນແມ່ນມີຄວາມຫຍຸ້ງຍາກຫຼາຍກ່ວາເມນູນໍາທິດຕັ້ງຍ້ອນວ່າທ່ານຕ້ອງປອມແປງຄວາມຈິງທີ່ວ່າລາຍະການ HTML ມັກສະແດງແນວຕັ້ງ. ເຊັ່ນດຽວກັບເມນູນອນ, ທໍາອິດສ້າງ ບັນຊີລາຍການເມນູນໍາທິດ ຂອງທ່ານ:
ເພື່ອສ້າງເມນູນອນ, ເຮັດວຽກຄືກັນກັບທີ່ທ່ານເຮັດກັບເມນູແບບເລື່ອນ. ເລີ່ມຕົ້ນກັບພາຍນອກແລະເຮັດວຽກຢູ່. ເນື່ອງຈາກວ່າຂ້ອຍຕ້ອງການນໍາທິດຂອງຂ້ອຍທີ່ຈະເລີ່ມຕົ້ນໃນແຈເບື້ອງຊ້າຍ, ຂ້ອຍຕັ້ງມັນດ້ວຍຂອບຂອບແລະຊ້າຍ, ຂ້ອຍເລື່ອນໄປທາງຊ້າຍ. ນອກນັ້ນທ່ານຍັງຄວນຈະຢູ່ໃນນິໄສຂອງການຕັ້ງຄ່າຄວາມກວ້າງດັ່ງນັ້ນເມນູຂອງທ່ານບໍ່ໃຊ້ເວລາຫຼາຍກວ່າພື້ນທີ່ທີ່ທ່ານຕັ້ງໃຈ. ສໍາລັບເມນູນອນ, ນີ້ແມ່ນປົກກະຕິແລ້ວຄວາມກວ້າງຂອງການອອກແບບ. ຂ້າພະເຈົ້າຍັງໄດ້ເພີ່ມ ສີພື້ນຖານ ໃຫ້ບັນຊີທັງຫມົດເພື່ອເຮັດໃຫ້ມັນງ່າຍຕໍ່ການອ່ານ.
ul # navigation {
float: left
margin: 0
padding: 0
width: 100%
ພື້ນຫລັງສີ: # 039;
}
ແຕ່ຄວາມລັບກັບເມນູນໍາທິດທີ່ນອນຢູ່ໃນລາຍການລາຍການ. ລາຍການບັນຊີລາຍການແມ່ນປົກກະຕິແລ້ວຕັນອົງປະກອບ, ຊຶ່ງຫມາຍຄວາມວ່າພວກເຂົາຈະມີສາຍໃຫມ່ທີ່ວາງກ່ອນແລະຫຼັງຫນຶ່ງ. ໂດຍການປ່ຽນຈໍສະແດງຜົນຈາກບລັອກໄປສູ່ອິນເຕີເນັດ, ທ່ານບັງຄັບອົງປະກອບບັນຊີລາຍການທີ່ຈະຕິດຕາມຕໍ່ຫນຶ່ງໃນແນວນອນຕາມແນວນອນ.
ul # navigation li {display: inline }
ຂ້າພະເຈົ້າໄດ້ປະຕິບັດການເຊື່ອມຕໍ່ຢ່າງແນ່ນອນຄືຂ້າພະເຈົ້າໄດ້ຮັບການປິ່ນປົວໃຫ້ເຂົາເຈົ້າຢູ່ໃນເມນູນໍາທິດຕັ້ງ, ມີສີດຽວກັນແລະການຕົບແຕ່ງຂໍ້ຄວາມ. ຂ້າພະເຈົ້າໄດ້ເພີ່ມຊາຍແດນເທິງເພື່ອກໍານົດປຸ່ມຕ່າງໆໃນເວລາທີ່ພວກເຂົາຖືກກວາດ. ສິ່ງດຽວທີ່ຂ້າພະເຈົ້າຖອນອອກແມ່ນການສະແດງ: ຕັນ; ດັ່ງທີ່ຈະເຮັດໃຫ້ເສັ້ນໃຫມ່ລົງໃນແລະທໍາລາຍເມນູນອນ.
ul # navigation li a {
text-decoration: none
padding: 25em 1em
ດ້ານລຸ່ມ: ແຂງ 1px # 39f;
border-top: solid 1px # 39f
border-right: solid 1px # 39f
}
a: link, a: visited {color: #fff }
ul # navigation li a: hover {
ພື້ນຫລັງສີ: #fff;
ສີ: # 000;
}
ທ່ານຢູ່ທີ່ນີ້ຂໍ້ມູນສະຖານທີ່
ລັກສະນະອື່ນຂອງ HTML ແມ່ນການກໍານົດ youarehere. ຖ້າທ່ານຕ້ອງການປັບປຸງແກ້ໄຂເມນູຂອງທ່ານເພື່ອສະແດງຕໍາແຫນ່ງປະຈຸບັນຂອງຜູ້ໃຊ້ຂອງທ່ານ, ພຽງແຕ່ໃຊ້ ID ນີ້ເພື່ອກໍານົດສີພື້ນຖານອື່ນຫຼືແບບອື່ນໆ. ຍ້າຍເງື່ອນໄຂ ID ໃຫ້ກັບລາຍະການເມນູທີ່ຖືກຕ້ອງໃນຫນ້າອື່ນເພື່ອໃຫ້ຫນ້າປັດຈຸບັນຖືກເນັ້ນສະເຫມີ.
ul # navigation li # youarehere {background-color: # 09f; }
ຖ້າທ່ານໃສ່ຄໍເຕົ້າໄຂ່ເຫຼົ່ານີ້ຮ່ວມກັນຢູ່ໃນຫນ້າຂອງທ່ານ, ທ່ານສາມາດສ້າງແຖບເມນູແບບແນວນອນຫຼືແນວຕັ້ງທີ່ເຮັດວຽກກັບເວັບໄຊທ໌ຂອງທ່ານແຕ່ຈະລວດໄວທີ່ຈະດາວໂຫລດແລະງ່າຍຕໍ່ການປັບປຸງໃນອະນາຄົດ. ການນໍາໃຊ້ XHTML + CSS ປ່ຽນລາຍການຂອງທ່ານເຂົ້າໃນເຄື່ອງມືທີ່ມີປະສິດທິຜົນຫຼາຍສໍາລັບການອອກແບບ.
ຖ້າທ່ານຕ້ອງການຕົວຢ່າງຫຼາຍກວ່າເມນູນອນ, ໃຫ້ປຶກສາຕໍ່ໄປນີ້.
- A Styled Horizontal Menu
- ແມ່ແບບເມນູພື້ນຖານພື້ນຖານ
- ເມນູແນວນອນທີ່ມີຮູບແບບທີ່ມີທ່ານຢູ່ທີ່ນີ້
- ແມ່ແບບເມນູນອນພື້ນຖານທີ່ມີທ່ານຢູ່ທີ່ນີ້