Nasıl Codepal Ana Menü | Sekmeli Örtüşen Code

Bizim Blog

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

geliştiricisi olarak bir web, ne yapmak en kodlama hoşunuza?
- xHTML
- PHP
- CSS
- Javascript (gibi jQuery kütüphaneleri içerir, Moo Tools vb)
- Diğer
Sonuçları Göster
Yükleniyor ...

Nasıl Ana Menü Sekmeli Örtüşen Code

14 Ekim 2009 - Sumeet By

Ana gezinme menüsü tüm site yapan bir web sitesi tasarımı o parçasıdır canlı ve tam görünüyor. Ama navigasyon menüsü stilini en sık görülen tip hala çok kullanılan sekmeli navigasyon menüsüdür. Burada bir an menü sekmeli örtüşen kodu nasıl öğretici olduğunu.

Live Demo Download

Çeşitli stilleri ve sekmeli gezinti menüsü oluşturmak ve bunlardan birinin teknikleri sekmeli overlaying veya her sekme üzerinde yatan görünen örtüşen tarzı vardır ve diğer dolayısıyla tüm menü çok gerçekçi hissediyorum verir. Sitemi sergilerken, ben ilham ve öğreticiler çok geçti. Bunlardan biri olarak adlandırılan bu özel öğretmen Photoshop Kağıt Doku Scratch dan sonra grungy Web Tasarımı ile oluşturun! dan tarafından yazıldı Collis NetTuts.com ana: bu gidiş site ve süre benim ilham aracılığıyla varlık kadar bu sona erdi Collis öğretici buldum diyerek

Ve söylemek benim onlar harika kendimi bu bakış sekmeleri nedenidir yaptıklarını örtüşme halinde "Şimdi. Ne yazık ki bu da HTML kılmaktadır zor onlara çalışıyoruz. Yapabilir adil ya da dönüşümlü olarak, PNGs şeffaf çeşitli şeylerle Ancak ne renk rollover değişiklik metin ve renk etiket değil değişen kaygı hakkında. Her neyse bu yazının kapsamı bu biraz ötesinde bir bütün. Yeterli inşa etmek söylemek zor bit menüsünden olabilir. "

Bu yüzden html içine bir kodlama ve hepinize ile paylaşma düşüncesi başarı sonrasında çalıştı.

Up 1.Gearing Adım

Yani önce html / css koduna sekmeli gezinti bu tür kod başlamadan önce nasıl bir photoshop oluşturmak için ilk öğrenmeniz gerekiyor. Öğretici Yukarıda çok detaylı ve Collis nasıl böyle bir menü oluşturmak için photoshop öğretim yılında büyük bir iş yapmasıdır. Bu eğitim için özel olarak basit bir inşa var.

Şimdi beni orada tab.The inaktif devletin üç devletler belirtmek izin renk grimsi ise, aktif devlet derin ve hover devlet mavi hafif çelik mavi renktir. Bu nedenle, yerine her sekme için, biz dilim dışarı bir görüntü sprite üç resimden kadar dilimleme daha.

Adım 2. Gönderen Sekmeler Dilimleme PSD

Hizalayın sekmeleri dikey ızgara kullanarak yukarıdaki resimde görüldüğü gibi. Ayrıca, yatay yerine dikey olarak daha sekmeleri hizalayabilirsiniz ama sonra CSS arka plan görüntüsü konumu farklı bir şekilde erişilebilir olacak. Seçim kişinin kişiye göre değişir ancak her iki çalışma mükemmel. düzgün kurallara uyun görüntü kırpma iken ve biz sekmeleri örtüşme gerekiyorsa biz şeffaf bir arka plan ihtiyacı olacak çünkü ben arka plan şeffaf yaptık unutmayın. Mahsul görüntü ve PNG24 formatında web üzere saklayın. görüntüler kadar dilimleme süre Bir noktayı daha dikkat edilmesi gereken ilk sekme 'Home' sekmesi etkin durumda olan sol kenarında herhangi bir gölge sahip olmamalıdır yani. Dolayısıyla, biz de gölge olmadan başka sprite oluşturmak zorunda olduğu özel sekme için.

Adım 3. Kod Away

Şimdi bizim dilimleme tamamlandıktan ve tüm görüntüleri bizim navigasyon barkodlama başlayabilirsiniz ihtiyaç var. Sadece bir örnek yapmak iyi bak, ben bir örnek inşa örtüşen gezinti çubuğu ile içerik alanının düzeni bulunuyordu. Bütün düzeni aşağıdaki gibidir:

 <! 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"> </ a> </ li> Hakkımızda
			 <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>

Hadi ana gezinme menüsü bakıyorum. Ben başka bir gezinme çubuğu olarak basit bir Rakamsız liste kullanmış ve bu listenin köprü etiketine bir arka plan görüntüsü bezeniyor.

 <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"> </ a> </ li> Hakkımızda
	 <li class="contact"> <a href="contact.html"> İletişim </ a> </ li>
 </ Ul>

 ul # ana-nav li (
	 float: left;
	 konum: göreceli;
	 display: inline;
 )

ki bu en üst sekmesinde aktif devleti temsil sekmeleri için bir görüntü sprite kullanıyorsanız Unutmayın, orta ve etkin devlet temsil alt hover devleti temsil eder. Böylece, düzgün kendi devlet olarak görüntüler yere mülkiyet 'background-position' kullanımı aşağıdaki gibidir:

 ul # main-nav li bir (
	 konum: göreceli;
	 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 # main-nav li.home bir (
	 background-image: url ('../ images / sekme ') home.png;
 )
 ul # main-nav li.current bir (
	 background-position: top;
	 color: # ffffff;
 )
 ul # main-nav li a: hover (
	 background-position: alt;
	 color: # ffffff;
 )
 ul # main-nav li.current a: hover (
	 background-position: top; önleyin Şu sekmesini / * hover renk değiştirmesini /
	 color: # ffffff;
 )

Sen benim her listenin elemanları ve sınıf isimli geçerli sayfa için sekmeye 'cari ilgili bir sınıf verdik göreceksiniz. Bu yüzden ben her sekme için artan düzende öyle ki her sekmeyi sekme daha yüksek z-ekseni olarak onu izleyen yatıyor farklı z-indeks değeri atayabilirsiniz yapılır. o ve geçerli sayfa temsil ettiğinden dolayı her zaman üstte bakılmaksızın Listede pozisyon's kalacak sınıf 'akımı ile sekme' z-ekseni en üst sırada yer yalan olur. z-index değerleri uygulamadan önce, bu liste elemanı için pozisyon özelliği göreceli olarak ayarlandığından emin olun. Herhangi bir konumlandırma değeri z-index özelliği olmadan 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 sekmelere farklı z-index değerleri atamış rağmen, hala üzerinde gömülmüş ve görünmeyen bu gibi görünecektir:

bizim gezinti çubuğu için son rötuşları vermek için, üst üste her sekme itmek gerekir. Biz soldan sağa doğru azalan z-index değerleri atanır. Bu nedenle, sadece her sekmenin sağ yaklaşık 20px için 'doğru' ul # main-nav li konut 'negatif margin-left' ekleme ve düzensiz liste bütün gezinti çubuğu itin sola bıraktığı onun başlıyor itecektir ekleyerek olumlu 20px margin 'çubuğunun sol koğuşlarda hareket iptali için bıraktı.

 ul # ana-nav (
	 margin-left: 20px;
 )
 ul # ana-nav li (
	 float: left;
	 konum: göreceli;
	 margin-left:-20px;
	 display: inline;
 )

Misyon Başarılı

birlikte tüm css ve xhtml Montajdan sonra, bizim örtüşen olacak ana gezinme menüsü kullanıma hazır sekmeli. Bu nasıl bir menü bu tür oluşturmak için almak benim ve pek çok daha iyi yollar aynı şeyi vardır eminim. Bunu da sadece bu prosedür kendisine bazı iyileştirmeler tartışmak yapmanın başka bir yolu paylaşmak eğer memnun kalırız.
Burada ana gezinme menüsü olarak lepleme sekmeler üzerinden kullanmak bazı site şunlardır:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Etiketler: CSS , nasıl , menü , navigasyon , gömülmüş üzerinde

Diğer Yayınlar Like You Might

34 yanıt

FAQPAL
17 Ekim 2009 03:18 at önce
Mükemmel ve öğretici iyi yazılmış. pay için teşekkürler.
Cevap
- Sumeet Chawla
  17 Ekim 2009 10:01 at önce
  Sen .. Pliggs teşekkürler Bu bir onur FaqPal olarak eğitim sonrası oldu çok
Polprav
17 Ekim 2009 08:54 pm
Merhaba Rusya'dan!
Miyim blogunuza size link içeren bir alıntı?
Cevap
- Sumeet Chawla
  18 Ekim 2009 12:21 at önce
  Hey Hindistan'dan Hi! Siz de blog bir alıntı mı istiyorsun? Belirli bir cümle, cümle veya teklif ne?
Rakesh
20 Ekim 2009 12:55 at önce
güzel öğretici! .... gerçekten yardım etmek
Cevap
knoli
25 Ekim 2009 05:45 pm
Ben Apple Iphone ve Ipod Touch için uygulama yapmak istiyorum. uygulamalar her türlü ama i dont başlatma ve yerden biri bana yardım verebilir başlatmak için biliyorum
Cevap
knoli
21 Kasım 2009 03:49 at önce
Nasıl program iPhone için öğrenme ilgileniyorum. Ne Windows dili en yakın iPhone programlama dilini andırıyor olacaktır. Ben hem Windows makineleri ve iPhone'lar için yeniden bütün bir programlama dilini öğrenmek zorunda kalmadan yazmak istiyorum.
________________
[Url = http://unlockiphone22.com/] / url] iphone [kilidini
Cevap
- Sumeet Chawla
  21 Kasım 2009 07:42 at önce
  iyi, sen dili C sonra herhangi bir programlama dilinde kod olabilir asmak gidersen. C tüm programlama dillerinin anne gibidir.
Santosh Pingale
22 Aralık 2009 02:18 pm
Istediğiniz web sitesi, diğer malzeme OR kitap ben peşin .. plz posta beni Adobe Photoshop ... ... Thank u bir web sitesi tasarımı için kullanmak gerektiğini bildiğini 2 eğer u olabilir ..: D
Cevap
- Sumeet Chawla
  23 Aralık 2009 11:28 at önce
  iyi tasarımı öğrenme için en iyi kaynak internet olduğunu. En son trendleri ve öğreticiler ile her dakika güncellenir.
  Burada seninle başladı bazı bağlantılar almak için
  http://vandelaydesign.com/blog/design/website-layout-photoshop-tutorials/
  http://creativenerds.co.uk/tutorials/70-tutorials-using-photoshop-to-design-a-website/
  Sen photoshop kullanma temelleri becerilerine sahip olmalıdır. sonunda gerçekte konularda yaratıcılık var seviyesidir.
LeGars
14 Ocak 2010 03:07 pm
Merhaba, sadece ilginç bir menüsü olsa da, bir bağlantı olarak geçerli sayfa sekmesini olmamalıdır söyleyebilirim ben. Bu UX ve erişilebilirlik büyük hayır-hayır.
Cevap
- Sumeet Chawla
  14 Ocak 2010 03:13 pm
  Merhaba,
  Hangi bölüm sizin için başvuruyorsunuz? Ben eleman değil bağlantı elemanı listesinde geçerli sayfanın dersim var.
Dekan
26 Ocak 2010 04:13 at önce
Ben yapamıyorum: s
Bilmiyorum nasıl
Yardım edebilir misiniz lütfen beni
Hatta benim dilimleri almaz png24's
Öyle css iyi değilim ve gerçekten bu örtüşen menü istiyorum
Sadece 2 resimleri kullanmak ve yaptın gibi aynı isim verdi
ama çalışmıyor
Resim biraz daha düşük ama artık lil olduğunu
Bunu benden yardım lütfen?
Bunu benim için yapabilir misiniz?
Cevap
Dekan
30 Ocak 2010 at 02:12
Tamam, Şimdi flaş site yapıyorum
Ama navigasyon ile hala sorunlar
i önünde + aktif link gorebilirsiniz vermek nasıl?
Cevap
- Sumeet Chawla
  8 Şubat 2010 10:39 at önce
  Hey, Üzgünüm, Flash ile fazla deneyimim yok hi. Ama eğer düzgün öğretici takip ve düzgün çok z-index değerleri uyuz. Sana herhangi bir sorun olacak sanmam ...
Morishita
25 Mart 2010 00:55 pm
Wonerful! Nasıl bu blog her zaman taze content.I ile yapılan üç arkadaşımla güncellenir aşk abone, lol btw
Cevap
carl
3 Haziran 2010 5:44 pm
Bu yüklemeyi nasıl
o sonsuz bir döngü's
Cevap
- Sumeet
  3 Haziran 2010 11:54 pm
  Maalesef durum için neden oldu. Ama download düğmesine tıkladıktan sonra indirebilirsiniz. Eğer abone olmak istemiyorsanız sadece ve pencere pop yakın download başlayacaktır.
  Geribildirim her zaman memnuniyetle karşılarız
Tom Christian
12 Haziran 2010 05:47 at önce
Çok teşekkürler. Ben özgün tasarım tutorial dan navigasyon kodlama vazgeçmek oldu. Bu bana çok yardımcı oldu!
Cevap
- Sumeet
  12 Haziran 2010 09:57 at önce
  Çok memnunum ben yardım Tom olabilir