Menu | Codepal

Posts Tagged 'menu'

Bagaimana Kode yang Tumpang Tindih menu Utama Tabbed

Rabu, 14 Oktober, 2009

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 Desain Web kumuh dengan itu! Ditulis oleh Collis dari NetTuts.com ini akhirnya menjadi inspirasi utama untuk situs saya dan sementara akan melalui tutorial saya menemukan Collis mengatakan bahwa:

"Sekarang jika saya sendiri yang mengatakannya tab ini terlihat mengagumkan, dan alasan yang mereka lakukan 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 dalam rollovers dan tidak khawatir tentang mengubah warna tab. Bagaimanapun semua ini 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 mulai kode ini semacam 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 mengajar bagaimana membangun semacam menu di photoshop. Aku telah membangun satu satu yang sederhana khusus untuk tutorial ini.

Sekarang mari saya menentukan bahwa ada tiga negara dari keadaan tidak aktif tab.The adalah dalam warna keabu-abuan, negara aktif biru dan negara hover adalah baja warna cahaya biru. Karenanya, daripada mengiris tiga gambar untuk setiap tab, kita dapat mengiris keluar sprite gambar.

Langkah 2. Mengiris Tabs Dari PSD

Sejajarkan tab vertikal menggunakan grid seperti yang ditunjukkan pada gambar di atas. Anda juga dapat menyelaraskan tab horizontal bukan vertikal tetapi kemudian latar belakang CSS posisi gambar akan diakses dengan cara yang berbeda. Pilihan tergantung pada orang ke orang tetapi keduanya bekerja dengan sempurna. Sementara cropping gambar mengikuti pedoman benar dan perhatikan bahwa saya telah membuat latar belakang transparan karena kita akan membutuhkan latar belakang transparan jika kita butuh untuk di overlap tab. Memotong gambar dan menyimpannya untuk web dalam format yang PNG24. 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 spesifik kita harus membuat sprite lain tanpa bayangan di dalamnya.

Langkah 3. Kode Jauh

Sekarang kita selesai mengiris dan kami memiliki semua gambar yang diperlukan kita dapat memulai bar coding navigasi kami. Hanya untuk membuat contoh tampilan yang baik, saya telah membangun fitur tata letak sampel area konten dengan bar 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 "> <meta content="text/html; <head> 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"> Beranda </ a> </ li> <li class="portfolio"> <a href="portfolio.html"> Portofolio </ a> </ li> < li class = "jasa"> <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 lihat di menu navigasi utama kami. Saya telah menggunakan daftar unordered sederhana seperti 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"> <a href="about.html"> 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 mewakili keadaan aktif, tengah mewakili keadaan tidak aktif dan bagian bawah mewakili negara hover. Oleh karena itu, kita akan menggunakan properti "background-position 'dengan benar tempat gambar ke negara masing-masing sebagai berikut:

 ul # main-nav li a {
	 position: relative;
	 width: 110px;
	 tinggi: 29px;
	 display: block;
	 background-image: url ('../ gambar / 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 suatu {
	 background-image: url ('../ gambar / tab-home.png ');
 }
 ul # main-nav li.current suatu {
	 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 untuk setiap elemen list dan kelas bernama 'saat ini' ke tab yang untuk halaman saat ini. Hal ini dilakukan sehingga saya dapat menetapkan berbeda z-index nilai-nilai untuk setiap tab dalam urutan menaik sehingga setiap tab terletak pada sumbu z-lebih tinggi dari tab berikut ini. Tab dengan 'sekarang' kelas akan berada di urutan tertinggi dari sumbu z-karena merupakan halaman saat ini dan akan selalu tetap di atas terlepas dari posisi itu dalam daftar. Sebelum menerapkan nilai-nilai z-indeks, pastikan bahwa atribut posisi 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 menetapkan berbagai z-index nilai ke tab, mereka masih tidak muncul di dibelitkan dan akan terlihat seperti ini:

Untuk memberikan sentuhan akhir pada bar navigasi kita, kita harus mendorong setiap tab di atas yang lain. Kami telah diberi nilai z-index dalam urutan dari kiri ke kanan. Oleh karena itu, kami hanya akan mendorong setiap tab dimulai dari kanan ke sekitar 20px ke kiri dengan menambahkan 'margin-left' negatif properti untuk 'ul # main-nav li' dan mendorong bar navigasi seluruh daftar unordered ke kiri oleh menambahkan "margin-left 'sebuah 20px positif 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 saya yakin ada banyak cara yang lebih baik untuk melakukan hal yang sama. Saya akan senang jika Anda dapat berbagi cara lain untuk melakukan ini atau hanya membahas beberapa perbaikan prosedur ini sendiri.
Berikut adalah beberapa situs yang menggunakan lebih dari menjilat tab sebagai menu navigasi utama mereka:
ILove2Design.at
HiddenDepth.ie
HotCards.com