Bizim Blog
Yazılar, Paylaşım Bilgi, Haberler, Rehberler
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.
Ç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
Trackbacks ve Pingbacks
- kopfkribbeln Tabmenü webdesign Überlappendes-blog »
- JavaScript Teknikleri 45 Güçlü CSS / - Smashing Magazine
- 45 Güçlü CSS / JavaScript Teknikleri Basın «Sosyal-
- 45 Güçlü CSS / JavaScript Teknikleri | TipTe.com
- JavaScript Teknikleri 45 Güçlü CSS / | Tutorial51
- 45 Güçlü CSS / JavaScript Teknikleri Perednik.com »Shai
- 45 Güçlü CSS / JavaScript Teknikleri | moreInet.com | Webdesign, Grafik Tasarım Hizmetleri Pattaya
- Örtüşen sekmeleri | Web Tasarım İki
- 45种有用的Css / Javascript技巧| narko
- CSSFind
- | DX Blog CSS / JavaScript Teknikleri Güçlü 45
- designfloat.com
- zabox.net
- joyoge.com



















Mükemmel ve öğretici iyi yazılmış. pay için teşekkürler.
Sen .. Pliggs teşekkürler Bu bir onur FaqPal olarak eğitim sonrası oldu çok
Merhaba Rusya'dan!
Miyim blogunuza size link içeren bir alıntı?
Hey Hindistan'dan Hi!
Siz de blog bir alıntı mı istiyorsun? Belirli bir cümle, cümle veya teklif ne? 
güzel öğretici! .... gerçekten yardım etmek
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
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
iyi, sen dili C sonra herhangi bir programlama dilinde kod olabilir asmak gidersen. C tüm programlama dillerinin anne gibidir.
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
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.
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.
Merhaba,
Hangi bölüm sizin için başvuruyorsunuz? Ben eleman değil bağlantı elemanı listesinde geçerli sayfanın dersim var.
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?
Tamam, Şimdi flaş site yapıyorum
Ama navigasyon ile hala sorunlar
i önünde + aktif link gorebilirsiniz vermek nasıl?
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 ...
Wonerful! Nasıl bu blog her zaman taze content.I ile yapılan üç arkadaşımla güncellenir aşk abone, lol btw
Bu yüklemeyi nasıl
o sonsuz bir döngü's
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
Çok teşekkürler. Ben özgün tasarım tutorial dan navigasyon kodlama vazgeçmek oldu. Bu bana çok yardımcı oldu!
Çok memnunum ben yardım Tom olabilir