Blog'umuzu

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

  • Bir web geliştiricisi olarak, en kodlama ne zevk alırsınız?

    • )

    Sonuçları

    Loading ... Yükleniyor ...
How to Code an Overlapping Tabbed Main Menu

Nasıl bir Çakışan Sekmeli Ana Menü Kodu

14 Ekim 2009 - Sumeet

Ana navigasyon menüsü, web sitesi tasarımı, tüm site, canlı ve eksiksiz bir görünüm kazandırır bir o kısmı. Ama navigasyon menü stili en yaygın türü hala bir çok sekmeli gezinme menüsü kullanılıyor. Burada üst üste sekmeli bir menü kodu nasıl bir öğretici.

Demo Canlı Indirin

Hey There!

Ayrıca beslemesine abone olsaydı büyük olacak ...

Sekmeli bir navigasyon menüsü oluşturarak çeşitli stilleri ve teknikleri vardır ve bunlardan biri, her sekme diğeri üzerinde yalan ve dolayısıyla tüm menü çok gerçekçi bir his veriyor göründüğü sekmeli kaplanacağı veya çakışan stil. Benim sitesi tasarımı yaparken çok ilham ve öğreticiler ile gitti. Bunlardan biri olarak adlandırılan bu öğretici oldu ! Photoshop Kağıt Dokusu ile Grungy Web Tasarım oluşturun sonra Kazı Kazan Collis tarafından yazıldı NetTuts.com Bu sitemin ana ilham kaynağı olan sona erdi ve öğretici geçerken söyleyerek Collis bulundu:

"Şimdi eğer kendimi bu sekmeleri harika görünüyor ve bunlar üst üste çünkü yaptıkları sebebidir söylüyorlar. Ne yazık ki bu da HTML ile çalışmak zorlaştırır. Ancak şeffaf PNG bir çok şey yapmak, ya da dönüşümlü olarak sadece rollover metni değiştirmek renk ve sekmesinde renk değiştirerek endişe. Zaten bu, bu yazının kapsamı dışındadır biraz . Menü inşa etmek biraz zor olabilir söylemek yeterlidir. "

Bu yüzden html içine bir kodlama çalıştı ve ben başarı sonrası tüm sizinle paylaşmak düşündüm.

Yukarı 1.Gearing Adım

Yani html / css koduna sekmeli gezinti, bu tür kodu başlamadan önce, ilk olarak bir photoshop ilk nasıl oluşturulacağını öğrenmek zorunda. Yukarıdaki öğretici çok ayrıntılı ve Collis öğretim photoshop böyle bir menü oluşturmak için nasıl büyük bir iş yok. Ben bu eğitim için özel bir basit bir inşa var.

menu-image

Şimdi bana tab.The inaktif devletin üç devlet, grimsi renkte olduğunu belirtmek izin verin, aktif devlet, derin mavi ve vurgulu devlet hafif çelik mavi renk. Bu nedenle, her sekme için üç görüntüleri dilimleme daha ziyade bir görüntü sprite dilim.

2. Adım. PSD From Sekmeler Dilimleme

tab-sprite

Yukarıdaki resimde gösterildiği gibi dikey ızgaraları kullanarak tırnakları. Ayrıca sekmeleri yatay yerine dikey olarak daha hizalayabilirsiniz ama sonra CSS arka plan resmi konumu farklı bir şekilde erişilebilir olacaktır. Seçim kişiden kişiye göre değişir ama ikiside mükemmel. Kırpma sırasında görüntünün düzgün yönergeleri izleyin ve sekmeler üst üste gerekiyorsa biz şeffaf bir arka plan ihtiyacı olacak, çünkü ben şeffaf arka plan yaptık. Görüntüyü kırpmak ve PNG24 formatında web kaydedin. Ilk sekme 'Home' sekmesi yani inaktif durumda sol kenarında herhangi bir gölge olması değil gerektiğini görüntüleri dilimleme ise Unutulmaması gereken bir nokta daha. Bu nedenle, bu özel sekme için bu gölgeler olmadan başka bir hareketli grafiği oluşturmak zorunda.

no-shadow-sprite

Adım 3. Kod Uzakta

Şimdi bizim dilimleme ve tüm görüntüleri bizim gezinti çubuğu kodlama başlayabilirsiniz ihtiyaç var. Sadece örnek iyi görünmesi için, ben bir örnek özellikli çakışan navigasyon çubuğu ile içerik alanı düzeni inşa ettik. Tüm 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"> Hizmetleri </ a> </ li>
			 Hakkımızda <li class="about"> <a href="about.html"> </ 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. Basit bir Sırasız listeyi başka bir gezinti çubuğu olarak kullanılan ve bu listenin köprü etiketi kullanarak bir arka plan resmi 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"> Hizmetleri </ a> </ li>
	 Hakkımızda <li class="about"> <a href="about.html"> </ a> </ li>
	 <li class="contact"> <a href="contact.html"> İletişim </ a> </ li>
 </ Ul>

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

Sekmeler için en sekmesi aktif devleti temsil eden bir görüntü sprite kullanarak unutmayın, orta inaktif devleti temsil eder ve alt vurgulu devleti temsil eder. Bu nedenle, biz aşağıdaki gibi düzgün, kendi durumuna görüntüleri yer 'background-position özelliğini kullanabilirsiniz: 

 ul # main-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: sol;
	 padding-left: 30px;
	 font-weight: bold;
 }
 ul # ana-nav li.home a {
	 background-image: url ('../ images / sekme home.png ');
 }
 ul # ana-nav li.current {
	 background-position: top;
	 color: # ffffff;
 }
 ul # li ana-nav a: hover {
	 background-position: alt;
	 color: # ffffff;
 }
 ul # ana nav li.current a: hover {
	 background-position: top; / * hover üzerinde renk değişimi Mevcut sekmesini önlemek için * /
	 color: # ffffff;
 }

Liste elemanlarının her biri için ilgili sınıf ve geçerli sayfa için sekme 'geçerli' adında bir sınıf olduğunu fark edeceksiniz. Bu, her sekme, sekme daha yüksek z-ekseni yattığını artan sırayla her sekme için farklı z-index değerleri atamak, böylece yapılır. Geçerli sayfayı temsil eder ve her zaman üst listesinde konumu ne olursa olsun üzerinde kalacaktır, çünkü sınıf mevcut 'sekmesi z ekseni yüksek düzenin yalan. Z-index değerleri uygulamadan önce, liste öğesi için pozisyon niteliği göre ayarlanmış olduğundan emin olun. Z-index özelliğini herhangi bir konumlandırma değeri olmayan hiç çalışmıyor. 

 ul # ana-nav li.current {
	 z-index: 100;
 }
 ul # ana-nav li.home {
	 z-index: 100;
 }
 ul # main-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 farklı z-index değerleri sekmelere atanmış olsa da, onlar hala gömülmüş üzerinde görünmez ve aşağıdaki gibi görünecektir:

non-overlapped-tabs

Bizim gezinti çubuğu için son rötuşları vermek için, üst üste her sekme itmek zorunda. Biz soldan sağa doğru azalan sırada z-index değerleri atadınız. Bu nedenle, sadece sol listesi sırasız bir negatif margin-left 'mülkiyet' ul # ana-nav li ekleyerek sağdan başlayarak her sekme, sol hakkında 20px itme ve tüm gezinti çubuğu itmek çubuğunun sol koğuşta hareketi geçersiz olumlu bir 20px margin-left 'ekleyerek. 

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

Görev Tamam

Tüm css ve xhtml ile birlikte montaj sonra, çakışan sekmeli ana navigasyon menüsü kullanmak için hazır olacaktır. Bu benim bu tür bir menü oluşturmak için nasıl alabilir ve aynı şeyi çok daha iyi yollar vardır eminim. Bunu yapmanın başka bir şekilde paylaşmak veya sadece bu prosedürü kendisi için bazı iyileştirmeler tartışmak mutluluk duyarız.
İşte ana navigasyon menüsü olarak sekmeleri alıştırma üzerinde kullanan bazı site:
ILove2Design.at
HiddenDepth.ie
HotCards.com

Etiketler: , , , ,

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

47 Responses

  1. FAQPAL
    17 Ekim 2009 saat 03:18 at

    Mükemmel bir öğretici ve iyi yazılmış. Paylaşım için teşekkürler.

    Cevap
  2. Polprav
    17 Ekim 2009 20:54

    Rusya'dan Merhaba!
    Ben size link blogunuza bir alıntı miyim?

    Cevap
  3. Rakesh
    20 Ekim 2009 12:55

    güzel bir öğretici ... gerçekten yararlı

    Cevap
  4. knoli
    25 Ekim 2009 17:45

    Apple iPhone ve iPod Touch için uygulamalar yapmak istiyorum. Tüm uygulamalar her türlü ama başlayıp nerede başlar ve nasıl bilmiyorum biri bana biraz yardım verebilir

    Cevap
  5. knoli
    21 Kasım 2009 saat 03:49 at

    IPhone için programı öğrenme ilgileniyorum. Ne en yakın iPhone programlama dili benzer Windows dil olacaktı. Bütün bir programlama dili yeniden öğrenmek zorunda kalmadan Windows makinelerde ve iPhone'lar için yazmak istiyorum.

    ________________
    [Url = http://unlockiphone22.com/] unlock iphone [/ url]

    Cevap
  6. Santosh Pingale
    22 Aralık 2009 14:18

    2 Adobe Photoshop bir web sitesi tasarımı, web sitesi, kitap VEYA diğer şeyler ... ... Thank u önceden bilmek ister .. plz bana mail u edebilirsiniz ..: D: D: D

    Cevap
  7. LeGars
    14 Ocak 2010 03:07

    Merhaba, ben sadece ilginç bir menü bulunuyor olsa da, bir link olarak mevcut sayfa sekmesini gerektiğini söyleyebiliriz. Hayır-hayır büyük bir UX ve erişilebilirlik.

    Cevap
  8. Dekan
    26 Ocak 2010 saat 04:13 at

    S: bunu yapamazsınız
    Ne yapmam gerektiğini bilmiyorum :-(

    Bana yardım edin lütfen
    Hatta benim dilim PNG24 Kullanıcı dışarı almaz

    Css ile çok iyi değilim ve gerçekten bu çakışan bir menü istiyorum
    Ben sadece 2 görüntü ve olduğu gibi aynı ismi verdi
    fakat iş değildir
    Benim görüntü biraz daha düşük ama lil uzun

    Lütfen bana yardım edebilir mi?

    Bana lütfen bunu yapabilir miyim?

    Cevap
  9. Dekan
    Ocak 30, 2010 2:12 am

    Tamam, Şimdi flash site yapıyorum

    Navigasyon Ama yine de sorunlar
    fare nasıl üzerinden vermek + aktif link önünde?

    Cevap
    • Sumeet Chawla
      8 Şubat 2010 10:39 am

      Hey merhaba, Üzgünüm, ben Flash ile çok deneyime sahip değilsiniz. Ama öğretici düzgün takip etmek ve z-index değerleri düzgün çok Uyuz. Ben herhangi bir sorun olacağını sanmıyorum ... :)

  10. Morishita
    25 Mart 2010 12:55

    Wonerful! Ben arkadaşlarımın üç abone btw, lol bu blogu her zaman taze content.I nasıl güncellenir seviyorum

    Cevap
  11. carl
    3 Haziran 2010 05:44

    bunu nasıl indirebilirim

    sonsuz bir döngü

    Cevap
    • Sumeet
      3 Haziran 2010 11:54

      Rahatsızlık için özür dilerim. Ama download düğmesine tıkladıktan sonra indirebilirsiniz. Abone olmak istemiyorsanız, sadece pop-up penceresini kapatın ve yükleme başlayacaktır.

      Geribildirim her zaman memnuniyetle :)

  12. Tom Hıristiyan
    Haziran 12, 2010 5:47 am

    Çok teşekkür ederim. Özgün tasarım öğretici navigasyon kodlama vazgeçmek üzereydim. Bu bana çok yardımcı oldu!

    Cevap
  13. John Smith
    19 Ekim 2010 18:33

    Bu örnek, iyi çalışıyor ve gerçekten mükemmel.
    Ancak, (png) ping dosyası olarak IE6 üzerinde de çalışmıyor.
    destek yoktur. Herkes IE6 için bir çözüm var mı-
    Bu örnek ile çalışır?

    Cevap
  14. Lucas
    25 Ekim 2010 saat 06:11 at

    Harika, ben gerçekten bu tür bir menü gibi, ben benim web sitesine eklendi
    http://www.ajaxshake.com
    teşekkürler
    Lucas son günlüğü .. saf Css Pseudo 3D efekti Benim ComLuv

    Cevap
  15. Anka kuşu
    20 Ocak 2011 saat 01:19 at

    Heya. Başar öğretici. Ben sadece bir blog oluşturduk. Hala devlet tasarımı. Ben gerçekten bu şey kullanmak istiyorum.
    Ama tür drop-down çok seviyeli menüler bağımlısı olduğum. Bu kodları değiştirmek mümkün mü? Çok seviyeli bir açılır menü Böylece elde edilebilir?
    Thanx ve görmektedir.
    Phoenix'in son günlüğü .. ama sonra tekrar ne gönderme Benim ComLuv

    Cevap
    • Sumeet
      26 Ocak 2011 23:40

      Yup, kolayca çoklu seviyeli menüler eklemek için değiştirebilirsiniz. Orada herhangi bir çoklu düzey menü öğretici arayın. Temel olarak, li eleman köprü ile birlikte ul unsuru olacaktır. Ul elemanı (drop down menü) alt menü olarak hareket edecek

  16. Malcolm Hoye
    : 6 Mayıs 2011 00:19

    Sadece güneş, büyük bilgi vadiden bir çığlık vermek istedim. Çok takdir etti.

    Cevap
  17. Tara
    10 Temmuz 2011 11:49

    Ben sadece Smashing Magazine bu karşılaştım. Bu büyük eğitim için teşekkür ederiz.

    Cevap
  18. Pete
    20 Temmuz 2011 14:38

    i gerçekten 13 istiyorum - i benim web sitesinin üst kısmında koyabilirsiniz, menü sekmeleri maksimum sayıdır ne düşünüyorsunuz? pek çok?

    Cevap
  19. Jwel
    3 Ocak 2012 18:34

    Suppppppppppper öğretici ... Çok teşekkürler ... ... ... ...

    Cevap

Trackbacks ve pingbacks

  1. kopfkribbeln webdesign-blog »Überlappendes Tabmenü
  2. 45 Güçlü CSS / JavaScript Teknikleri - Smashing Magazine
  3. 45 Güçlü CSS / JavaScript Teknikleri «Sosyal-Basın
  4. 45 Güçlü CSS / JavaScript Teknikleri | TipTe.com
  5. 45 Güçlü CSS / JavaScript-Teknikleri | Tutorial51
  6. 45 Güçlü CSS / JavaScript Teknikleri »Shai Perednik.com
  7. 45 Güçlü CSS / JavaScript-Teknikleri | moreInet.com | Pattaya Webdesign, Grafik Tasarım Hizmeti
  8. Çakışan sekmeleri | Web Tasarım İki
  9. 45种有用的Css / Javascript技巧| narko
  10. CSSFind
  11. 45 Güçlü CSS / JavaScript Teknikleri | DX blog
  12. designfloat.com
  13. zabox.net
  14. joyoge.com
  15. 100 Büyük CSS Menü Öğreticiler
  16. JQuery etkisi ile 50 CSS Menü Tutorials | Bilgi dünyada Desua
  17. 100 Büyük CSS Menü Haberler - pocongseXy:: Sanat ve Dezign:
  18. 100 Büyük CSS Menu Tutorials | Designer Malezya
  19. E-sitesweb »45 Güçlü CSS / JavaScript Teknikleri

Bir Cevap Yazın

CommentLuv Enabled
  • Grafik Nehri My Sites Up musunuz? Tema Orman

  • Gözat

    • ana:

      $ ('Select.jqTransformHidden') canlı ('değişim', function () {var thiz = $ (t. ..

    • Jwel:

      Suppppppppppper öğretici .... çok teşekkürler ...............

    • Zied:

      Merhaba, ben bir kayıt formu, I. oluşturmak için jqtransform eklentisi var ..

    • Zied:

      Merhaba; "SeçenekGrubu kullanımı için bir çözüm bulduk "?...

  • Etiket Bulutu