Bir Çakışan Sekmeli Ana menü kodu nasıl

Bizim blog

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

Bir web geliştiricisi olarak, en kodlama ne hoşlanırsınız?
- xHTML
- PHP
- CSS
- JavaScript (jQuery gibi kütüphaneler, Moo Tools vb içerir)
- Diğer
Sonuçlarını Göster
Yükleniyor ...

How to Code an Overlapping Tabbed Main Menu

Bir Çakışan Sekmeli Ana menü kodu nasıl

14 Ekim 2009 - Sumeet By

Ana navigasyon menüsü tüm site canlı ve tam görünmesini sağlar bir web sitesi tasarımının bir parçasıdır. Ama navigasyon menüsü tarzının en yaygın türü hala çok sekmeli gezinti menüsü kullanılıyor. İşte bir örtüşen sekmeli menü kodu nasıl bir öğretici olduğunu.

Demo Canlı Indirin

Orada çeşitli stilleri ve sekmeli gezinme menüsü oluşturma teknikleri vardır ve bunlardan biri her sekme diğer üzerinden yalan ve dolayısıyla tüm menü çok gerçekçi bir his vermek üzere göründüğü sekmeli bindirilirken veya çakışan tarzıdır. Sitemizi tasarlarken, ilham ve öğreticiler çok geçti. Bunlardan biri de bu öğretici oldu ! sonra onunla bir Grungy Web Tasarım oluşturun Scratch Photoshop Kağıt Dokusu gelen Collis tarafından yazıldı NetTuts.com söyleyerek bu sitemin ana ilham kaynağı olan sona erdi ve öğretici geçerken buldum Collis:

"Şimdi yaparsak, bu sekmeler awesome bak kendimi öyle söylüyorlar ve üst üste çünkü yapmak nedenidir. Ne yazık ki bu da HTML ile çalışmak için bunları zorlaştırıyor. Ancak saydam PNG ile çeşitli şeyleri yapmak, ya da dönüşümlü olarak sadece rollover metin değişikliği renkleri yapmak ve sekme renklerini değiştirerek endişe olamaz. Zaten bu yazının kapsamı dışında bütün bir parçasıdır. Menüsünü oluşturmak için biraz zor olabileceğini söylemek yeterli. "

Bu yüzden html içine bir kodlama denedim ve başarılı sonra tüm sizinle paylaşmak düşündüm.

Step Up 1.Gearing

Yani html / css kod içine bir sekmeli gezinti, bu tür kod başlamadan önce, ilk photoshop ilk bir oluşturmayı öğrenmek zorunda. Yukarıdaki öğretici çok detaylı ve Collis photoshop gibi bir menü oluşturabilirsiniz nasıl öğretme işini iyi yapıyor. Bu öğretici için özel bir basit bir inşa var.

Şimdi bana tab.The inaktif duruma rengi grimsi olan üç devlet olduğunu belirtmenizi sağlar, etkin devlet, derin mavi ve vurgulu devlet hafif çelik mavi renkli. Bu nedenle, yerine her sekme için üç görüntüleri dilimleme daha, biz bir görüntü sprite dışarı dilim.

Adım 2. PSD itibaren Sekmeler Dilimleme

Dikey yukarıdaki resimde gösterildiği gibi ızgaraları kullanarak tırnakları. Ayrıca yatay yerine dikey olarak daha sekmeleri hizalayabilir ama sonra CSS arka plan görüntü konumu farklı bir şekilde erişilebilir olacak. Seçim kişiden kişiye göre değişir ama iş hem de mükemmel. Kırpma sırasında görüntü düzgün yönergeleri izleyin ve sekmeler üst üste gerekiyorsa biz şeffaf bir arka plan ihtiyacı olacak çünkü şeffaf arka plan yaptık unutmayın. Görüntüyü kırpmak ve PNG24 formatında web kaydedin. Görüntüleri dilimleme ederken dikkat etmek Bir nokta daha 'Ana' sekmesi yani ilk sekme olmayan bir durumda onun sol kenarında herhangi bir gölge sahip olması gerektiğidir. Dolayısıyla, bu özel sekme için biz de gölgeler olmadan başka bir hareketli grafiği oluşturmak zorunda.

Adım 3. Kod takım

Şimdi bizim dilimleme tamamlandı ve biz tüm görüntüleri bizim gezinti çubuğu kodlama başlatabilirsiniz ihtiyaç var. Sadece bir örnek iyi görünmesi için, ben çakışan gezinti çubuğu ile içerik alanı düzeni özellikli bir örnek inşa ettik. Bütün düzeni şöyle:

 <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="current"> <a href="index.html"> Ana Sayfa </ 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>
		 <div class="clear"> </ div>
		 <div id="featured">
			 <div id="featured-content">
			 </ Div>
		 </ Div>
	 </ Div>
 </ Body>

 </ Html>

Ana navigasyon menüsü bakalım. Ben başka bir gezinti çubuğu gibi basit bir sırasız liste kullanılan ve listenin köprü etiketi için bir arka plan görüntüsü kullanarak tarz var.

 <ul id="main-nav">
	 <li class="current"> <a href="index.html"> Ana Sayfa </ 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 # ana-nav li {
	 float: left;
	 position: relative;
	 display: inline;
 }

Biz en üst sekme aktif devlet temsil ettiği sekmeler için bir resim sprite kullanıyorsanız unutmayın, orta inaktif duruma temsil eder ve alt vurgulu devleti temsil eder. Bu nedenle, biz aşağıdaki gibi düzgün kendi durumuna görüntüleri yerleştirmek için background-position özelliğini kullanacağız:

 ul # ana-nav li bir {
	 position: relative;
	 width: 110px;
	 height: 29px;
	 display: block;
	 background-image: url ('/ images / tabs.png..');
	 background-position: center merkezi;
	 color: # 44403b;
	 text-decoration: none;
	 font-size: 14px;
	 padding-top: 12px;
	 text-align: left;
	 padding-left: 30px;
	 font-weight: bold;
 }
 ul # ana-nav li.home bir {
	 background-image: url ('/ images / sekme home.png..');
 }
 ul # ana-nav li.current bir {
	 background-position: top;
	 color: # ffffff;
 }
 ul # ana-nav li a: hover {
	 background-position: alt;
	 color: # ffffff;
 }
 ul # ana-nav li.current a: hover {
	 background-position: top; vurgulu renk değiştirmesini Şu sekmesini önlemek için / * /
	 color: # ffffff;
 }

Sen liste elemanları ve geçerli sayfa için sekmeye 'güncel' adında bir sınıf her birine ilgili bir sınıf verdik fark edeceksiniz. Bu benim her sekme onu izleyen sekme daha z ekseni yüksek yattığının böyle bir artan sırayla her sekme farklı z-index değerleri atamak böylece yapılır. O anki sayfanın temsil eder ve her zaman listede bakılmaksızın bu konumunu üstünde kalacak, çünkü sınıf 'güncel' ile sekmesi z ekseni en yüksek mertebesinde yatacaklar. Z-index değerleri uygulamadan önce, liste öğesi için pozisyon özniteliği göre ayarlanmış olduğundan emin olun. Herhangi bir konumlandırma değeri olmayan z-index özelliğini hiç çalışmaz.

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

Biz sekmeleri farklı z-index değerleri atanmış olmasına rağmen, hala Hassasiyette üzerinde görünmez ve bu gibi görünecektir:

Bizim gezinme çubuğu için son rötuşları vermek için, üst üste her sekme çıkarmamız gerekir. Biz soldan sağa azalan z-index değerleri atadınız. Bu nedenle, sadece 'ul # ana-nav li' olumsuz 'margin-left özelliği ekleyerek sola hakkında 20px için sağdan başlayarak her sekme itin ve tüm gezinti çubuğu itecektir tarafından sola düzensiz liste çubuğunun sol koğuşlarda hareketi iptali için olumlu bir 20px margin-left 'sözlerine ekledi.

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

Görev Tamam

Birlikte tüm css ve xhtml Montajdan sonra, kullanım için çakışan sekmeli ana navigasyon menüsü hazır olacaktır. Bu benim bir menü bu tür oluşturmak ve aynı yapmak için birçok iyi yollar vardır eminim nasıl almak oldu. Bunu yapmanın başka bir yolu paylaşmak veya sadece bu prosedür ile bazı iyileştirmeler tartışmak eğer sevinirim.
Burada kendi ana gezinme menüsü olarak lepleme sekmeleri üzerinden kullanmak bazı site şunlardır:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Etiketler: CSS , nasıl , menü , navigasyon , Hassasiyette üzerinde

BEĞENEBİLECEĞİNİZ Diğer Yazıları

48 Responses

FAQPAL
03:18 de 17 Ekim 2009 ÖÖ
Mükemmel öğretici ve iyi yazılmış. Paylaşım için teşekkürler.
Cevap
- Sumeet Chawla
  10:01 17 Ekim 2009 ÖÖ
  Sen Pliggs ederiz .. Bu çok FaqPal de öğretici göndermek için bir onurdu
Polprav
20:54 de 17 Ekim 2009
Rusya Hello!
Ben size linki ile blogunuzu bir alıntı miyim?
Cevap
- Sumeet Chawla
  12:21 18 Ekim 2009 ÖÖ
  Hindistan'dan Merhaba Hey! Sen gibi blogundan bir alıntı istiyor? Belirli bir cümle, kelime ya da ne teklif?
Rakesh
12:55 20 Ekim 2009 Saat
öğretici güzel! .... gerçekten yararlı
Cevap
knoli
17:45 de 25 Ekim 2009
Ben Apple Iphone ve Ipod Touch için uygulamalar yapmak istiyorum. Tüm başvurular türlü ama değilsin biri bana biraz yardım verebilir başlatmak ve yerden başlamak için biliyorum
Cevap
knoli
03:49 de 21 Kasım 2009 ÖÖ
Ben iPhone için programlamak için öğrenme ilgileniyorum. Ne en yakın iPhone programlama dili andıran Windows dil olurdu. Ben bütün bir programlama dili yeniden öğrenmek zorunda kalmadan Windows makinelerde ve iPhone hem de yazmak istiyorum.
________________
[Url = http://unlockiphone22.com/] unlock iphone [/ url]
Cevap
- Sumeet Chawla
  07:42 de 21 Kasım 2009 ÖÖ
  Eğer dil C asmak olsun iyi eğer, o zaman herhangi bir programlama dilinde kod yazabilirsiniz. C tüm programlama dilleri anne gibidir.
Santosh Pingale
14:18 de 22 Aralık 2009
2. Ben Adobe Photoshop bir web sitesi tasarlamak için kullanılan hangi web sitesi, kitap VEYA diğer şeyler bilmek istiyorum ...... şimdiden teşekkür ederim .. plz mail me u yapabiliyorsak ..: D
Cevap
- Sumeet Chawla
  11:28 23 Aralık 2009 ÖÖ
  sıra, öğrenme tasarımı için en iyi kaynak internet mevcuttur. Bu son trendler ve öğreticiler ile her dakika güncellenir.
  Burada yeni başlayanlar için bazı bağlantılar
  http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/
  http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/
  Sen photoshop kullanarak temellerini becerilerine sahip olmalıdır. Aslında önemli olan sonunda sahip yaratıcılık seviyesidir.
LeGars
03:07 de 14 Ocak 2010
Merhaba, ben sadece ilginç bir menü var olsa bir link olarak geçerli sayfa sekmesini olmamalıdır söyleyebiliriz. Bu UX ve erişilebilirlik hayır-hayır büyüktür.
Cevap
- Sumeet Chawla
  15:13 de 14 Ocak 2010
  Merhaba,
  Sizin için hangi bölümü başvuruyorsunuz? Ben liste öğesi üzerinde geçerli sayfa sınıf ve bağlantı elemanı yok.
Dekan
04:13 26 Ocak 2010 saat
S: Ben bunu yapamam
Bilmiyorum
Lütfen bana yardım edebilir
Hatta PNG24 Kullanıcı dışarı benim dilim almaz
Ben css ile çok iyi değilim ve gerçekten bu çakışan menü istiyorum
Ben sadece 2 resimleri kullanmak ve senin yaptığın gibi aynı adı verdi
ama çalışmıyor
Benim görüntü biraz daha düşük ama lil uzun
Eğer bana yardım edebilir misiniz?
Bana lütfen için yapabilir miyim?

Cevap
Dekan
2:12 30 Ocak 2010 ÖÖ
Tamam, Şimdi flash site yapıyorum
Navigasyon Ama hala sorunlar
nasıl ön + aktif link üzerine fare veriyorsunuz?
Cevap
- Sumeet Chawla
  10:39 8 Şubat 2010 ÖÖ
  Hi Hey, Üzgünüm, Flash ile çok deneyimi yok. Ama düzgün öğretici izleyin ve düzgün çok z-index değerleri uyuz eğer. Ben herhangi bir sorun olacak sanmam ...
Morishita
12:55 de 25 Mart 2010
Wonerful! Ben bu blog her zaman taze content.I güncelleştirilir nasıl seviyorum arkadaşım üç btw, lol abone yaptı
Cevap
carl
05:44 de 3 Haziran 2010
Bu nasıl indiririm
Bu sonsuz bir döngü var
Cevap
- Sumeet
  11:54 de 3 Haziran 2010
  Verdiğimiz geçici rahatsızlıktan dolayı üzgünüm. Ama download butonuna tıkladıktan sonra indirebilirsiniz. Eğer abone sadece pop up pencere kapanır ve indirme başlayacak etmek istemiyorsanız.
  Görüşleri her zaman memnuniyetle karşılarız
Tom Hıristiyan
05:47 Haziran 12, 2010 saat
Çok teşekkür ederim. Ben özgün tasarım öğretici navigasyon kodlama vazgeçmek üzereydi. Bu bana çok yardım etti!
Cevap
- Sumeet
  09:57 Haziran 12, 2010 saat
  Ben yardım Tom olabileceğini sevindik
John Smith
18:33 de 19 Ekim 2010
Örneğin iyi çalışıyor ve seyir gerçekten mükemmel.
Ancak, ping dosyası (. Png) olarak IE6 da çalışmıyor
desteği yoktur. Herkes, IE6 için bir çözüm var mı
Bu örnek ile çalışır?
Cevap
Lucas
06:11 25 Ekim'de, 2010 saat
Harika, gerçekten menüsü bu tür istiyorum, benim web sitesine eklendi
http://www.ajaxshake.com
teşekkürler
Lucas'ın son blog .. saf Css ile Pseudo 3D efekti
Cevap
Anka kuşu
01:19 de 20 Ocak 2011 ÖÖ
Heya. Başar öğretici. Ben sadece bir blog oluşturduk. Hala devlet tasarımı. Gerçekten bu şey kullanmak istiyorum.
Ama biraz düzeyli açılan menüler bağımlıyım. Bu kodları değiştirmek mümkün mü? Çok düzeyli açılan menüden ulaşılabilir böylece?
Thanx ve Saygılarımızla.
Phoenix son blog .. ama sonra tekrar-ne gönderme yapıldı
Cevap
- Sumeet
  23:40 de 26 Ocak 2011
  Yup, kolayca çoklu seviyeli menüler eklemek için değiştirebilirsiniz. Orada herhangi bir çoklu düzey menü eğitim arayın. Temelde, li eleman köprü ile birlikte bir ul öğesi olacaktır. Ul elemanı (menü açılır) alt menü olarak hareket edecek
Malcolm Hoye
12:19 May 6, 2011 ÖÖ
Sadece güneş, harika bilgi vadiden bir not vermek istedim. Çok takdir.
Cevap
Tara
11:49 de 10 Temmuz 2011
Ben sadece Smashing Magazine bu karşılaştım. Bu büyük öğretici için teşekkür ederiz.
Cevap
Pete
14:38 de 20 Temmuz 2011
Eğer benim web üstünde koyabilirsiniz menüsü sekmeleri maksimum sayıda ne düşünüyorsunuz - i gerçekten 13 istiyorum - yani birçok?
Cevap
Jwel
18:34 az 3 Ocak 2012
Suppppppppppper öğretici .... Çok teşekkürler ............
Cevap