Hiji pituduh hambalan-demi-hambalan
Naha menu navigasi Anjeun nyaéta Baris horizontal peuntas luhur atawa sakaligus nangtung handap sisi, éta kénéh ngan daptar. Nalika ngarancang navigasi web, éta mindeng gampang poho yén hiji menu navigasi téh ngan grup Maha Agung ngeunaan Tumbu. Tapi lamun program navigasi anjeun ngagunakeun XHTML + CSS, Anjeun bisa nyieun hiji menu nu mangrupa leutik pikeun ngundeur (nu XHTML) jeung gampang pikeun ngaropea (CSS di).
Ngamimitian
Ngamimitian ngarancang daptar pikeun navigasi, anjeun kudu make daptar.
Eta meureun daptar unordered standar anu geus diidentifikasi minangka navigasi éta:
Lamun kasampak raket dina HTML, Anjeun bakal aya bewara yén tumbu "Imah" ogé boga hiji ID of youarehere. Ieu bakal ngidinan Anjeun pikeun nyieun hiji menu nu nangtukeun lokasi ayeuna keur pamiarsa Anjeun. Malah lamun teu rencanana on ngabogaan yén jenis cue visual dina situs anjeun ayeuna, anjeun tiasa ngawengku informasi éta. Lamun mutuskeun pikeun nambahkeun cue nu engké, anjeun bakal kudu kirang coding nyiapkeun situs anjeun.
Tanpa CSS styling , menu XHTML ieu Sigana mah daptar unordered baku. Aya pélor sarta item daftar anu rada indented. Kusabab Kuring keur ngagunakeun tumbu placeholder , paling panyungsi moal mintonkeun Tumbu sakumaha clickable (underlined na di bulao). Lamun nempelkeun dina HTML luhur kana kaca Wéb, navigasi anjeun bakal kasampak kawas kieu:
- imah
- produk
- jasa
- Taros Kami
Ieu geulis boring na teu kasampak loba kawas menu. Tapi kalayan ngan sababaraha gaya CSS ditambahkeun kana daptar, Anjeun bisa nyieun hiji menu nu ngajadikeun anjeun bangga.
Nangtung Napigasi Menu
A menu navigasi nangtung pisan gampang nulis sabab mintonkeun dina cara nu sarua salaku daptar normal: luhur jeung ka handap.
Daptar barang nembongkeun vertikal ka handap kaca.
Nalika Abdi ménu styling, abdi resep pikeun ngamimitian dina luar jeung karya dina. Ku ieu, Maksad abdi mah gaya munggaran nu ul # navigasi lajeng mindahkeun kana elemen li lajeng dina tumbu, jsb Jadi keur menu ieu, mimiti anjeun nangtukeun lebar menu nu. Ieu bakal mastikeun yén sanajan item menu nu lila, maranéhna moal nyorong sesa perenah nu leuwih atawa ngakibatkeun ngagulung horisontal.
ul # navigasi {lebar: 12em; }
Sakali aya saena lebar set, abdi tiasa maén kalawan daptar item. Hal ieu ngamungkinkeun kuring pikeun ngeset hal kawas (meunang leupas tina pélor), kelir kasang tukang, wates, alignment téks, jeung margins.
ul # navigasi li {
Daptar-gaya: taya;
tukang-warna: # 039;
Wates-luhur: padet 1px # 039;
téks-align: ditinggalkeun;
margin: 0;
}
Sakali anjeun geus nyetel dasar pikeun daptar item anjeun bisa mimiti muterkeun kalawan carana menu nu Sigana di wewengkon Tumbu. gaya munggaran nu UL # navigasi Li A lajeng ka A: link, A: dilongok, A: hover, sarta A: aktif (lamun hoyong aranjeunna). Pikeun tumbu, abdi resep nyieun tumbu unsur block (tinimbang standar di-garis). Ieu Angkatan aranjeunna nyandak nepi sakabéh spasi tina Li -and aranjeunna meta deui kawas ayat, nu ngajadikeun éta gampang gaya salaku menu buttons.The hal sejenna mah sok sugan aya dipiceun ngagurat di handapna teh (téks-hiasan: taya;), sakumaha ieu ngajadikeun tombol kasampak leuwih kawas tombol ka kuring.
Tapi tangtu, design Anjeun bisa jadi béda.
ul # navigasi li a {
tampilan: block;
téks-hiasan: taya;
padding: .25em;
Wates-handap: padet 1px # 39f;
Wates-katuhu: padet 1px # 39f;
}
Bewara nu mibanda tampilan nu: block; Nyetél dina tumbu, sakabéh kotak tina item menu nyaeta clickable, teu ngan éta hurup. Ieu ogé alus keur usability. Pastikeun pikeun nyetél éta kelir link (tumbu, dilongok, hover sarta aktif) upami anjeun hoyong aranjeunna janten béda ti bulao standar, beureum sarta wungu.
a: link, a: dilongok {warna: #fff; }
a: hover, a: aktif {warna: # 000; }
Kuring ogé resep méré kaayaan hover bit leuwih perhatian ku cara ngarobah warna latar.
a: hover {tukang-warna: #fff; }
Lamun remen conto deui tina ménu nangtung, konsultasi daftar di handap.
- A Menu Styled nangtung
- A Menu Dasar nangtung Citakan
- A Menu Styled nangtung kalawan Anjeun Dupi dieu
- A Menu Dasar nangtung Citakan kalawan Anjeun Dupi dieu
Horizontal Napigasi Menu
Nyieun ménu navigasi horizontal nu rada leuwih hese tibatan ménu navigasi nangtung sabab kudu offset kanyataan yén béréndélan HTML resep pikeun nembongkeun vertikal. Salaku kalayan menu horizontal, mimiti nyieun anjeun daftar menu navigasi :
Nyieun menu horizontal, dianggo sami anjeun tuh kalayan menu nangtung. Mimitian kalayan luar jeung digawé di. Kusabab Abdi hoyong navigasi kuring ngamimitian di belah kénca juru, abdi diatur deui ku 0 ditinggalkeun margin na padding, sarta kuring ngambang ka kénca. Anjeun oge kedah meunang dina watek netepkeun lebar supados menu Anjeun teu nyandak up leuwih atawa kurang spasi ti maneh maksudna. Pikeun ménu horizontal, ieu téh biasana lebar pinuh ku rarancang. Kuring ogé ditambahkeun warna latar ka sakabéh daptar sangkan leuwih gampang maca.
ul # navigasi {
ngambang: kénca;
margin: 0;
padding: 0;
lebar: 100%;
tukang-warna: # 039;
}
Tapi rusiah menu navigasi horizontal aya dina daftar item. Item Daptar kasebar normal meungpeuk elemen, nu hartina maranéhna bakal boga newline ditempatkeun saméméh jeung sanggeus unggal salah. Ku ngaganti tampilan ti blok kana inline, Anjeun maksakeun unsur daftar kana baris nepi gigireun karana horisontal.
ul # navigasi li {tampilan: inline; }
Kuring dirawat di Tumbu persis kawas kuring dirawat aranjeunna dina menu navigasi nangtung, jeung kelir sarua jeung hiasan téks. Kuring ditambahkeun wates luhur ka delineate tombol basa aranjeunna keur hovered leuwih. Hiji-hijina hal I dikaluarkeun éta tampilan nu: block; sakumaha anu bakal nempatkeun ka newlines deui di sarta ngancurkeun menu horizontal.
ul # navigasi li a {
téks-hiasan: taya;
padding: 1em .25em;
Wates-handap: padet 1px # 39f;
Wates-luhur: padet 1px # 39f;
Wates-katuhu: padet 1px # 39f;
}
a: link, a: dilongok {warna: #fff; }
ul # navigasi li a: hover {
tukang-warna: #fff;
Warna: # 000;
}
Anjeun Dupi dieu lokasi Émbaran
aspék séjén tina HTML teh identifier youarehere. Mun rék ngarobah menu Anjeun pikeun nandaan lokasi kiwari pamaké anjeun, saukur make ID ieu nangtukeun warna latar béda atawa gaya lianna. Mindahkeun ID anu atribut ka item menu nu bener dina kaca séjén ambéh kaca ayeuna sok disorot.
ul # navigasi li # youarehere a {tukang-warna: # 09f; }
Lamun nempatkeun gaya ieu babarengan dina kaca, anjeun bisa nyieun hiji menu bar horizontal atawa vertikal anu hade jeung situs anjeun tapi mangrupa rusuh pikeun ngundeur tur pisan gampang pikeun ngapdet kapayunna. Ngagunakeun XHTML + CSS kabukti béréndélan anjeun kana alat anu pohara kuat pikeun desain.
Lamun remen conto deui tina ménu horizontal, konsultasi handap.
- A Styled horisontal Menu
- A Menu Citakan Dasar horisontal
- A Menu horisontal Styled kalawan Anjeun Dupi dieu
- A Menu Dasar horisontal Citakan kalawan Anjeun Dupi dieu