Bagaimana kode sebuah menu Tumpang Tindih Utama Tabbed

Blog kami

Tulisan, Berbagi Pengetahuan, Berita, Tutorial

Sebagai web developer, apa yang Anda menikmati coding yang paling?
- xHTML
- PHP
- CSS
- Javascript (Termasuk perpustakaan seperti jQuery, Moo Peralatan dll)
- Lain
Lihat Hasil
Loading ...

How to Code an Overlapping Tabbed Main Menu

Bagaimana kode sebuah menu Tumpang Tindih Utama Tabbed

14 Oktober 2009 - Dengan Sumeet

Main menu navigasi adalah bagian dari sebuah desain website yang membuat seluruh situs terlihat hidup dan lengkap. Namun jenis yang paling umum dari gaya menu navigasi masih banyak digunakan adalah menu navigasi tab. Berikut ini adalah tutorial tentang bagaimana kode menu tab tumpang tindih.

Hidup Demo Unduh

Ada berbagai gaya dan teknik untuk menciptakan menu navigasi tab dan salah satunya adalah overlay tab atau gaya tumpang tindih di mana setiap tab tampaknya berbohong atas yang lain dan karenanya memberikan menu keseluruhan merasa sangat realistis. Sementara merancang situs saya, saya pergi melalui banyak inspirasi dan tutorial. Salah satunya adalah tutorial ini disebut Photoshop Tekstur Kertas dari Gores kemudian Buat Web Desain Grunge dengan itu! Ditulis oleh Collis dari NetTuts.com Collis ini akhirnya menjadi inspirasi utama untuk situs saya dan ketika sedang memeriksa tutorial saya temukan mengatakan bahwa:

"Sekarang jika saya mengatakannya sendiri tab ini terlihat mengagumkan, dan alasan mereka adalah karena mereka tumpang tindih. Sayangnya ini juga membuat mereka sulit untuk bekerja dengan dalam HTML. Namun Anda dapat melakukan berbagai hal dengan PNGs transparan, atau bergantian hanya membuat warna teks perubahan rollovers dan tidak khawatir tentang mengubah warna tab. Bagaimanapun ini adalah semua sedikit di luar cakupan tutorial ini. Cukuplah untuk mengatakan menu mungkin sedikit rumit untuk membangun. "

Jadi saya mencoba coding satu ke html dan setelah aku berhasil memikirkan berbagi dengan Anda semua.

Langkah 1.Gearing Up

Jadi sebelum memulai untuk kode jenis navigasi tab ke html / css kode, pertama Anda harus belajar bagaimana untuk membuat satu di photoshop pertama. Tutorial di atas sangat rinci dan Collis melakukan pekerjaan yang besar dalam mengajarkan bagaimana membangun seperti menu pada photoshop. Aku telah membangun satu sederhana khusus untuk tutorial ini.

Sekarang mari saya menentukan bahwa ada tiga negara dari keadaan tidak aktif tab.The adalah kelabu dalam warna, negara aktif dalam biru dan keadaan melayang-layang adalah baja warna biru muda. Oleh karena itu, daripada mengiris tiga gambar untuk setiap tab, kita bisa mengiris keluar sprite gambar.

Langkah 2. Mengiris Tabs Dari PSD

Sejajarkan tab secara vertikal menggunakan grid seperti yang ditunjukkan pada gambar di atas. Anda juga dapat meluruskan tab horizontal bukan vertikal tetapi kemudian latar belakang CSS posisi gambar akan diakses dengan cara yang berbeda. Pilihan tergantung pada orang ke orang tapi keduanya bekerja dengan sempurna. Sementara cropping gambar mengikuti petunjuk dengan benar dan mencatat bahwa saya telah membuat latar belakang transparan karena kita akan membutuhkan latar belakang transparan jika kita butuh untuk di overlap tab. Memotong gambar dan simpan untuk web di PNG24 format. Satu hal lagi yang perlu diperhatikan saat mengiris sampai gambar adalah bahwa tab pertama yaitu tab 'Home' seharusnya tidak memiliki bayangan apapun pada tepi kiri dalam keadaan tidak aktif. Oleh karena itu, untuk itu tab tertentu kita harus membuat sprite lain tanpa bayangan di dalamnya.

Langkah 3. Kode Jauh

Sekarang mengiris kami selesai dan kami memiliki semua gambar yang diperlukan kita bisa mulai coding bar navigasi kita. Hanya untuk membuat contoh tampilan yang baik, saya telah membangun sebuah sampel menampilkan tata letak isi daerah dengan panel navigasi tumpang tindih. Tata letak keseluruhan terlihat seperti ini:

 <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http :/ / www.w3.org/1999/xhtml "> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <link href =" css / styles.css "rel =" stylesheet "type =" text / css "/> </ head> <body> <div id="page-wrap"> <ul id="main-nav"> <li class =" saat ini "> <a href="index.html"> Depan </ a> </ li> <li class="portfolio"> <a href="portfolio.html"> Portofolio </ a> </ li> < li class = "Layanan"> <a href="services.html"> Layanan </ a> </ li> <li class="about"> href="about.html"> <a Tentang Kami </ a> </ li> <li class="contact"> <a href="contact.html"> Kontak </ a> </ li> </ ul> <div class="clear"> </ div> <div id = "fitur"> <div id="featured-content"> </ div> </ div> </ div> </ body> </ html>

Mari kita melihat menu navigasi utama kami. Saya sudah menggunakan daftar unordered sederhana karena setiap bar navigasi lainnya dan ditata dengan menggunakan gambar latar belakang untuk tag hyperlink daftar itu.

 <ul id="main-nav">
	 <li class="current"> <a href="index.html"> Depan </ a> </ li>
	 <li class="portfolio"> <a href="portfolio.html"> Portofolio </ a> </ li>
	 <li class="services"> <a href="services.html"> Layanan </ a> </ li>
	 <li class="about"> href="about.html"> <a Tentang Kami </ a> </ li>
	 <li class="contact"> <a href="contact.html"> Kontak </ a> </ li>
 </ Ul>

 ul # main-nav li {
	 float: left;
	 position: relative;
	 display: inline;
 }

Ingat bahwa kita menggunakan sprite gambar untuk tab di mana tab yang paling atas merupakan keadaan aktif, tengah mewakili keadaan tidak aktif dan bagian bawah mewakili negara hover. Oleh karena itu, kita akan menggunakan properti 'latar belakang-posisi' untuk benar menempatkan gambar ke negara masing-masing sebagai berikut:

 ul # main-nav li a {
	 position: relative;
	 width: 110px;
	 height: 29px;
	 display: block;
	 background-image: url ('/ images / tabs.png..');
	 background-position: center center;
	 color: # 44403b;
	 text-decoration: none;
	 font-size: 14px;
	 padding-top: 12px;
	 text-align: kiri;
	 padding-left: 30px;
	 font-weight: bold;
 }
 ul # main-nav li.home a {
	 background-image: url ('/ images / tab-home.png..');
 }
 ul # main-nav li.current a {
	 background-position: top;
	 color: # ffffff;
 }
 ul # main-nav li a: hover {
	 background-position: bawah;
	 color: # ffffff;
 }
 ul # main-nav li.current a: hover {
	 background-position: top; / * Untuk Mencegah tab saat ini dari perubahan warna di hover * /
	 color: # ffffff;
 }

Anda akan melihat bahwa Aku telah memberikan kelas yang relevan dengan masing-masing elemen list dan sebuah kelas bernama 'sekarang' ke tab yang untuk halaman saat ini. Hal ini dilakukan sehingga saya dapat menetapkan berbeda z-indeks nilai untuk setiap tab dalam urutan menaik sehingga setiap tab terletak pada sumbu z lebih tinggi dari tab mengikutinya. Tab dengan 'sekarang' kelas akan terletak di urutan tertinggi dari sumbu z-karena merupakan halaman yang sedang dan akan selalu tetap di atas terlepas dari itu posisi dalam daftar. Sebelum menerapkan z-indeks nilai, memastikan bahwa posisi atribut untuk elemen daftar diatur ke relatif. Tanpa nilai positioning properti z-indeks tidak akan bekerja sama sekali.

 ul # main-nav {li.current
	 z-index: 100;
 }
 ul # main-nav {li.home
	 z-index: 100;
 }
 ul # main-nav {li.portfolio
	 z-index: 99;
 }
 ul # main-nav {li.services
	 z-index: 98;
 }
 ul # main-nav {li.about
	 z-index: 97;
 }
 ul # main-nav {li.contact
	 z-index: 96;
 }

Meskipun kami telah ditugaskan berbeda z-index nilai ke tab, mereka masih tidak muncul di dibelitkan dan akan terlihat seperti ini:

Untuk memberikan sentuhan akhir pada panel navigasi kita, kita harus mendorong setiap tab di atas yang lain. Kami telah diberi z-index nilai dalam urutan dari kiri ke kanan. Oleh karena itu, kita hanya akan mendorong setiap tab dimulai dari kanan ke sekitar 20px ke kiri dengan menambahkan 'margin-left' negatif properti ke 'ul # main-nav li' dan mendorong bar navigasi seluruh unordered list ke kiri oleh menambahkan 20px positif 'margin-left' untuk meniadakan gerakan bangsal kiri bar.

 ul # main-nav {
	 margin-left: 20px;
 }
 ul # main-nav li {
	 float: left;
	 position: relative;
	 margin-left:-20px;
	 display: inline;
 }

Misi Capai

Setelah perakitan semua css dan xhtml bersama-sama, kita akan memiliki menu navigasi tumpang tindih tab utama kami siap untuk digunakan. Ini adalah mengambil saya tentang cara untuk membuat jenis menu dan yakin ada cara yang lebih baik banyak melakukan hal yang sama. Saya akan senang jika Anda dapat berbagi cara lain untuk melakukan hal ini atau hanya membahas beberapa perbaikan prosedur ini sendiri.
Berikut adalah beberapa situs yang menggunakan lebih dari tab lapping sebagai menu navigasi utama mereka:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Tags: CSS , bagaimana , menu , navigasi , lebih dibelitkan

Tulisan lain yang mungkin Anda sukai

48 Responses

FAQPAL
17 Oktober 2009 pada 3:18 am
Sangat baik tutorial dan ditulis dengan baik. Terima kasih untuk berbagi.
Menjawab
- Sumeet Chawla
  17 Oktober 2009 di 10:01 am
  Terima Kasih Pliggs .. Itu adalah kehormatan untuk menulis tutorial di FaqPal terlalu
Polprav
17 Oktober 2009 di 20:54
Halo dari Rusia!
Dapatkah saya mengutip tulisan di blog Anda dengan link ke Anda?
Menjawab
- Sumeet Chawla
  18 Oktober 2009 jam 12:21 am
  Hei Hi Dari India! Anda ingin mengutip tulisan dari blog seperti dalam? mengutip sebuah kalimat tertentu, frase atau apa?
Rakesh
20 Oktober 2009 jam 12:55 am
tutorial yang bagus .... sangat membantu!
Menjawab
knoli
25 Oktober 2009 di 17:45
Saya ingin membuat aplikasi untuk Apple Iphone dan Ipod Touch. Semua jenis aplikasi tetapi saya tidak tahu bagaimana untuk memulai dan di mana untuk memulai dari seseorang dapat memberikan bantuan
Menjawab
knoli
November 21, 2009 pada 3:49 am
Saya tertarik untuk belajar bagaimana program untuk iPhone. Apa yang akan menjadi bahasa Windows yang paling mirip dengan bahasa pemrograman iPhone. Saya ingin menulis untuk kedua mesin Windows dan iPhone tanpa harus kembali belajar sebuah bahasa pemrograman keseluruhan.
________________
[Url = http://unlockiphone22.com/] unlock iphone [/ url]
Menjawab
- Sumeet Chawla
  November 21, 2009 di 7:42 am
  baik, jika Anda mendapatkan memahamkan dari bahasa C maka Anda dapat kode dalam bahasa pemrograman. C adalah seperti ibu dari semua bahasa pemrograman.
Santosh Pingale
22 Desember 2009 di 02:18
Ingin tahu situs web 2, buku ATAU lain hal yang saya harus gunakan untuk merancang sebuah website dari Adobe Photoshop ...... Thank u di muka .. plz mail saya jika u bisa ..: D
Menjawab
- Sumeet Chawla
  23 Desember 2009 pada 11:28 am
  dengan baik, sumber daya terbaik untuk belajar desain adalah internet. Ini akan diperbarui setiap menit dengan tren terbaru dan tutorial.
  berikut adalah beberapa link untuk Anda mulai dengan
  http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/
  http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/
  Anda harus memiliki keterampilan dasar-dasar penggunaan photoshop. Pada akhirnya apa yang sebenarnya penting adalah tingkat kreativitas yang Anda miliki.
LeGars
14 Januari 2010 di 15:07
Hai, bolehkah aku mengatakan bahwa walaupun ini merupakan menu menarik, Anda tidak harus memiliki tab halaman yang aktif sebagai link. Ini UX dan aksesibilitas besar tidak-tidak.
Menjawab
- Sumeet Chawla
  14 Januari 2010 di 03:13
  Halo,
  Bagian mana yang Anda maksud? Saya memiliki kelas halaman saat ini pada elemen list dan bukan elemen link.
Dekan
26 Januari 2010 pada 4:13 am
Saya tidak dapat membuat fitur: s
Tidak tahu bagaimana
Bisakah Anda membantu saya
Dia bahkan tidak mengambil irisan saya keluar itu png24
Aku tidak begitu baik dengan css dan saya benar-benar ingin menu ini tumpang tindih
Saya hanya menggunakan 2 gambar dan memberikan nama yang sama seperti yang Anda lakukan
tetapi tidak bekerja
Gambar saya adalah sedikit lebih rendah tetapi lil lagi
Bisakah Anda membantu saya?
Dapatkah Anda membuatnya untuk saya silahkan?
Menjawab
Dekan
30 Januari 2010 pada jam 2:12 am
Ok, jadi sekarang saya sedang membuat situs di flash
Tapi tetap masalah dengan navigasi
bagaimana saya memberikan mouse ke link + aktif di depan?
Menjawab
- Sumeet Chawla
  8 Februari 2010 di 10:39 am
  Hei hai, Maaf, saya tidak punya banyak pengalaman dengan Flash. Tapi jika Anda mengikuti tutorial baik dan kudis z-indeks nilai dengan benar juga. Saya kira Anda tidak akan memiliki masalah ...
Morishita
25 Maret 2010 di 12:55
Wonerful! Saya suka bagaimana blog ini selalu diperbarui dengan content.I segar membuat tiga teman saya berlangganan btw, lol
Menjawab
carl
3 Juni 2010 pada 05:44
bagaimana Anda men-download
itu loop abadi
Menjawab
- Sumeet
  3 Juni 2010 pada 23:54
  Maaf atas ketidaknyamanan yang ditimbulkan. Tapi Anda bisa mendownloadnya setelah mengklik tombol download. Jika Anda tidak ingin berlangganan, cukup tutup jendela pop up dan download akan dimulai.
  Umpan balik selalu menyambut
Tom Kristen
12 Juni 2010 pada 5:47 am
Terima kasih banyak. Aku akan menyerah coding navigasi dari tutorial desain aslinya. Ini banyak membantu saya!
Menjawab
- Sumeet
  12 Juni 2010 pada 9:57 am
  Senang bahwa saya bisa membantu Tom
John Smith
19 Oktober 2010 di 06:33
Contoh bekerja dengan baik dan benar-benar luar biasa mencari.
Namun, tidak bekerja dengan baik di IE6 sebagai file ping (. Png)
dukungan tidak ada. Apakah ada yang punya solusi untuk IE6 yang
bekerja dengan contoh ini?
Menjawab
Lucas
25 Oktober 2010 pada 6:11 am
Besar, saya benar-benar seperti jenis menu, saya menambahkan ke situs web saya
http://www.ajaxshake.com
terima kasih
Lucas terakhir blog .. efek 3D Pseudo murni dengan Css
Menjawab
Phoenix
20 Januari 2011 pada 1:19 am
Heya. Tutorial mengagumkan. Aku baru saja menciptakan sebuah blog. Masih dalam merancang negara. Saya benar-benar ingin menggunakan hal ini.
Tapi aku agak kecanduan bertingkat menu drop-down. Apakah mungkin untuk memodifikasi kode ini? Sehingga menu dropdown bertingkat dapat dicapai?
Thanx dan salam.
Phoenix last blog .. tetapi sekali lagi-tidak itu postingan
Menjawab
- Sumeet
  26 Januari 2011 di 23:40
  Yup, Anda dapat dengan mudah memodifikasi untuk menambahkan menu multi level. Carilah tutorial menu multi level di luar sana. Pada dasarnya, unsur li akan memiliki elemen ul bersama dengan hyperlink. Unsur ul akan bertindak sebagai sub menu (drop down menu)
Malcolm Hoye
6 Mei 2011 jam 12:19 am
Hanya ingin memberikan teriakan dari lembah informasi, matahari besar. Lebih dihargai.
Menjawab
Tara
10 Juli 2011 di 23:49
Aku hanya datang di ini dari Smashing Magazine. Terima kasih atas tutorial ini besar.
Menjawab
Pete
20 Juli 2011 di 02:38
apa yang Anda pikirkan adalah jumlah maksimum tab menu yang saya dapat menempatkan di bagian atas website saya - saya benar-benar ingin memiliki 13 - adalah bahwa untuk banyak?
Menjawab
Jwel
3 Januari 2012 di 18:34
Tutorial Suppppppppppper .... Terima kasih banyak ............
Menjawab