Pandhuan langkah-langkah sithik
Apa menu pandhu arah sampeyan minangka horisontal antarane ndhuwur utawa baris vertikal mudhun sisih, iku isih mung dhaftar. Nalika ngrancang pandhu arah web, asring gampang lali menawa menu navigasi mung klompok pranala sing mulyakaké. Nanging yen program navigasi sampeyan nggunakake XHTML + CSS, sampeyan bisa nggawe menu sing cilik kanggo diundhuh (XHTML) lan gampang kanggo ngatur (CSS).
Miwiti
Kanggo miwiti ngrancang dhaptar navigasi, sampeyan kudu nggunakake dhaptar.
Bisa dadi daftar tanpa wates standar sing wis ditemtokake minangka pandhu arah:
Yen sampeyan katon rapet ing HTML, sampeyan bakal sok dong mirsani sing link "Ngarep" uga duwe ID saka sampeyan. Iki bakal ngidini sampeyan nggawe menu sing ngenali lokasi sing saiki kanggo para nonton. Sanajan sampeyan ora nemtokake manawa jinis visual ing situs sampeyan saiki, sampeyan bisa nyakup informasi kasebut. Yen sampeyan milih kanggo nambahake ing ngisor iki, sampeyan bakal duwe kurang kodhe kanggo nyiapake situs sampeyan.
Tanpa pola CSS , menu XHTML iki katon kaya daftar tanpa standar. Ana peluru lan item dhaptar rada indented. Amarga aku nggunakake pranala placeholder , akeh browser ora bakal nampilake pranala minangka clickable (digaris ngisor lan biru). Yen sampeyan nempelake HTML ing ndhuwur menyang kaca Web, pandhu arah bakal katon kaya iki:
- Ngarep
- Produk
- Layanan
- Hubungi Kami
Iki cukup mboseni lan ora katon kaya menu. Nanging kanthi sawetara gaya CSS sing ditambahake ing dhaptar, sampeyan bisa nggawe menu sing ndadekake sampeyan bangga.
Menu Pandhu Arah vertikal
Menu navigasi vertikal gampang banget kanggo nulis amarga nuduhake cara sing padha karo dhaptar normal: munggah lan mudhun.
Item dhaptar katon vertikal mudhun kaca.
Nalika aku menu menu, aku seneng miwiti ing njaba lan nggarap. Mangkene, aku tegese aku gaya pisanan ing navigasi # lan banjur pindhah menyang elemen lan banjur pranala, etc. Dadi kanggo menu iki, pisanan sampeyan nemtokake jembaré menu kasebut. Iki bakal mesthekake yen sanajan item menu dawa, ora bakal nyithak tata letak liyane utawa nyebabake nggulung kanthi horisontal.
ul # navigasi {width: 12em; }
Sawise aku wis entuk jembar, aku bisa muter karo item dhaptar. Iki ngidini kula nyetel barang kaya (kanggo nyingkiraké peluru), werna latar mburi, wates, alignment teks, lan bathi.
ul # pandhu arah li {
gaya-gaya: none;
werna latar mburi: # 039;
border-top: solid 1px # 039;
teks-align: left;
margin: 0;
}
Sawise sampeyan wis nyetel dhasar kanggo dhaptar item sampeyan bisa miwiti muter carane menu katon ing area pranala. Gaya pisanan pandhu arah UL # LI A banjur tautan A: link, A: dibukak, A: hover, lan A: aktif (yen sampeyan pengin). Kanggo tautan, aku seneng nggawe pranala minangka unsur blok (tinimbang standar ing baris). Iki bisa digunakake kanggo njupuk kabeh ruang saka LI - lan padha tumindak kaya paragraf, kang ndadekake gampang dadi gaya minangka tombol menu. Perkara liyane sing aku tansah mbusak nggaris ngisor (text-decoration: none;), amarga iki ndadekake tombol katon kaya tombol kanggo kula.
Nanging mesthine, desain sampeyan bisa beda.
ul # pandhu arah li a {
tampilan: blok;
teks-dekorasi: ora ana;
padding: .25em;
border-bottom: solid 1px # 39f;
border-right: solid 1px # 39f;
}
Wara-wara karo tampilan: blok; disetel ing tautan, kabeh kothak menu item bisa diklik, ora mung huruf. Iki uga apik kanggo migunani. Priksa manawa kanggo ngatur werna link (pranala, dibukak, hover, lan aktif) yen sampeyan pengin dadi beda saka standar biru, abang lan ungu.
a: pranala, sing: dibukak {color: #fff; }
a: hover, a: active {color: # 000; }
Aku uga seneng menehi hover state luwih akeh kanthi ngganti werna latar mburi.
a: hover {background-color: #fff; }
Yen luwih seneng conto menu vertikal, golek dhaptar ing ngisor iki.
- Menu Vertikal Gaya
- Cithakan Menu Vertikal Dasar
- Menu Vertikal Gaya karo Sampeyan Punika
- A Cithakan Menu Vertikal Dasar karo Sampeyan Punika
Menu Pandhu Arah Horisontal
Nggawe menu pandhu arah horisontal rada angel tinimbang menu navigasi vertikal amarga sampeyan kudu ngimbangi kasunyatan yen dhaptar HTML luwih seneng nampilake vertikal. Minangka karo menu horisontal, pisanan nggawe dhaptar menu navigasi :
Kanggo nggawe menu horisontal, bisa uga padha karo menu vertikal. Mulai karo njaba lan nggarap. Awit aku pengin navigasi kanggo miwiti ing pojok kiwa, aku nyetel karo 0 kiwa kiwa lan padding, lan aku ngambang ing kiwa. Sampeyan uga kudu njaluk ing kebiasaan ngowahi jembar supaya menu sampeyan ora njupuk luwih utawa kurang spasi saka maksud sampeyan. Kanggo menu horisontal, iki biasane kaya jembar desain. Aku uga nambah werna latar ing kabeh daftar supaya luwih gampang diwaca.
ul # navigation {
ngambang: kiwa;
margin: 0;
padding: 0;
jembar: 100%;
werna latar mburi: # 039;
}
Nanging rahasia menyang menu pandhu arah horisontal ana ing daftar item. Item dhaptar biasane mblokir unsur, sing artine dheweke bakal duwe garis anyar sing dilebokake sadurunge lan sawise saben. Kanthi ngalih tampilan saka pemblokiran dadi inline, sampeyan bisa meksa elemen dhaptar kanggo mbandhingake siji liyane kanthi horisontal.
ul # pandhu arah li {display: inline; }
Aku dianggep minangka persis kaya aku diolah ing menu navigasi vertikal, kanthi werna lan dekorasi teks sing padha. Aku nambahake wates ndhuwur kanggo nudingake tombol-tombol kasebut nalika ditindakake. Ing bab mung aku sing dibusak yaiku tampilan: blok; kaya sing bakal nggawe garis anyar maneh lan ngancurake menu horisontal.
ul # pandhu arah li a {
teks-dekorasi: ora ana;
padding: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: solid 1px # 39f;
border-right: solid 1px # 39f;
}
a: pranala, sing: dibukak {color: #fff; }
ul # pandhu arah, golèk {hover {
werna latar mburi: #fff;
werna: # 000;
}
Sampeyan Informasi Lokasi Lokasi
Aspèk HTML liyane yaiku pengenal sing bisa dideleng. Yen sampeyan pengin ngowahi menu kanggo nuduhaké lokasi sing saiki sampeyan pangguna, mung gunakake ID iki kanggo netepake werna latar mburi sing beda utawa gaya liyane. Pindhah atribut ID menyang item menu sing bener ing kaca liya supaya kaca saiki tansah disorot.
ul # navigasi li # youarehere a {background-color: # 09f; }
Yen sampeyan nganggo gaya iki bebarengan ing kaca, sampeyan bisa nggawe bar menu horisontal utawa vertikal sing bisa digunakake karo situs sampeyan, nanging cepet kanggo diundhuh lan gampang dianyari ing mangsa ngarep. Nggunakake XHTML + CSS dadi dhaptar sampeyan dadi alat sing kuat banget kanggo desain.
Yen sampeyan pengin luwih akeh conto menu horisontal, takon ing ngisor iki.
- Menu Horisontal Gaya
- Cithakan Dasar Horisontal Dasar
- Menu Horisontal Gaya karo Sampeyan Punika
- A Basic Menu Horizontal Template karo Sampeyan Punika