Bizim blog

Yazılar, Bilgi Paylaşımı, Haberler, Tutorials

Bir web geliştiricisi olarak, ne en kodlama oluşur?
- xHTML
- PHP
- CSS
- Javascript (jQuery gibi kütüphaneleri içerir, Moo Araçlar vb)
- Diğer
Sonuçları Görüntüle
Yükleniyor ...

Kod nasıl bir Örtüşen Sekmeli Ana Menü

Ekim 14th, 2009 - Sumeet By

Ana navigasyon menüsü tüm sitenin kılan bir web sitesi tasarımı o parçasıdır canlı ve eksiksiz bak. Ancak navigasyon menüsü stilin en yaygın türü hala çok kullanılan sekmeli navigasyon menüsü olacaktır. Burada nasıl bir örtüşen sekmeli menü kodu için öğretici olduğunu.

Live Demo İndir

Çeşitli stilleri ve bir sekmeli gezinme menüsü oluşturma ve bunlardan biri teknikleri vardır sekmeli overlaying veya her sekme diğerinden ve yalan olması dolayısıyla tüm menü bir çok gerçekçi hissediyorum veren görünür örtüşen stili. Süre sitemde tasarlarken, ben ilham ve öğreticiler çok geçti. Bunlardan biri bu eğitimin kazıyıp sonra onu bir grungy Web Tasarım oluşturun Photoshop Kağıt Doku denir! Collis tarafından NetTuts.com Bu kadar sitemin ana ilham olmanın sona erdi yazılı ve süre geçiyor öğretici Ben Collis söyleyerek bulundu vardı ki:

Çünkü örtüşme "Şimdi ben bunu, ben bu sekmeleri awesome bakmak ve yaptıkları nedeni demek. Ne yazık ki bu da onlarla HTML çalışmak için daha zor hale getirir. Bununla birlikte sadece rollover ve metin renkleri değiştirin yapamaz hakkında sekmesi renk değiştirme endişe şeffaf PNGs veya dönüşümlü olan bir çok şey yapabilirsiniz. Her neyse bu bu yazının kapsamı dışında tüm bir parçasıdır. Menü biraz inşa etmek zor olabilir söylemek yeterli. "

Bu yüzden içine bir kodlama denedim ve html Hepinize ile paylaşan düşündüm başardıktan sonra.

Up 1.Gearing Adım

Daha önce html / css koduna bir sekmeli kullan bu tür kodu başlamadan önce nasıl ilk photoshop oluşturmak öğrenmek gerekir. Öğretici üzerinde çok ayrıntılı ve Collis photoshop nasıl böyle bir menü oluşturmak için öğretme işini iyi yapıyor. Ben özellikle bu eğitimin için basit bir inşa var.

Şimdi beni orada tab.The etkin olmayan devletin üç ülke olduğunu belirlemek izin rengi grimsi, etkin devlet derin ve hover devlettir hafif çelik mavi renk mavi olmasıdır. Bu nedenle, yerine her sekme için üç resimleri dilimleme daha, bir resim sprite dışarı dilim olabilir.

Adım 2. PSD Gönderen Sekmeler Dilimleme

Sekmeleri dikey olarak ızgaraları kullanarak hizalayın yukarıdaki resimde gösterilmektedir. Ayrıca yatay yerine dikey olarak daha ama sonra CSS arka plan görüntü konumu farklı bir şekilde erişilebilir olacak sekmeleri hizalayabilirsiniz. Seçim Doğum kişiden kişiye ancak her iki çalışma mükemmel bağlıdır. Sırasında görüntü düzgün yönergeleri takip kırpma ve not eğer sekmeleri örtüşme gerekir çünkü şeffaf bir arka plan ihtiyacı olacak ki arka plan şeffaf yaptık. Bitki Resim ve PNG24 formatında web için kaydedin. Süre resimleri dilimleme Bir nokta daha belirtmek gerekir ki ilk sekmesi inaktif durumda sol kenarında herhangi bir gölge sahip olmamalıdır 'Ana' sekmesini IE. Böylece, içinde gölgeler olmadan başka bir sprite oluşturmak zorunda belirli sekme için.

Adım 3. Kod Away

Artık bizim dilimleme eksiksiz ve tüm görüntüleri biz kullan barkodlama başlayabilirsiniz ihtiyaç var. Sadece örnek yapmak için iyi bir örnek inşa ettim göz örtüşen navigasyon çubuğu ile içerik alanı düzeni özellikli. Bütün düzen şuna benzer:

 <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "=" http> <html xmlns http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd : / / "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 =" "Geçerli> <a href="index.html"> Anasayfa </ a> </ li> <li class="portfolio"> <a href="portfolio.html"> Portföy </ a> </ li> < li class = "hizmetler"> <a href="services.html"> Hizmetler </ a> </ li> <li class="about"> <a href="about.html"> Hakkımızda </ a> </ li> <li class="contact"> <a href="contact.html"> İletişim </ a> </ li> </ ul> <div class="clear"> </ div> <div id = "özellikli> <div id="featured-content"> </ div> </ div> </ div> </ body> </ html>

Ana navigasyon menüsü bakalım. Ben başka bir gezinme çubuğu olarak basit bir Rakamsız liste kullanmış ve bu liste köprü etiketi için bir arka plan görüntüsü kullanarak tarz.

 <ul id="main-nav">
	 <li class="current"> <a href="index.html"> Anasayfa </ a> </ li>
	 <li class="portfolio"> <a href="portfolio.html"> Portföy </ a> </ li>
	 <li class="services"> <a href="services.html"> Hizmetler </ a> </ li>
	 <li class="about"> <a href="about.html"> Hakkımızda </ a> </ li>
	 <li class="contact"> <a href="contact.html"> İletişim </ a> </ li>
 </ ul>

 ul # main-nav li (
	 float: left;
	 position: relative;
	 display: inline;
 )

Ki içinde en üst sekmesini aktif devleti temsil sekmeleri için bir görüntü sprite kullanıyorsanız Unutmayın, orta ve etkin olmayan devlet temsil alt hover devleti temsil eder. Böylece, düzgün kendi devlet olarak görüntü yerleştirmek için background-position 'özelliğini kullanacağız aşağıdaki gibidir:

 ul # main-nav li a (
	 position: relative;
	 width: 110px;
	 height: 29px;
	 display: block;
	 background-image: url ('../ Görüntüleri / 'tabs.png);
	 background-position: center center;
	 color: # 44403b;
	 text-decoration: none;
	 font-size: 14px;
	 padding-top: 12px;
	 text-align: left;
	 padding-left: 30px;
	 font-weight: bold;
 )
 # main-nav li.home ul a (
	 background-image: url ('../ images / sekmeyle 'home.png);
 )
 # main-nav li.current ul a (
	 background-position: top;
	 color: # ffffff;
 )
 ul # main-nav li a: hover (
	 background-position: bottom;
	 color: # ffffff;
 )
 ul # main-nav li.current a: hover (
	 background-position: top; / * hover * Doğum renk değiştirmesini Şu sekmesini önlemek için
	 color: # ffffff;
 )

O Her listenin elemanları ve bir sınıf 'adlı alakalı bir sınıf verdik fark edeceksiniz' da geçerli sayfa için sekmesine mevcut. Bu ki ben atayabilirsiniz yapılır farklı z-artan sırayla indeksi değerleri her sekmesine gibi her sekmenin daha yüksek bir z sekmesini daha ekseni it at şu yatıyor. Çünkü ve geçerli sayfa temsil her zaman en üstte bakılmaksızın bu listede pozisyonu kalacak mevcut 'z-eksenin en yüksek sipariş de sınıf' ile sekmesi alır. Z-index değerleri, bu liste öğesi için konum özelliği göreceli olarak ayarlandığından emin olun uygulamadan önce. Z-index özelliğini hiç çalışmaz herhangi bir konumlandırma değeri olmadan.

 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;
 )

Bile farklı z-sekmelere indeksi değerleri, hâlâ gömülmüş üzerinde ve görünmez şöyle görünecek atanan var:

Bizim navigasyon bar rötuşları vermek için, üst üste her sekme itmek gerekir. Biz atamış z-soldan sağa doğru azalan düzende indeksi değerleri. Bu nedenle, sadece her sekmenin sağ yaklaşık 20px için başlangıç zorlayacak bir 'negatif marjı ekleyerek' 'ul # main-nav li' mülk sol ve sol tarafından Rakamsız liste bütün navigasyon çubuğu itin sol yanında kendi olumlu bir 20px 'margin ekleyerek' çubuğunun sol koğuşta hareket iptali için bıraktı.

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

Mission accomplished

Birlikte tüm css ve xhtml montaj sonra, kullanmak için örtüşen sekmeli ana navigasyon menüsü hazır olacaktır. Bu nasıl bir menü bu tür oluşturmak ve eminim orada aynı şeyi birçok iyi yolu vardır almak benim oldu. Eğer bu veya sadece bu prosedür kendisine bazı gelişmeler ele yapmanın başka bir yolu payı olabilir ben memnun edecektir.
Buradan hangi ana navigasyon menüsü olarak sekmeleri alıştırma üzerinden kullanmak bazı site şunlardır:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Etiketler: CSS, menü, navigasyon nasıl, için, yere gömülmüş

Bu giriş Çarşamba, Ekim, 2009 1:09 14th ve yayınlanmıştır blog altında yayımlandı, Tutorials. Sen 2.0 beslemesi ile bu giriş için herhangi bir yanıt takip edebilirsiniz. Bu site kendi gelen bir tepki veya önceki terk edebilirsiniz .

Yanıt

FAQPAL
Ekim 17
Ve öğretici iyi yazılmış Mükemmel. Thanks for share.

[Cevap]
Sumeet Chawla cevabı:
Ekim 17 2009 10:01 am
Pliggs .. Thank You It FaqPal de çok öğretici göndermek için bir onur oldu
[Cevap]
Polprav

Ekim 17
Hello from Russia!
Ben blogunuzda size bağlantısı olan bir alıntı miyim?
[Cevap]
Sumeet Chawla cevabı:
Ekim 18. 2009 12:21 am
Hey merhaba Türkiye Gönderen! Sen de günlüğü bir alıntı mı istiyorsun? Belirli bir cümle, öbek veya teklif ne?
[Cevap]
Rakesh
Ekim 20
tutorial! nice .... gerçekten yararlı
[Cevap]
knoli
Ekim 25
Ben Apple iPhone ve iPod Touch için uygulama yapmak istiyorum. Uygulamalar her türlü ama i dont bilmek nasıl ve nerede başlatmak için biri bana yardım verebilir başlamak

[Cevap]
kopfkribbeln webdesign-»Überlappendes AMAÇ günlüğü
Ekim 29
[...] Lässt. Eine sehr häufiger Art der Web-Navigasyon ist das Sekme-Navigasyon-Menü. Hier ist ein Eğitimi wie man ein überlappendes AMAÇ [...]
knoli
Kasım 21
Ben iPhone için nasıl programının öğrenme ilgileniyorum. Ne Windows dil en yakın iPhone programlama dili benzer olacaktır. Ben hem Windows makineleri ve iPhone'lar için yeniden kalmadan yazmak isterseniz-bütün bir programlama dili öğrenmek.
________________
[url = http://unlockiphone22.com/] iphone [/ url kilidini]
[Cevap]
Sumeet Chawla cevabı:
21 Kasım 2009 7:42 am
Eğer, dil C sonra herhangi bir programlama dilinde kod olabilir askıda olsun. C tüm programlama dillerinin annesi gibi.
[Cevap]
Santosh Pingale
Aralık 22
2 bilmek istiyorum hangi siteyi, ben Adobe Photoshop bir web sitesi tasarımı ... ... thank u peşin .. plz posta beni eğer u olabilir ..: D kullanmanız gereken başka şeyler ya da kitap
[Cevap]
Sumeet Chawla cevabı:
23 Aralık 2009 11:28 am
iyi tasarımı öğrenmek için en iyi kaynak verilebilir. Bu en son trendleri ve öğreticiler ile her dakika güncellenir.
Buradan elde etmek için bazı bağlantılar ile başladı
http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/
http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/
Size photoshop kullanarak temel becerileri olmalıdır. Sonuçta gerçekte konularda yaratıcılık olduğuna seviyesidir.
[Cevap]
45 Güçlü CSS / JavaScript Teknikleri - Smashing Magazine
Ocak 13
[...] Üçgenler tüm css tarafından yazılmıştır. kolayca dosya ve Kod free.How bir Örtüşen Sekmeli Ana MenuMain navigasyon menüsü tüm sitenin kılan bir web sitesi tasarım kısmını ve canlı görünümünü kullanabilirsiniz CSS renkleri değiştirebilirsiniz [...]
45 Güçlü CSS / JavaScript Teknikleri «Sosyal-Basın
Ocak 13
[...] Nasıl Kodu bir Örtüşen Sekmeli Ana Menü Ana navigasyon menüsü tüm sitenin kılan bir web sitesi tasarımı o parçasıdır canlı ve eksiksiz bak. Ancak navigasyon menüsü stilin en yaygın türü hala çok kullanılan sekmeli navigasyon menüsü olacaktır. Burada nasıl bir örtüşen sekmeli menü kodu için öğretici olduğunu. [...]
45 Güçlü CSS / JavaScript Teknikleri | TipTe.com
Ocak 14
[...] Nasıl Kodu bir Örtüşen Sekmeli Ana MenuMain navigasyon menüsü tüm sitenin kılan bir web sitesi tasarımı o parçasıdır canlı ve eksiksiz bak. Ancak navigasyon menüsü stilin en yaygın türü hala çok kullanılan sekmeli navigasyon menüsü olacaktır. Burada nasıl bir örtüşen sekmeli menü kodu için öğretici olduğunu. [...]
45 Güçlü CSS / JavaScript Teknikleri | Tutorial51
Ocak 14
[...] Nasıl Kodu bir Örtüşen Sekmeli Ana MenuMain navigasyon menüsü tüm sitenin kılan bir web sitesi tasarımı o parçasıdır canlı ve eksiksiz bak. Ancak navigasyon menüsü stilin en yaygın türü hala çok kullanılan sekmeli navigasyon menüsü olacaktır. Burada nasıl bir örtüşen sekmeli menü kodu için öğretici olduğunu. [...]
LeGars
Ocak 14
Hi, I adil rağmen ilginç bir menü bu, bir bağlantı olarak geçerli sayfa sekmesini olması gerektiğini söyleyebiliriz. Bir UX ve erişilebilirlik büyük hayır-hayır.
[Cevap]
Sumeet Chawla cevabı:
14 Ocak 2010 at 3:13
Merhaba,
Hangi parçası başvuruyorsunuz? Ben liste öğesinin geçerli sayfa sınıf değil, bağlantı elemanı var.
[Cevap]
Dean
Ocak 26
Ben yapamıyorum: S
Nasıl Bilmiyorum
Lütfen bana yardım eder misiniz
Hatta png24's Out of My dilim almaz
Öyle css iyi değilim ve gerçekten bu örtüşen menü istiyorum
Sadece 2 resimleri kullanmak ve aynı adı olarak yaptın verdi
ama çalışmıyor
Resim biraz daha düşük ama daha uzun bir lil
Bana yardım misiniz?
Benim için yapabilir miyim lütfen?
[Cevap]
Dean
Ocak 30
Ok, so Şimdi flaş site yapıyorum
Ama navigasyon ile hala sorunlar
nasıl üzerine fare vermek + ön aktif bağlarım?
[Cevap]
Sumeet Chawla cevabı:
Şubat 8, 10:39 am 2.010
Hey merhaba, Üzgünüm, Flash ile fazla deneyimim yok. Ama eğer düzgün eğitim takip ve uyuz z-index değerleri çok düzgün. Sana herhangi bir sorun olacak sanmam ...
[Cevap]