01 of 06
ວິທີການສ້າງ Tabbed Navigation ກັບ CSS ແລະບໍ່ມີຮູບພາບ
ການນໍາໃຊ້ຫນ້າເວັບແມ່ນຮູບແບບຂອງບັນຊີ, ແລະການນໍາທິດທີ່ແທັບແມ່ນຄ້າຍຄືບັນຊີລາຍການທາງນອນ. ມັນເປັນເລື່ອງງ່າຍທີ່ຈະສ້າງການນໍາທິດທີ່ມີແຖວແບບແຖວທີ່ມີ CSS, ແຕ່ CSS 3 ເຮັດໃຫ້ພວກເຮົາມີເຄື່ອງມືຫຼາຍກວ່າເກົ່າເພື່ອເຮັດໃຫ້ພວກເຂົາເບິ່ງງາມ.
tutorial ນີ້ຈະນໍາທ່ານຜ່ານ HTML ແລະ CSS ທີ່ຈໍາເປັນເພື່ອສ້າງເມນູແຖບ CSS. ໃຫ້ຄລິກໃສ່ການເຊື່ອມຕໍ່ເພື່ອເບິ່ງວ່າມັນຈະເບິ່ງແນວໃດ.
ເມນູແຖບນີ້ ບໍ່ ໃຊ້ ຮູບພາບ , ພຽງແຕ່ HTML ແລະ CSS 2 ແລະ CSS 3. ມັນສາມາດໄດ້ຮັບການດັດແກ້ທີ່ງ່າຍດາຍເພື່ອເພີ່ມແທັກເພີ່ມເຕີມຫຼືປ່ຽນຂໍ້ຄວາມໃນພວກເຂົາ.
ສະຫນັບສະຫນູນຕົວທ່ອງເວັບ
ເມນູແຖບນີ້ຈະເຮັດວຽກໃນ ຕົວທ່ອງເວັບທີ່ສໍາຄັນທັງຫມົດ . ຕົວທ່ອງເວັບອິນເຕີເນັດຈະບໍ່ສະແດງມຸມມົນ, ແຕ່ຖ້າບໍ່ດັ່ງນັ້ນ, ມັນຈະສະແດງແຖບຄື Firefox, Safari, Opera ແລະ Chrome.
02 of 06
ຂຽນລາຍຊື່ບັນຊີລາຍຊື່ຂອງທ່ານ
ເມນູນໍາທິດທັງຫມົດແລະແຖບແມ່ນແທ້ພຽງແຕ່ເປັນບັນຊີລາຍຊື່ unordered. ດັ່ງນັ້ນ, ສິ່ງທໍາອິດທີ່ທ່ານຕ້ອງການເຮັດແມ່ນຂຽນລາຍຊື່ທີ່ບໍ່ມີການຄວບຄຸມໄປຫາບ່ອນທີ່ທ່ານຕ້ອງການການນໍາທາງທີ່ແທັບເລັດຂອງທ່ານໄປ.
tutorial ນີ້ແມ່ນສົມມຸດວ່າທ່ານກໍາລັງຂຽນ HTML ຂອງທ່ານໃນບັນນາທິການຂໍ້ຄວາມແລະທ່ານຮູ້ວ່າບ່ອນໃດທີ່ຈະໃສ່ HTML ສໍາລັບເມນູຂອງທ່ານຢູ່ຫນ້າເວັບຂອງທ່ານ.
ຂຽນບັນຊີລາຍຊື່ທີ່ບໍ່ມີອັນດັບຂອງທ່ານດັ່ງນີ້:
- class = "tablist">
- CSS 3
- id = "current"> Tabs
- ສໍາລັບ
- ເມນູ
ທ່ານຈະສັງເກດເຫັນວ່າລະຫັດດັ່ງກ່າວຮຽກຮ້ອງໃຫ້ສອງສິ່ງ: class = "tablist" ແລະ id = "current". ທໍາອິດແມ່ນ ຕ້ອງການ . ຖ້າທ່ານບໍ່ໃສ່ແຖບ tablist ໃນບັນຊີລາຍຊື່ທີ່ບໍ່ມີອັນດັບຂອງທ່ານ, ແທັບເລັດຈະບໍ່ເຮັດວຽກ. ທີສອງແມ່ນທາງເລືອກ. ໃສ່ id = "ປັດຈຸບັນ" ໃສ່ແທັບທີ່ທ່ານຕ້ອງການທີ່ຈະເນັ້ນໃສ່ຫນ້ານັ້ນ. ຂ້າພະເຈົ້າປົກກະຕິແລ້ວໃຊ້ນີ້ເພື່ອເນັ້ນໃສ່ຫນ້າທີ່ຂ້ອຍຢູ່, ແຕ່ທ່ານສາມາດໃຊ້ມັນເພື່ອເນັ້ນແທັກທີ່ສໍາຄັນທີ່ສຸດ. ຫຼືທ່ານສາມາດເອົາມັນຫມົດ.
03 of 06
ເລີ່ມການດັດແກ້ແຜ່ນສະໄຕຂອງທ່ານ
ທ່ານສາມາດນໍາໃຊ້ ເອກະສານສະໄຕພາຍນອກ ຫຼື ເອກະສານສະໄຕພາຍໃນ . ຫນ້າເມນູຕົວຢ່າງໃຊ້ແຜ່ນສະໄຕແບບພາຍໃນ
ຂອງເອກະສານ.ຫນ້າທໍາອິດພວກເຮົາຈະສະໄຕ UL ຕົວເອງ
ນີ້ແມ່ນບ່ອນທີ່ພວກເຮົາໃຊ້ tablist ຫ້ອງຮຽນ. ໃນ HTML. ແທນທີ່ຈະສ້າງຮູບແບບໂຄ້ດ UL ເຊິ່ງຈະສະແດງລາຍະການທີ່ບໍ່ມີການຈັດອັນດັບທັງຫມົດໃນຫນ້າຂອງທ່ານ, ທ່ານຄວນຈະເປັນແບບ UL ເທົ່ານັ້ນ. tablist ດັ່ງນັ້ນການເຂົ້າທໍາອິດໃນ CSS ຂອງທ່ານຄວນຈະ:
tablist {}ຂ້າພະເຈົ້າມັກຈະເອົາໃຈໃສ່ໃນແຖບຜ້າເຊັດປາຍ (}) ກ່ອນເວລາ, ດັ່ງນັ້ນຂ້ອຍບໍ່ລືມມັນຕໍ່ມາ.
ໃນຂະນະທີ່ພວກເຮົາກໍາລັງໃຊ້ແທັບລາຍະການທີ່ບໍ່ມີການສັ່ງຈອງສໍາລັບບັນຊີລາຍຊື່ເມນູແທັບແທັກ, ແຕ່ພວກເຮົາບໍ່ຕ້ອງການປືນຫຼືຕົວເລກທີ່ເລືອເຂົ້າໄປ. ດັ່ງນັ້ນແບບທໍາອິດທີ່ທ່ານຄວນເພີ່ມແມ່ນ. list-style: none; ນີ້ບອກຕົວທ່ອງເວັບວ່າໃນຂະນະທີ່ມັນເປັນບັນຊີ, ມັນເປັນບັນຊີທີ່ບໍ່ມີຮູບແບບທີ່ກໍານົດໄວ້ກ່ອນ (ເຊັ່ນ: ລູກປືນຫລືຕົວເລກ).
ຫຼັງຈາກນັ້ນ, ທ່ານສາມາດກໍານົດລະດັບຄວາມສູງຂອງບັນຊີຂອງທ່ານໃຫ້ກົງກັບພື້ນທີ່ທີ່ທ່ານຕ້ອງການ. ຂ້າພະເຈົ້າເລືອກ 2em ສໍາລັບຄວາມສູງຂອງຂ້າພະເຈົ້າ, ຍ້ອນວ່າມັນແມ່ນສອງຂະຫນາດຕົວອັກສອນມາດຕະຖານ, ແລະໃຫ້ເຄິ່ງຫນຶ່ງຂອງເອື້ອຍຢູ່ຂ້າງເທິງແລະຂ້າງລຸ່ມຂໍ້ຄວາມຂອງແຖບ. height: 2em ແຕ່ທ່ານສາມາດກໍານົດຄວາມກວ້າງຂອງທ່ານໃຫ້ກັບຂະຫນາດທີ່ທ່ານຕ້ອງການ. ປ້າຍ UL ຈະອັດຕະໂນມັດໃຊ້ເວລາ 100% ຂອງຄວາມກວ້າງ, ດັ່ງນັ້ນເວັ້ນເສຍແຕ່ວ່າທ່ານຕ້ອງການມັນນ້ອຍກວ່າຖາດປະຈຸບັນ, ທ່ານສາມາດປ່ອຍ width.
ສຸດທ້າຍ, ຖ້າຫາກວ່າ ເອກະສານແບບແມ່ບົດ ຂອງທ່ານບໍ່ມີການຕັ້ງຄ່າສໍາລັບແທັບ UL ແລະ OL, ທ່ານກໍ່ຕ້ອງການໃສ່ໄວ້. ນີ້ຫມາຍຄວາມວ່າທ່ານຄວນປິດຂອບ, ຂອບ, ແລະແປ້ນພິມໃນ UL ຂອງທ່ານ. padding: 0 margin: 0 border: none ຖ້າທ່ານໄດ້ຕັ້ງແທໍກ UL ແລ້ວ, ທ່ານສາມາດປ່ຽນຂອບໃບລຽບ, ຂອບຫຼືຂອບກັບສິ່ງທີ່ເຫມາະສົມກັບການອອກແບບຂອງທ່ານ.
ຫ້ອງຮຽນຂອງທ່ານສຸດທ້າຍຄວນເບິ່ງຄືວ່ານີ້:
tablist {list-style: none; height: 2em padding: 0 margin: 0 border: none }04 of 06
ການດັດແກ້ລາຍການລາຍການ LI
ເມື່ອທ່ານປະກາດບັນດາລາຍຊື່ທີ່ບໍ່ມີອັນດັບຂອງທ່ານ, ທ່ານຈໍາເປັນຕ້ອງໄດ້ໃສ່ຊື່ LI ໄວ້ໃນມັນ. ຖ້າບໍ່ດັ່ງນັ້ນ, ພວກເຂົາຈະປະຕິບັດຕາມບັນຊີມາດຕະຖານແລະຍ້າຍແຕ່ລະເສັ້ນຕໍ່ໄປໂດຍບໍ່ຕ້ອງໃສ່ແທັບຂອງທ່ານຢ່າງຖືກຕ້ອງ.
ທໍາອິດ, ສ້າງຊັບສິນແບບຂອງທ່ານ:
tablist li {}ຫຼັງຈາກນັ້ນ, ທ່ານຕ້ອງການທີ່ຈະເລື່ອນໃສ່ແທັບຂອງທ່ານເພື່ອວ່າພວກເຂົາຈະຕິດຕັ້ງຢູ່ເທິງຍົນແນວນອນ. float: left
ແລະຢ່າລືມເພີ່ມຂອບຂອບບາງລະຫວ່າງແທັບ, ດັ່ງນັ້ນພວກເຂົາບໍ່ເຂົ້າກັນ. margin-right: 013em
ຮູບແບບຂອງທ່ານຄວນເບິ່ງຄື:
tablist li {float: left margin-right: 013em }05 of 06
ການສ້າງ Tabs ຄ້າຍຄືກັບ Tabs ດ້ວຍ CSS 3
ການເຮັດສ່ວນໃຫຍ່ຂອງການຍົກລະດັບຫນັກໃນເອກະສານສະໄຕນີ້, ຂ້າພະເຈົ້າກໍາລັງວາງເປົ້າຫມາຍການເຊື່ອມຕໍ່ພາຍໃນບັນຊີລາຍຊື່ທີ່ບໍ່ໄດ້ສັ່ງຊື້. ຕົວທ່ອງເວັບຮັບຮູ້ວ່າການເຊື່ອມຕໍ່ເຮັດຫຼາຍຂື້ນໃນຫນ້າເວັບກ່ວາແທັບອື່ນ, ດັ່ງນັ້ນມັນຈຶ່ງງ່າຍທີ່ຈະໄດ້ຮັບຕົວທ່ອງເວັບທີ່ມີອາຍຸຫລາຍຂຶ້ນເພື່ອປະຕິບັດຕາມສິ່ງທີ່ສະຖານະການຫມຸນຖ້າທ່ານຕິດພວກເຂົາກັບແທັບມໍເຕີ (ລິ້ງ). ສະນັ້ນທໍາອິດຂຽນຄຸນລັກສະນະແບບຂອງທ່ານ:
tablist li a {} tablist li a: hover {}ເນື່ອງຈາກວ່າແທັບເຫຼົ່ານີ້ຄວນປະຕິບັດຄືກັບແທັບໃນແອັບພລິເຄຊັນ, ທ່ານຕ້ອງການພື້ນທີ່ທັງຫມົດຂອງແທັບທີ່ສາມາດກົດໄດ້, ບໍ່ແມ່ນຂໍ້ຄວາມທີ່ເຊື່ອມໂຍງເທົ່ານັ້ນ. ເພື່ອເຮັດສິ່ງນີ້, ທ່ານຕ້ອງໄດ້ປ່ຽນໂຄ້ດ A ຈາກມັນເປັນປະກະຕິ " inline " ລັດລົງໃນ ອົງປະກອບຕັນ . display: block (ຖ້າທ່ານມີຄວາມສົນໃຈໃນການຮູ້ເພີ່ມເຕີມກ່ຽວກັບຄວາມແຕກຕ່າງ, ອ່ານ Block-Level vs. Inline Elements .)
ຫຼັງຈາກນັ້ນ, ວິທີທີ່ງ່າຍທີ່ຈະບັງຄັບໃຫ້ແທັບຂອງທ່ານສົມທຽບກັບຄົນອື່ນ, ແຕ່ຍັງມີຄວາມກະທັດຮັດທີ່ເຫມາະສົມກັບຄວາມກວ້າງຂອງຂໍ້ຄວາມແມ່ນເພື່ອເຮັດໃຫ້ການໃສ່ແຜ່ນກັນດ້ານຂວາແລະຊ້າຍຄືກັນ. ຂ້າພະເຈົ້າໄດ້ນໍາໃຊ້ຄຸນສົມບັດການຂຽນແປ້ນພິມເພື່ອຕັ້ງຄ່າດ້ານເທິງແລະດ້ານລຸ່ມເປັນ 0 ແລະຂວາແລະຊ້າຍເພື່ອ 1em. padding: 0 1em
ຂ້າພະເຈົ້າຍັງໄດ້ເລືອກເອົາການເຊື່ອມຕໍ່ underlines, ດັ່ງນັ້ນແຖບເບິ່ງຫນ້ອຍເຊັ່ນ: ການເຊື່ອມຕໍ່. ແຕ່ຖ້າຫາກວ່າຜູ້ຊົມຂອງທ່ານອາດຈະສັບສົນໂດຍນັ້ນ, ອອກຈາກເສັ້ນນີ້. ການເຊື່ອມຕໍ່ - ການອອກແບບ: none;
ໂດຍການໃສ່ຂອບບາງໆປະມານແຖບ, ມັນເຮັດໃຫ້ພວກເຂົາເບິ່ງຄືກັບກ່ອງ. ຂ້າພະເຈົ້າໄດ້ນໍາໃຊ້ຊັບສິນຂອງຕົວອັກສອນຊາຍແດນເພື່ອເຮັດໃຫ້ຊາຍແດນປະມານທັງສີ່ດ້ານ: 006em solid # 000; ແລະຫຼັງຈາກນັ້ນນໍາໃຊ້ຄຸນສົມບັດ ຊາຍແດນ - ດ້ານລຸ່ມ ເພື່ອເອົາມັນອອກຈາກທາງລຸ່ມ. border-bottom: 0;
ຫຼັງຈາກນັ້ນ, ຂ້າພະເຈົ້າໄດ້ປັບປຸງບາງຢ່າງໃຫ້ກັບສີ, ສີແລະສີພື້ນຖານຂອງແທັບ. ຕັ້ງຄ່າເຫລົ່ານີ້ໄປຍັງຄໍເຕົ້າໄຂ່ທີ່ກົງກັບເວັບໄຊຂອງທ່ານ. font: bold 088em / 2em arial, geneva, helvetica, sans-serif ສີ: # 000; ພື້ນຫລັງສີ: #ccc;
ທັງຫມົດຂອງຄໍເຕົ້າໄຂ່ທີ່ຢູ່ຂ້າງເທິງຄວນຈະເຂົ້າໄປໃນຕົວເລືອກ. ຕາຕະລາງ li, ກົດເພື່ອໃຫ້ພວກເຂົາມີຜົນກະທົບແທັກມໍ. ໂດຍທົ່ວໄປ. ຫຼັງຈາກນັ້ນ, ເພື່ອເຮັດໃຫ້ແທັບປາກົດຂຶ້ນຫຼາຍ, ທ່ານຄວນເພີ່ມກົດລະບຽບຂອງລັດບາງ .tablist li a: hover.
ຂ້ອຍຢາກປ່ຽນສີຂອງຂໍ້ຄວາມແລະພື້ນຫລັງເພື່ອເຮັດໃຫ້ແຖບປາກົດຂື້ນເມື່ອທ່ານເມົາມັນ. ພື້ນຫລັງ: # 3cf; color: #fff
ແລະຂ້າພະເຈົ້າລວມເອົາເຕືອນອື່ນໃຫ້ກັບຕົວທ່ອງເວັບທີ່ຂ້ອຍຕ້ອງການເຊື່ອມຕໍ່ຍັງບໍ່ໄດ້ເນັ້ນຫນັກ. text-decoration: none ວິທີການທົ່ວໄປອີກຢ່າງຫນຶ່ງແມ່ນເພື່ອເຮັດໃຫ້ການເນັ້ນຫນັກກັບຄືນໄປບ່ອນໃນເວລາທີ່ທ່ານຫນູເຫນືອແຖບ. ຖ້າທ່ານຕ້ອງການທີ່ຈະເຮັດແນວນັ້ນ, ໃຫ້ປ່ຽນມັນເຂົ້າໄປໃນບົດເລື່ອງ - ການຕົບແຕ່ງ: ເນັ້ນໃສ່;
ແຕ່ CSS 3 ຢູ່ໃສ?
ຖ້າທ່ານໄດ້ຮັບການເອົາໃຈໃສ່, ທ່ານອາດຈະສັງເກດເຫັນວ່າບໍ່ມີຄໍເຕົ້າໄຂ່ CSS 3 ໃດທີ່ໃຊ້ໃນເອກະສານສະໄຕ. ນີ້ມີປະໂຫຍດຈາກການເຮັດວຽກໃນຕົວທ່ອງເວັບທີ່ທັນສະໄຫມທັງຫມົດ, ລວມທັງ Internet Explorer. ແຕ່ມັນບໍ່ໄດ້ເຮັດໃຫ້ແທັບເບິ່ງຄືວ່າມີຫຍັງຫຼາຍກວ່າກ່ອງສີ່ຫລ່ຽມ. ໂດຍການເພີ່ມແບບ CSS 3 ຕາມຂອບເຂດຊາຍແດນ (ແລະມັນແມ່ນການເຊື່ອມຕໍ່ຂອງຕົວທ່ອງເວັບທີ່ກ່ຽວຂ້ອງ) ທ່ານສາມາດເຮັດໃຫ້ເສັ້ນຂອບຮອບ, ເບິ່ງຄືກັບກ່ອງໃນໂຟນເດີ manila.
ຄໍເຕົ້າໄຂ່ທີ່ທ່ານຄວນຈະເພີ່ມເຂົ້າໄປໃນຕາຕະລາງບັນຊີ: -webkit-border-top-right-radius: 0.50em; -webkit-border-top-left radius: 050em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 050em; border-top-right-radius: 050em; border-top-left-radius: 050em;
ເຫຼົ່ານີ້ແມ່ນກົດລະບຽບແບບສຸດທ້າຍທີ່ຂ້າພະເຈົ້າຂຽນວ່າ:
tablist li a {display: block padding: 0 1em text-decoration: none border: 006em solid # 000 border-bottom: 0; font: bold 088em / 2em arial, geneva, helvetica, sans-serif ສີ: # 000; ພື້ນຫລັງສີ: #ccc; / * CSS 3 elements * / webkit-border-top-right-radius: 050em -webkit-border-top-left radius: 050em; -moz-border-radius-topright: 0.50em; -moz-border-radius-topleft: 050em; border-top-right-radius: 050em; border-top-left-radius: 050em; } tablist li a: hover {background: # 3cf color: #fff text-decoration: none }ມີຄໍເຕົ້າໄຂ່ເຫຼົ່ານີ້, ທ່ານມີເມນູທີ່ແທັບທີ່ເຮັດວຽກຢູ່ໃນຕົວທ່ອງເວັບທີ່ສໍາຄັນທັງຫມົດແລະເບິ່ງຄືວ່າແຖບພິມງາມໃນ CSS 3 ທີ່ສອດຄ່ອງກັບຕົວທ່ອງເວັບ. ຫນ້າຕໍ່ໄປເຮັດໃຫ້ທ່ານມີທາງເລືອກຫນຶ່ງທີ່ທ່ານສາມາດໃຊ້ໃນການແຕ່ງຕົວໄດ້ຫຼາຍຂຶ້ນ.
06 of 06
ເນັ້ນແທໍບປັດຈຸບັນ
ໃນ HTML ທີ່ຂ້ອຍສ້າງ, UL ມີອົງປະກອບລາຍຊື່ຫນຶ່ງທີ່ມີ ID. ນີ້ອະນຸຍາດໃຫ້ທ່ານໃຫ້ຫນຶ່ງ LI ເປັນແບບທີ່ແຕກຕ່າງກັນຈາກສ່ວນທີ່ເຫຼືອ. ສະຖານະການທົ່ວໄປທີ່ສຸດແມ່ນການເຮັດໃຫ້ແຖບປະຈຸບັນໂດດເດັ່ນໃນທາງໃດທາງຫນຶ່ງ. ອີກວິທີທີ່ຈະຄິດເຖິງເລື່ອງນີ້ແມ່ນວ່າທ່ານຕ້ອງການສີຂີ້ເຖົ່າອອກແຖບທີ່ບໍ່ມີຊີວິດຢູ່. ຫຼັງຈາກນັ້ນທ່ານປ່ຽນບ່ອນທີ່ id ຢູ່ໃນຫນ້າທີ່ແຕກຕ່າງກັນ.
ຂ້າພະເຈົ້າສະໄຕທັງສອງແທັບແທໍກເຊັ່ນດຽວກັບ #current A: hover sta ເພື່ອໃຫ້ທັງສອງມີຄວາມແຕກຕ່າງກັນເລັກນ້ອຍ. ທ່ານສາມາດປ່ຽນສີ, ສີພື້ນຫລັງ, ເຖິງແມ່ນວ່າຄວາມສູງ, ຄວາມກວ້າງແລະການເຄືອບຂອງອົງປະກອບນັ້ນ. ເຮັດໃຫ້ການປ່ຽນແປງທີ່ມີຄວາມຫມາຍໃນການອອກແບບຂອງທ່ານ.
tablist li # current a {background-color: # 777; color: #fff } tablist li # current a: hover {background: # 39C }ແລະທ່ານກໍາລັງເຮັດ! ທ່ານໄດ້ສ້າງເມນູແຖບສໍາລັບເວັບໄຊທ໌ຂອງທ່ານ.