Kalıcı okuyucularımdan çok sayıda istek ve sadece meraklı kullanıcılar onların etkisi oldu. Sonunda nasıl yapılacağını öğreneceğimiz bir ders oluşturdum dinamik menü Basılan düğmelerin etkisiyle Vkontakte! Sıradan İnternet sitelerine benzeterek, ziyaret edilen bağlantı işaretlendiğinde özel bir şekilde(basılan düğme, alt çizgi vb.) - Oluşturulan sayfaları ve grafik tasarımı kullanarak aynı Vkontakte yapısını oluşturacağız. Başlamak için Photoshop'ta grafik şablonları yapacağız - bir menü başlığı ve iki tür düğme oluşturacağız. Ardından, menümüzün öğelerine göre birkaç Vkontakte sayfası oluşturacağız. Ve son olarak, aslında bağlantıya tıklama yanılsamasını yaratacak olan zor bir numara yapalım. Ders oldukça karmaşık ve Vkontakte'nin işlevselliğinden emin olanlar için uygundur. Tüm manipülasyonları bir örnek kullanarak yapacağım Vkontakte grubunuz bu etkinin canlı olarak gerçekleştiği yer. O halde başlayalım!
Adım 1. Photoshop'ta bir menü başlığı oluşturun
Photoshop'ta 600 piksel genişliğinde bir belge oluşturun. Yükseklik sizin takdirinize bağlı olarak farklı olabilir. Başlığa istediğiniz türde fotoğraf, kolaj, bilgi başlığı ve diğer grafik resimleri yerleştirebilirsiniz. Bu durumda, bunu kullandım reklam afişi 600x172 piksel boyutunda. 
2. Adım. Photoshop'ta bir gezinme çubuğu oluşturun
Şimdi bir gezinti çubuğu oluşturmamız gerekiyor. V bu örnek Düğme olarak sadece metin kullandım. Ancak kendi takdirinize bağlı olarak renkli düğmeler oluşturabilir ve üzerlerine metin yazabilirsiniz. Bunu yapıyoruz - Photoshop'ta 600x56 piksellik bir dikdörtgen oluşturun ve bu durum beyazla doldurun. Sonra menü öğelerini bir satıra yazıyoruz - 5-6 öğe sırasına göre bir yere, daha fazla değil. Büyük miktar puanlar sıkılmış görünecek.
Adım 3. Photoshop'ta basılı durumda bir gezinme çubuğu oluşturun
Şimdi, sanki tıklanmış gibi aktif bağlantılar oluşturmamız gerekiyor. Normal bir alt çizgi kullandım, ancak ziyaret edilen bağlantıyı işaretlemek için farklı bir metin veya arka plan rengi kullanabilirsiniz.
Adım 4. Bitmiş resimleri kesin
Açık bu aşama Adım 2 ve Adım 3'teki resimleri kesmemiz gerekiyor. Biri altı çizili diğeri altı çizili olmak üzere beş butondan oluşan iki setimiz olmalı. Her bir öğe için (altı çizili ve altı çizili olmayan) düğmeler aynı boyutta olmalıdır. Aşağıdaki resim tüm grafik dizayn- on düğme ve bir menü başlığı. 
Adım 5. Bir Vkontakte Menü sayfası oluşturun
Şimdi VKontakte'ye gidin. Bizim görevimiz yaratmak ayrı sayfa"Menü" denir. Bunu yapmak için aşağıdaki kodu kullanacağız
http://vk.com/pages?oid=-XXX&p=Page_name
burada XXX yerine grubumuzun kimliğini değiştireceğiz ve "Sayfa adı" metni yerine bir Menü yazacağız. Şimdi grup kimliğini bulmamız gerekiyor. Nasıl yapılır? Grubun ana sayfasına gidiyoruz ve duvardaki yazılarımıza bakıyoruz - "Yazı ekle" bloğunun hemen altında "Tüm yazılar" yazılacak - bu bağlantıya tıklayın. 
Adım 6. Grup kimliğini belirleyin ve kodu düzenleyin
Sayfaya gidin ve bu türün url'sini görün https://vk.com/wall-78320145?own=1, burada bu örnekteki 78320145 sayıları grup kimliğidir. Verilerimizi kaynak kodun yerine koyarız ve şu türden bir kayıt alırız:
http://vk.com/pages?oid=-78320145&p=Menü(numaralarınızla birlikte!). Bu satırı içine yerleştiriyoruz adres çubuğu tarayıcıyı seçin ve Enter'a basın. Biz böyle yarattık yeni sayfa Vkontakte ve başlangıçta böyle görünüyor. 
Adım 7. Gezinme sayfalarının geri kalanını Vkontakte oluşturun
Benzer şekilde, dört gezinme sayfası daha oluşturuyoruz: Fiyatlar, Nasıl sipariş verilir, İş Tanımı ve Sorular. Yani, dört kez daha ilgili kodu tarayıcının adres çubuğuna kopyalıyoruz (numaralarımın altındaki örnekte kimlik numaralarınızla birlikte):
http://vk.com/pages?oid=-78320145&p=Fiyatlar
http://vk.com/pages?oid=-78320145&p=How_order
http://vk.com/pages?oid=-78320145&p=İş Tanımı
http://vk.com/pages?oid=-78320145&p=Sorular
Lütfen iki kelimelik sayfanın başlığında (Nasıl sipariş verilir), kelimeler arasındaki boşluğun bir alt çizgi How_order ile değiştirildiğini unutmayın. Artık her menü öğesi için hazır beş sayfamız var. Menü sayfasında yer aldığı için Portföy sayfasını oluşturmadık.
Adım 8. Menünün ilk sayfasına fotoğraf yükleyin
Yaratılan üzerinde henüz boş sayfa(bkz. Adım 6) Düzenle bağlantısındaki veya İçerikle doldur bağlantısındaki menüyü tıklayın. Bundan sonra düzenleme panelini görüyoruz. Burada fotoğraf yükle işleviyle kamera simgesine tıklamamız gerekiyor. Önemli! Wiki işaretleme modunuz olduğundan emin olun. Mod değiştirme, sayfanın sağ kenarındaki simgeyle kontrol edilir. 
Adım 9. Görüntüleri yükledikten sonra sonuç
Adım 1 ve Adım 2'de oluşturduğumuz resimlerimizi yüklüyoruz Yüklemeden sonra aşağıdaki resimdeki gibi kodu görüyoruz ve menünün kendisi bu şekilde görünüyor. Her kod değişikliğinden sonra Sayfayı kaydet'e tıklamayı ve ardından sonucu görmek için önizlemeye tıklamayı unutmayın. 
Adım 10. Görüntü kodunu düzenleme
Şimdi görevimiz, tüm noborder özelliklerini nopadding özelliğiyle değiştirmek. Ve ilk resmi koy gerçek boyut, çünkü Vkontakte yüklenirken resmi 400 piksele küçülttü. Tüm değişikliklerden sonra böyle bir kod ve böyle bir menü almalıyız. 
Adım 11. Resimler için bağlantılar koymak
Şimdi her resim için bağlantı eklememiz gerekiyor. Bağlantı, nopadding işleminden sonra eklenmelidir | kapanış parantezlerinden önce bir boşluk yerine. İlk resim için (Adım 1'deki menü başlığı), grubun ana sayfasına bir bağlantı verebilir veya nolink özelliğini kullanabilirsiniz (sonra koy; boşluk bırakmadan sonra). İkinci resim için format sayfasının adresini giriniz. sayfa-78320145_49821289... Yani, resmin tam URL'si https://vk.com/page-78320145_49821289, alan adı ile ilk bölümü atlayabilirsiniz. Ancak harici sitelere bağlantılar için url bağlantıları tam olarak belirtilmelidir. 
Adım 12. Kodu gezinme sayfalarının geri kalanına kopyalayın
Bu yeterli basit adım, önceki adımdaki son kodu kopyalayıp oluşturulan sayfaların geri kalanına yapıştırıyoruz - Fiyatlar, Nasıl sipariş verilir, İş Tanımı ve Sorular. Sayfadayız, Düzenle veya İçerikle doldur'a tıklayın (wiki işaretleme modundayız), kodu yapıştırın ve Kaydet'e tıklayın. Ve sonra da sonraki Sayfa... Yani, şimdi her birinde menünün tamamen aynı göründüğü beş sayfamız var. Ancak öte yandan, zaten menüde gezinebilirsiniz - örneğin Fiyatlar bağlantısına tıkladığınızda, Fiyatlar sayfasına geçeceğiz, vb.
Adım 13. Basılan düğmenin efektini yapmak
Şimdi beş sayfanın her birinde bir resmi değiştirmemiz gerekiyor (altı çizili bir düğme ile altını çizmeden düğmeyi değiştireceğiz). Örneğin, Menü'nün ilk sayfasında yeni bir resim yüklüyoruz ve ardından koddaki eski resmin adresini yenisiyle değiştiriyoruz (altı kırmızıyla çizili). Ardından Fiyatlar sayfasına gidin, altı çizili Fiyatların olduğu resmi yükleyin ve kodda yeni resmin adresine değiştirin. Ardından Nasıl Sipariş Verilir, İş Tanımı ve Sorular sayfalarına giderek aynı işlemi aynı şekilde yapıyoruz. 
Son.
Sonuç olarak, bir menü bağlantısına tıkladığınızda bir navigasyon efekti elde ettik ve aktif hale geldi. Ancak tüm sayfalardaki grafik tasarım, aşağıdakiler dışında neredeyse aynı olduğu için aktif bağlantı, daha sonra gezinme yanılsaması yaratılır, ancak aslında başka bir sayfaya geçiş vardır.
Bu şekilde tasarlanan menü, mobil cihazlar... Ekran boyutu küçüldüğünde, resimler alt alta kaymaya başlar. yapmak için uyarlanabilir tasarım, sert ayetler için tablolar kullanmanız gerekir. Ama bu başka bir hikaye ve daha gelişmiş bir teknik. O zamana kadar bak farklı seçenekler menünün grafik formülasyonu. 
İlk adım, resmi olarak böyle bir terimin olmadığını açıklığa kavuşturmaktır. Genel olarak, dinamik bir menü, içeriği bazı dış koşullara bağlı olarak kullanıcının çalışması sırasında değişen bir menü olarak anlaşılabilir.
Bu durumda gelir Bu belirsiz formülasyona dahil olmasına rağmen, daha basit ve daha sıradan olan bir konu hakkında. Menü dinamikse (programın kurulumunun içinde değişikliklere yol açtığını unutmayın) ve Microsoft tarafından icat edilen özellikle değiştirilebilir bir "Belgeler" menüsü bile varsa, o zaman aşağıdakileri içeren bir menünün nasıl organize edileceği hakkında konuşmayı öneriyorum. verileriniz ve bu süreçte sizi değiştirilebilir.
Windows 95'in piyasaya sürülmesiyle, Microsoft vurguyu "dosyalar" gibi sistem programlama gizmoslarından herkesin anlayabileceği şeylere kaydırmaya çalıştı iş adamı"belgeler". Bunun için dosya türleri arasındaki ilişki güçlendirildi ve bunların açılması şiddetle önerildi. çift tıklama fareyi daha önce başlatılan bir uygulamadan değil, doğrudan belge simgesinin üzerine getirin. Eh, bu bir yenilik değil ve prensip olarak "Açık" pencerede diskleri tırmanmaktan daha uygun bir şey.
Şirket yem olarak, açılan son dosyalara daha hızlı erişim sağlamak için tasarlanan menüye "Belgeler" öğesini koydu. Bu yenilik zaten eleştirildi, size sadece ana şikayetleri hatırlatacağım: sistem açılan menüyü ayarlamakla iyi başa çıkmıyor. en son belgeler, menü darmadağın, belgeler sıralı değil ve tematik olarak yapılandırılamıyor ve son olarak, hepsi sunulmuyor.
"Belgeler" menüsünü modernize etmek için bir düzine kez denedim ama gerçekten kayda değer hiçbir şey çıkmadı. Başka bir seçenek önerebilirim. Sistem menüsünde, ilk seviyesinde, benimsediğiniz belgelerin gruplara bölünmesine (konu, zaman, tür vb.) ve alt menü sistemine karşılık gelen erişimi açan bir veya daha fazla öğe olduğunu ve alt menü, emrinizde olan tüm belge dosyalarınızı içerir, oluşturuldukları veya silindiklerinde kompozisyonları güncellenir, diskteki dosyaların hareketini takiben otomatik olarak bir menüden diğerine aktarılırlar.
Normal seçenek hızlı erişim, belgeleri görüntüleme ve arama? Öyleyse, böyle dinamik bir menüyü uygulamanın armutları bombalamak kadar kolay olduğunu unutmayın. Çalışma dizinlerinizi diskteki ana menüye karşılık gelen dizine yerleştirmeniz yeterlidir. Kısayolları değil, canlı dosyaları olan dizinlerdir. Bunu yapın ve orada saklanan belgelerin her birine menü aracılığıyla hemen erişebileceksiniz.
Ama her şeyin tik tak gibi görünmesi için yine de kurcalamanız gerekiyor. Kullanılmalı uzun isimler daha sonra belgeler içeren özel menünüz insan türü... Bu, Docs, Doc1, vb. gibi kalpten DOS mürekkep balıklarını terk etmenizi gerektirecektir. Boşver, şeyleri özel isimleriyle çağırmaya alışmanız ve sekiz harfli yeraltı takma adlarını unutmanız gerekir.
İsimleri düşünmek zorunda kalacaksınız. Daha önce de söylediğim gibi, iç içe dizinlerin sayısı 3'ü geçmemeli, yani maksimum 4 seviye. İsimleri, içerdikleri belgelerin isimleri gibi çok uzun yapılmamalıdır. Aksi takdirde, menünüz ekranda önce soldan sağa, sonra tekrar ileri geri bükülür. Fareyi kovalamaktan bıktınız. Kelimeleri tekrar etmekten kaçının. Dizine ve buna bağlı olarak alt menüye "Sözleşmeler" adı verilirse, içinde yer alan belgeleri "139-45 tarihli ..." olarak adlandırmak gerekli değildir. Sözleşmeler klasöründe olduğu için bunun bir sözleşme olduğu oldukça açıktır. Ayrıca belgeyi tanımlamak, içeriğini yansıtmak için kaderin (veya isterseniz ekranın genişliğinin) tahsis ettiği birkaç kelimeyi kullanmayı deneyin. Sayı ve tarih mükemmel bilgilerdir, ancak bu belgenin ne hakkında olduğunu hemen hatırlamanız olası değildir.
Ek çaba pahasına, alt menü ve nihai belge, davalar, çekimler ve diğer kötü ruhların adlarından oluşan zincir içinde anlaşmaya varabilirsiniz. Göz için daha keyifli ve ekranda düzgün bir şekilde oluşturulmuş cümleleri okumak ve yabancı bir temsilciyle olduğu gibi bir bilgisayarla bozuk Rusça iletişim kurmamak sizin için daha az yorucu. tüzel kişilik... Örneğin, bir belge "Bir tren istasyonunda bir deponun kiralanmasına ilişkin 1996 sözleşmesi" ifadesiyle açıklanıyorsa, aşağıdaki menü zincirini yapabilirsiniz: "Anlaşma" - "1996 için" - "kiralama" - " tren istasyonundaki depo . Belki de "tren istasyonundaki depo" dosyasının adı birini çarpıtacaktır, ancak önünde sıralanan dizin adları zinciri dikkate alındığında her şeyin doğru olduğu ortaya çıkıyor.
Bu şekilde düzenlenen dinamik bir kullanıcı menüsü dezavantajlarına sahiptir. İlk olarak, sistem her zaman yeni bir dosya oraya ulaştığında (mevcut olanı silerek) menüyü hemen güncellemez. Görünüşe göre, çoklu kullanım ve çoklu görev labirentlerinde bir yerde, menüyü yenileme ihtiyacıyla ilgili bir komut takılıyor. Biraz tatsız, ama çok sık olmuyor ve arabayı yükledikten sonra menü kesinlikle diskte kayıtlı olana karşılık gelecek. (Bu, bu gibi durumlarda her seferinde makineyi yeniden başlatmanızı önerdiğim anlamına gelmez, genellikle "Explorer" içindeki dizini tuşuna basarak yeniden okuyarak yapabilirsiniz.) içinde çalışan dosyalar Windows dizinleri... Kullanıcı bilgilerinin güvenliği konusunda endişelenmeniz gerektiğinden, oradan "Ana Menü" klasörünü çıkarmanız ve izlemeniz gerekecektir. yedekler, kalıntıların temizlenmesi vb. Üçüncü sıkıntı psikolojik niteliktedir - ilk başta çalışma dizinlerinizi diskin kök içindekiler tablosunda değil, "Ana Menü" de bir yerde görmek çok olağandışıdır. Ama geçer - alışırsın.
Gizli menü öğeleri
Menünün içeriğini basitleştirmenin ve dolayısıyla kullanım verimliliğini artırmanın bir başka yolu, normal çalışma sırasında bir kısmını gizlemektir.
V pencere menüsü 95 öyle şeylerle dolu ki normal iş kullanmak gerekli değildir. Bunlar, uygulama kaldırma programlarından kısayolları içerir, çeşitli dosyalar Benioku ve diğer metin bilgisiüreticilerden, kayıt programlarından ve gönderilecek formlardan e-posta... Burada, yalnızca yazılım sızlanmaya veya şüpheli davranmaya başladığında kullandığınız hizmet planının yardımcı programlarını da ekleyebilirsiniz. Günlük rutinler için bilgisayar hijyeni en uygun (ve yeterli) bir yardımcı programın hizmetlerini kullanmaktır otomatik yürütme Disk taraması ve manuel birleştirme yerine Plus'tan System Agent. Ve eğer öyleyse, bu programları sürekli olarak menüde tutmak için hiçbir neden yoktur.
Ancak, menüdeki her şeyi menüden çıkarmayın. şu an gereksiz görünüyordu. Örneğin, birçok uygulama kaldırırken, programın kendisine değil, tam olarak menüdeki Kaldır kısayoluna başvurur. Tanrı onların yargıcıdır, ancak kısayol kaldırılırsa, daha sonra uygulamayı normal şekilde tıklamak mümkün olmayacaktır. Ayrıca hiçbir şeyi atmadan menüyü basitleştirmenin basit ve acısız bir yolu var.
Windows 95, DOS gibi, gizli dosya ve dizin kavramına sahiptir. NS rutin çalışma Sistem, "Gizli" onay kutusu seçili olan dosya ve dizinleri göstermediği için bunları ekranda göremezsiniz. Bu bayrak, dosya özellikleri penceresinde kontrol edilir ve temizlenir. Bu tür nesneleri görmek için, "Gezgin" de "Görünüm" / "Seçenekler" menüsüne gitmeniz ve "Tüm dosyaları göster" modunu etkinleştirmeniz gerekir.
Bunu dene. Hiçbir şeyi silmeden, günlük işinizde size uygun olan iç içe seviyeler ve öğelerden oluşan bir yapıyı sistem menüsünde toplayın. Doldurmanın geri kalanını gizli yapın, olarak işaretleyin. ayrı etiketler hem dosyalar hem de tüm dizinler ve ilgili özniteliklerinin ayarlanması. Bunu her tür dosyayı görüntüleme modunda yapmak daha iyidir. Egzersizi tamamladığınızda, ekran modunu Normal olarak değiştirin; gizlenmiş dosyalar görünmezler ve emeğinizin sonuçlarına bakın.
Menü daha basit ve daha kullanışlı hale geldiyse, Windows 95 arayüzüne bir tane daha eklemeyi başardınız. en kullanışlı ayar... Ne zaman toplamaya başlaman gerekecek sistem sorunları(ve bu, ne yazık ki, oldukça sık olur), sadece "Gezgin" deki tüm dosyaların görüntüsünü açın ve emrinize amade olun tam set menü öğeleri.
Prensip olarak, içeriği C: \ Windows \ Desktop klasörüne bağlı bir masaüstü için benzer bir yaklaşım kullanılabilir. Ancak, bir masaüstü için, sistem yalnızca kısayolları değil, aynı zamanda yerleşim sırasını da (yapılandırma kayıt defterinin derinliklerinde gizlidir) saklar, bu nedenle makinemde görüntüleme modunu değiştirirken, sistem simgeleri topladı. alfabetik sıra... Hangi, doğal olarak, bana uymadı. Birden çok masaüstü düzeni oluşturma sorunu çözülebilir, ancak farklı bir şekilde daha iyi.
Windows 95'te (bugünkü konuşmanın aksine) menüleri ve masaüstünü düzenleme olanakları burada bitmiyor. Herhangi bir kullanıcı, denemeye zaman ayırırsa ve standart ve iyi bilinenleri biraz alışılmadık bir şekilde uygulamaya çalışırsa, işyerini optimize etmek için yeni yaklaşımlar bulabilir. sistem Araçları Microsoft'un cephaneliğinden.
Roman Sobolenko
Dipnot: Hedef. Başvurmayı öğrenin HTML öğeleri(listeler ve köprüler) ve CSS özellikleri(görüntüleme modeli, köprü sözde sınıfları) bir web sayfasında bir navigasyon sistemi oluşturmak için.
Bir sayfaya bir dizi köprü içeren bir menü yerleştirmek, bir web tasarımcısının pratiğindeki önemli görevlerden biridir. Tüm sete bakarak kullanıcının dikkatini yormamak için linkler genellikle kategorilere göre gruplandırılır ve ana menüde sadece kategorilere yer verilir. Yalnızca bir kategori seçtiğinizde ilgili bağlantılar (veya alt kategoriler) görüntülenmelidir.
Kural olarak, bu tür dinamik menüleri kullanarak oluşturmak gelenekseldir. Javascript dili, bir web sayfasının öğeleriyle herhangi bir karmaşıklık karmaşıklığı gerçekleştirmenize izin verir. Bununla birlikte, herhangi bir tasarımcının hayal gücünü karşılamasa da oldukça basit ve güzel bir CSS çözümü de var. Adım adım düşünelim.
- Visual'i Başlat Web Geliştiricisi(veya Görsel stüdyo) ve yeni bir HTML belgesi oluşturun.
- Head öğesinin içine sayfa için uygun bir başlık girin.
- Açılış etiketini girin .
- Belgenin gövdesinde, her öğesi bir bağlantı listesi içeren sırasız bir liste (ul) olarak bir dizi kategori oluşturun (örneğe bakın).
- Popüler yemekler
- italyan gıda
- atıştırmalıklar
- atıştırmalıklar
- tatlılar
- Meyveler
- Tatil için hediyeler
- yıldönümleri
- Yeni yürümeye başlayan çocuklar
- Doğum günü
- Tebrikler !!!
- Fiyata göre seçim
- 1000 ruble'den az
- 1000 ila 1500 ruble
- 1500 ila 2000 ruble
- 2000 ila 3000 ruble
- Masraflı
- Meyve ve sebzeler
- Kuru Meyveler ve Kuruyemişler
- Meyve sepetleri
- meyve dağları
- Sağlıklı yiyecek
- Pestisit yok
- Çiçekler
- Doğal çiçekler
- Bahçe çiçekleri
- "Konuşan" çiçekler
- Kurumsal hediyeler
Bağlantıların ve kategorilerin adlarını kendiniz bulun. id özelliğinin olması önemlidir. harici liste MainMenu değerine sahipse - o zaman bu tanımlayıcı tarafından kendisine özel bir stil atanacaktır).
- Popüler yemekler
- Stil sayfanıza aşağıdaki kuralı ekleyin:
#MainMenu> li (kayan nokta: sol; liste stili türü: yok;)
Düzenleyici penceresini bir görünüme bölerek belge ekranındaki değişiklikleri izleyin kaynak kodu ve bir kurucu. Belirtilen stil kuralı uygulandıktan sonra, harici listenin (li) öğeleri yatay olarak konumlandırılır (sarma nedeniyle):
Pirinç. 7.1. - İç içe bağlantı listelerinin görünmez olmasına izin verin (bunlara display: none; property ekleyin) ve yalnızca ilgili kategorinin adının üzerine geldiğinizde görünür. Vurgulu sözde sınıf seçiciye sahip sonraki kuralın anlamı şudur: bir liste öğesinde (li) yuvalanmış, üzerine gelinmiş (: vurgulu) ve id = # MainMenu olan bir öğede yuvalanmış bir liste (ul) için , görüntüleme yöntemi blok haline getirilmelidir (görünmez olmamalıdır):
#MainMenu li: vurgulu ul (ekran: blok;)
Geliştirmekte olduğunuz belgeyi kaydedin, bir tarayıcıda açın ve menünün doğru çalıştığından emin olun.
- Prensip olarak, mekanizma çalışır - estetik taraf kalır.
- Menüde (kural #MainMenu a) istenen rengi (renk), yazı tipini (yazı tipi) herhangi bir iç içe yerleştirme düzeyinin bağlantılarını atayın ve ayrıca alt çizgiyi kaldırın (metin-dekorasyon).
- Kategori listesi öğelerini atayın (kural #MainMenu> li) arka plan rengi(arka plan), dolgu ve kenarlık-sağ.
- İç içe bağlantı listesinin öğelerine (#MainMenu li li kuralı) kategori listesindekiyle aynı arka plan renginin yanı sıra altta hafif bir girinti ve kenarlık atayın. Ayrıca, liste stili tipi işaretleri kaldırın.
- Bağlantılar listesinden kenar boşluklarını ve dolguyu kaldırın (#MainMenu li ul kuralı).
Küçük bir sorun, bazı kategori listesi öğelerinin üzerine geldiğinizde genişliğinin artmasıdır. Bunun nedeni, bir liste öğesinin genişliğinin, iç içe liste de dahil olmak üzere tüm içeriğin genişliği tarafından belirlenmesidir. Ancak, yuvalanmış listeyi normal akışın dışına atar ve mutlak olarak konumlandırırsanız, genişliği artık ana öğenin genişliğini etkilemeyecektir. Bu nedenle, bağlantılar listesi için mutlak konumlandırma ve kategori listesinin öğeleri için göreli konumlandırma belirtin. Tarayıcınızda kontrol edin. Ardından sol ve üst özellikleri ayarlayarak yuvalanmış listenin kabına göre konumunu hassaslaştırın (açılır listeyi çok alçalmayın, aksi takdirde içinde bir bağlantı seçmeye çalıştığınızda kaybolacaktır).
Kategori listesinin öğelerini göreceli olarak konumlandırmak neden gerekliydi? İlgili kuralı kaldırın, her şey sizin için netleşecektir.
- Son bir dokunuş ekleyin: fareyle üzerine gelindiğinde her iki listenin öğelerinin arka plan rengini biraz değiştirmesine izin verin (#MainMenu li: vurgulu kuralı).
Nihai sonuç aşağıdakine benzer olmalıdır.
Hiç "IE için CSS'de dinamik bir açılır menü yapamazsınız" ifadesini duydunuz mu? eminim evet. Ve ne, buna inanıyor musun? Bu doğru, daha iyi inanma.
Bu yazıda ulaşmak istediğimiz hedef
Bu makalenin amacı, IE için tamamen CSS'de yapılmış bir açılır menü oluşturmaktır. Bu ayardan başlayarak, bu tür bir menünün diğer çoğu durumda çalışmasını sağlamak için görevi genişlettim. ünlü tarayıcılar(yaklaşık olarak çevrildi: yorumlardan bu tarayıcıların Opera 7.x ve en son sürümler Firefox'ta).
Bu makalede ulaşmak istediğimiz hedef, prensipte aşağı yukarı genel eğitim, yani. vermek Genel fikir tarayıcıların bazı "gizli" ve nadiren kullanılan özellikleri hakkında.
Ayrıca, özellikle meraklı olanlar, bu makalede, standart olmayan belirli sonuçlara ulaşabileceğiniz bazı püf noktaları bulabilirler. Geliştiriciler için bu makale bir yansıma nedeni veya yeni fikirlerin kaynağı olabilir.
Okuyucunun seviyesini nasıl temsil ederiz.
Aslında bu makaleyi "gelişmiş" olarak işaretlemeyi düşünüyordum. Ancak en deneyimli geliştiricilerin bile makalede yazılanları iyi anlayamayacağından eminim. Kısacası, okuyucu CSS'nin temellerini bilmeli ve
HTML.
Bu menünün diğerlerinden farkı nedir?
CSS'de yapılmış menüler için nette uzun süre aradım ama IE'de aksaklık olmadan çalışacak tek bir çözüm bulamadım. Ancak, birçok buldum ilginç fikirler, bu da beni burada açıklanacak olan sonuca götürdü. Evet, kodum da mükemmel değil, ancak tüm hataları düzeltmek için zamanım yok. En ilginç alternatif çözüm Gördüklerimin tümü (CSS kullanan), LI öğeleri için fareyle üzerine gelme sözde sınıfını kullanmaya dayanıyor. Ve bunun mümkün olduğunu asla düşünmedim ve IE için komut dosyaları olmadan bir açılır menü yapmanın mümkün olduğunu asla düşünmedim ...
Benimki ile diğer menüler arasındaki temel fark, benimkinin IE'de çalışmasıdır. Gördüğüm tüm çözümler, LI öğesini şu öğe için ana öğe olarak kullanıyor: hover sözde sınıfı, ancak Microsoft bu sözde sınıfın yalnızca
A öğesi. Çoğu site, menülerinin yalnızca Opera tarayıcıları 7.x veya Mozilla. Ancak bu tarayıcılar, kullanıcıların yalnızca yüzde beşi tarafından kullanılıyor! Evet, bu tür menüler bu tarayıcılarda iyidir, ancak ne yazık ki en yaygın tarayıcıların çoğunda görülemezler. Şimdi bu yanlış anlaşılmayı düzelteceğiz.
Yalnızca CSS menüsü nedir?
Bu, oluşturmak için yalnızca CSS kullanan ve komut dosyası (JavaScript gibi) kullanmayan dinamik bir menüdür.
İnanamıyor musun?
Şimdi koda bir göz atalım:
<
STYLE type
=
text
/
css id
=
"default"
title
=
"varsayılan"
name
=
"default"
>
* :: - moz - herhangi bir - bağlantı br, *: - moz - herhangi bir - bağlantı br (
/ * mozilla için bir çalışma ortamı * /
görüntü yok;
}
div #menü * (
imleç: işaretçi; / * çünkü IE metin imlecini gösteriyor
bağlantı etkin değilse * /
}
Engelli (
kırmızı renk! önemli;
arka plan: yok! önemli;
}
Div #menüsü (
arka plan: # F5F5DC;
yükseklik: 15 piksel;
beyaz - boşluk: nowrap;
genişlik: %100;
}
Div #menü .a (
arka plan: # F5F5DC;
kenarlık: 1 piksel katı # F5F5DC;
renk: # 000000;
metin - dekorasyon: yok;
}
Div #menu .a tablosu (
Ekran bloğu;
yazı tipi: 10 piksel Verdana, sans - serif;
beyaz - boşluk: nowrap;
}
Böl #menü tablosu, div # menü tablosu a (
görüntü yok;
}
Böl #menu .a: üzerine gelin, div # menü div.menuitem: üzerine gelin (
arka plan: # 7DA6EE;
kenarlık: 1 piksel katı # 000080;
renk: # 0000FF;
kenar boşluğu - sağ: - 1 piksel; / * Opera ile ilgili bir sorunu çözer
sağ kenarlık görüntülenmiyor * /
}
Böl #menu .a: vurgulu tablo, div # menü div.menuitem: vurgulu tablo (
arka plan: #FFFFFF;
kenarlık: 1 piksel katı # 708090;
Ekran bloğu;
pozisyon: mutlak;
beyaz - boşluk: nowrap;
}
Böl #menu .a: vurgulu tablo a, div # menü div.menuitem: vurgulu tablo a (
kenarlık - sol: 10 piksel katı # 708090;
kenarlık - sağ: 1 piksel düz beyaz; / * bir atlama problemini çözer * /
renk: # 000000;
Ekran bloğu;
dolgu: 1 piksel 12 piksel;
metin - dekorasyon: yok;
beyaz - boşluk: nowrap;
z - indeks: 1000;
}
Böl #menu .a: vurgulu tablo a: vurgulu, div # menü div.menuitem: vurgulu tablo a: vurgulu (
arka plan: # 7DA6EE;
kenarlık: 1 piksel katı # 000000;
kenarlık - sol: 10 piksel düz # 000000;
renk: # 000000;
Ekran bloğu;
dolgu: 0px 12px;
metin - dekorasyon: yok;
z - indeks: 1000;
}
Td (
kenarlık - genişlik: 0 piksel;
dolgu: 0px 0px 0px 0px;
}
Menü seçeneği (
yüzer: sol;
kenar boşluğu: 1px 1px 1px 1px;
dolgu: 1px 1px 1px 1px;
}
Menü seçeneği * (
dolgu: 0px 0px 0px 0px;
}
#başka (
}
#moz (
}
#moz :: - moz hücre içeriği (
yükseklik: otomatik; görünürlük: görünür;
}
#other :: - moz-cell içeriği (
yükseklik: 1 piksel; görünürlük: gizli;
}
#Kulp (
genişlik: %100;
}
<
TABLE id
=
holder
>
<
TR
>
<
TD id
=
"other"
>
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>Dosya<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>beni tıkla
<
TR
>
<
TD
><
a href
=
#3>Kaydetmek
<
TR
>
<
TD
><
a href
=
#4>Kapat
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Yardım<
BR
>
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>dizin
<
TR
>
<
TD
><
a href
=
"#14"
>Hakkında
<
TR
>
<
TD id
=
"moz"
>Mozilla'ya özel menü!
<
DIV id
=
"menu"
>
<
DIV
class=
"menuitem"
>
<
a
class=
"a"
href
=
"#"
>Filezilla
<
TABLE
>
<
TR
>
<
TD
><
a href
=
#2>Açık
<
TR
>
<
TD
><
a href
=
#3>Kaydetmek
<
TR
>
<
TD
><
a href
=
#4>Kapat
<
DIV
class=
"menuitem"
>
<
A
class=
"a"
href
=
"#11"
>Helpzilla
<
TABLE
>
<
TR
>
<
TD
><
a
class=
"disabled"
>..
<
TR
>
<
TD
><
a href
=
#13>dizin
<
TR
>
<
TD
><
a href
=
"#14"
>Hakkında
<
BR
>
Neler oluyor, neden her şey çalışıyor?
Hemen rezervasyon yapacağım, bu yazıda size öğretmeyeceğim CSS kullanarak... Bu nedenle, doğrudan menünün nasıl çalıştığına - ": vurgulu" sözde sınıfına gidelim. Evet, tam olarak bu sınıf. Onlar. bir seçici, ": vurgulu" ifadesini içeren başka bir seçiciden miras alabilir. Bizim durumumuzda, "A: Hover TABLE", "
Arkadaşlarınızı VKontakte'de ücretsiz olarak aldatın
Yeni başlayanlar için yatırım yapmadan İnternetten gerçekten nasıl para kazanılır Yatırım yapmadan İnternetten para kazanmanın gerçek yolları
Terfide davranışsal faktörler ve bunları iyileştirmeye yönelik çalışma yöntemleri
VKontakte sayfasına trafik nasıl bulunur ve artırılır
Honor Phone'da Hızlı Şarj Uygulaması