Nangtung menu CSS: ngalakonan eta diri

Sababaraha webmasters teu hayang méakkeun waktu ngembang ti elemen basajan scratch nu geus aya. Aranjeunna yakin yén euweuh titik di wasting waktu anjeun kana hal nu geus lila di dinya. Kanyataanna, pikeun jalma anu ngan mastering HTML jeung CSS, hal anu penting sangkan diri loba hal pikeun boga pamahaman alus gawé maranéhanana. Ieu lumaku pikeun menu nu. Jieun ménu CSS nangtung. Ieu bakal dumasar ukur kana HTML jeung CSS, tanpa ngagunakeun Javascript na JQuery. Unggal menu nyaéta daptar tumbu anu ngakibatkeun Kaca loka éta.

léngkah dasar

Nyieun basajan menu nangtung CSS, Anjeun kudu léngkah di handap ieu:

1. Kahiji, nangtukeun daptar tumbu (maké kode HTML), di antarana menu nu bakal. Masihan aranjeunna ngaran, contona, nyaéta kieu:

1. Imah.
2. sajarah urang.
3. Pituduh.
4. Jasa.
5. Kontak.

2. Lajeng styling Tumbu sakumaha hayang kalayan bantuan CSS.

Simkuring nulis kode HTML, tetep dina file my_Vmenu.html tur tingal kumaha éta bakal kasampak di browser nu:

Ieu anu jadi dadasar (rorongkong) tina menu urang. # 1, # 2, jsb kudu diganti ku rujukan. Tempo kumaha eta Sigana di browser nu. Gambar anjeun moal resep. Ayeuna kami kudu ngawitan nerangkeun unsur gaya, sangkan hiji lengkep ménu CSS nangtung.

pedaran gaya

Jieun my_Vmenu.css file, nu diatur sagalana rék ngaronjatkeun penampilan unsur sapertos penting loka. Di handap ieu kode, bubuka nu bakal ngarevitalisasi nu ménu CSS nangtung. Eta tur nulis file anyar, lajeng urang gé butuh hiji langkung caket harti tina garis utama nu dibikeun.

Lengkep pedaran dipaké stylesheet

Ayeuna mertimbangkeun wincik menu nangtung CSS kami:

Daptar-gaya-tipe ngidinan Anjeun ngaleupaskeun daptar spidol. Ku netepkeun "0" kana margin na padding nyabut padding tambahan dina daptar. Salaku bisa ditempo tina kode HTML, menu urang nyaeta daftar, sarta gaya anu tangtu make CSS.

ul # my_Vmenu - gaya sakabéh sakabéh daptar.

ul # my_Vmenu li a - gaya Tumbu antara tag li.

ul # my_Vmenu li a: hover - pedaran tina tipe ditaliti barang menu dina waktu nalika salah hovers leuwih jalma.

ul # my_Vmenu li bentang hiji - pedaran téks (menu judulna).

Inget yen file my_Vmenu.css my_Vmenu.html sarta kudu dilestarikan dina diréktori sarua. Sanajan kitu, aranjeunna bisa jadi ayana dina polder béda, tapi lajeng hal anu penting pikeun ngadaptar di jalur file my_Vmenu.html mun my_Vmenu.css. Kudu ati, sabab pendatang pikeun masalah ieu mindeng.

Gaya kudu disambungkeun antara tag sirah dina html-file. menu_1.png na menu_2.png - ieu téh gambar pikeun item menu gambar dina kaayaan normal jeung hover.

Éta leuwih alus pikeun ngahemat gambar dina folder misah pikeun Gambar, ngaran eta my_images, tapi lajeng Saluyukeun kode CSS. Tulis mana gambar ieu ditembrakkeun, aranjeunna dina diréktori ieu: url (my_images / menu_1.png) jeung url (my_images / menu_2.png).

Dina sesa sipat digambarkeun dina kode CSS, ngartos gampang. Aranjeunna nangtukeun penampilan menu urang. Ieu gampang keur bewara yén lebar tur jangkungna item dieusian pikeun barang sarua dina kaayaan normal, sarta mun anjeun hover beurit leuwih aranjeunna. Ukuran Font 18px, padding hususna dina indentation ti sisi béda tina ngaran tempat. tampilan ngidinan Anjeun ngeset Unit tampilan pikeun ngeset lebar tur padding.

menu nangtung urang

Salaku bisa ningali, éta ménu CSS nangtung pikeun nyieun gampang. Dina dasar data pangaweruh anjeun bakal bisa nyieun geulis tur pikaresepeun pikeun datang ka situs web anjeun! Paké imajinasi anjeun, lajeng hiji menu stylish mun pelengkap situs anjeun.