20 Kasım 2012, Salı

Slidespot Gezinti Sorun - Çözüm Bölüm 2

Bu Ralph O slayt nokta navigasyon menüsü üzerinde çalışmaya devam olmadığını biz önceki video başladı bir sürü gerçekten şimdiye kadar ne var değil mi buna bir benim html elimde bir kuralı reset Ben içinde bunu bazı veren benim sırasız liste kontrol eden bir kural var artan sınır ve pozisyon göreli çok önemli bir beyanı sonra benim liste öğeleri kontrol eden bir kural var yüksek teknoloji olarak orada oturan sola doğru akan o bir hale getirir ki yatay navigasyon menüsü temelde Burada sınır sadece ben de kurtulmak alıyorum olacağım üzerinde neler olup bittiğini görmek isteyen var Sınırın 7

2 menü benimkinden daha şimdi çok yakında ve tabii Krediye vergileri Ekran: Ben kendi yüksekliği ile orada oturup bu yüzden blok Benim çapa Macomb ama şekilli etiketleri biraz daha küçük ihtiva yüksekliği karşılaştırıl

dığında liste öğeleri içinde hepsini görünür vermişti border-radius ile sınır: text-align: text-decoration: font-size: line-height in: sadece orada marjı statik yardım için Benim Sydney üzerine çevrimiçi böyl

“Bu beavory.com kullanılan birine benzer navigasyon menüsü saf CSS versiyonunu yaratmak için çözümdür. Ben önceki hafta bu navigasyon menüsü oluşturmak için deneme...”
Ralph Phillips

ece ben bu navigasyon menüsü oluşturmak için ne tür var senin hedefleri navigasyon menüsü giyer sen um ben bu damla biçimlendirmek istiyorum vardır ve blob Michael'a burada üzerime atlamak üzerine geri ne unutursanız HTML dosyası ve temelde benim navigasyon menüleri bu küçük İspanya var benimde içinde 100 o sınıflandırılmış ya da sınıf blob eşittir var dinle Bunu görebilirsiniz böylece bu damla yapmak gerekir bu yüzden geri CSS vida bu kadar biraz üzerin

Slidespot Gezinti Sorun - Çözüm Bölüm 2 Resim 1 Slidespot Gezinti Sorun - Çözüm Bölüm 2 Resim 2 Slidespot Gezinti Sorun - Çözüm Bölüm 2 Resim 3 Slidespot Gezinti Sorun - Çözüm Bölüm 2 Resim 4

de ve Açıkçası ekran bomba değil: blok şimdi bir kullanıyorum beri hızlı bir çizgi elemanı ve ben de kullanım ekranı şeyler: blok, bir blok yapmak eleman Şimdi zekisin ve muhtemelen muhtemelen sizi eğer Bunun için 00:42 kullanımı ve fikri Ben ettik gerektiğini bile belki olabilirdi ama ben kullanılan vermedi hızlı ve daha sonra bir blok elemanı yol background-color dönüştürürken: onunla olduğunu söyledi yüksekliği ve sınır yarıçapı yani ayarı tarafından o ayarlayarak bir kare yapar yüksekliği 250 içinde öyle border-radi

us: o boyutu var o ben küçük kutu gölge eylem gidiyorum bir disk yapacağız böylece lanet gölge İlk sayı X ofset ikinci sayı sizin neden ofset üçüncü numarası bulanıklık olduğunu ya sen gölge dışarı solma ve tabii biliyoruz konum rengi son sayılar metal kutu gölge için Burada çok önemli bu yüzden benim blob düzgün yapılı daha panoları gibi görünüyor senin büyü pozisyon olduğunu Bu mutlak pozisyon akrabası ile karşılık gelir: pozisyonudur ana ortaklığının hangi sırasız liste sırasız bir çocuk olarak benim blog liste Ben bir pozisyonda olduğumu kesinlikle ve Ayrıca olacak duyuyorum kadar bu Z endeksi yapmak -1 Tamam şimdi bana göstereyim senin Bazı sadece bu tasarruf yapmam etmedi ne olacağını ve ben krom ve yenileme içinde geri atlarsınız bu yüzden şimdi o blah görebiliyorum ama üstünde bulunuyor benim Liste ve ben üst böylece z-index üzerinde görmek istiyorum -1 Ben blob arka planda olmasını isteyip perde arkasında olacak güç öyle değil ön planda o zaman bu masa için ben yapmak istiyorum son şey geldi Bu konuda bir Dengesiz kısmı için ama temelde ben de bir do değilim Myers geçiş efekti temelde Ben değişiyor olduğum için şimdi ölçüm sola kullanılan onun konumlandırma bu yüzden tüm işi de yapabilirsiniz burada sol yaptım, soldan konumunu Tamam komite kelime ben benim ne kadar süre olduğunu 500 milisaniye bıraktı animasyon almak ve ben kasketleri tercih edeceğim out oldukça güzel görünüyor düşünüyorum ve ben sadece bu hat a çoğaltmak için gidiyorum birkaç kez bir ile dört arasında mos veya ateş olacak Chrome ve Safari için WebKit olacak Ben bu yüzden nee opera orada tüm atmak oldu ve ben IE 10 bu hücreyi destekleyecek duydum Ben değilim çünkü iyi henüz bu etkisini göreceksiniz duymak çok güzel yeniden konumlandırma ama başka türlü şeyler blob ilgilenir oldukça iyi gidiyor Şimdi bir sonraki bölümü blob masasının üzerinde konumunu değiştirir tamam olabilecek her sayfaya ilişkin Online olduğumda ne yani ben o demek olduğunu sayfa 1 Benim masa bloguma tam anlamıyla doğru öğeyi bir menü arkasında olmak istiyorum kalem Ben dördüncü sayfada olduğumda blob hemen arkasında olmak istiyorum Orta öğe 4 liste öğesi bu yüzden ben de bu zirve bu konumlandırma ayarlamak zorunda değilim Ben I olabilir her sayfa için masa bunu yapmak için 5 sayfalık web sitesi tarafı var Beş kere bu yüzden sayfa 1 uzay nokta işaret demek Alarm Bu bir soylu seçici olduğunu tamam soyundan seçici benim sayfa 1 HTML gitmek bir durum var bedenim benzersiz kimlik tanımlanır 1. sayfa içinde sayfa 1 diyez işareti sayfa 1 Ben liste öğesi biri olduğu manipüle istiyorum Tamam diyez işareti öğesi bir Üzgünüm öz dilerim Ürünü bir ama burada asıl blok değil 1. sayfa içinde blob konumu bu yüzden go ahead ve bu izin yani bir sayfa içinde benim blog nerede olmasını istiyorsun Ben hallettim çünkü mutlak: Şimdi pozisyon yapmak zorunda değilsiniz buraya damla benim kural ben sadece ben olmak istiyorum nerede söylemek zorunda ve ben bunu istiyorum diyecek değilim Sol inanç üstünden 5 piksel ve 21 piksel nerede düşünmek gerekir Sen bu numaraları olsun Zaten iyi yaptı ve çünkü deneme için çalıştı ve hata sol ve sağ eğitim numarasını bulmak için çalışıyor bu yüzden bana benim tarayıcı var kaydetmesine izin Washington yenilemek ve ben tür bunun olabileceğini istediğini blob hakkı merkezleri Kullanılmış Daha fazla, soldan veya gidiyor eğer yol parçası bile sadece biraz Ben sınır parçası oldu bu sınırları var çünkü biraz uzakta bakmak tamamlanmış ürün Orada benim liste öğeleri sınır kurtulmak o kadar ateşli biraz daha iyi ama hala merkezleri Şimdi biz biraz daha o değiştirebilir silindir benim blob uyarıcı et var silindir bir kez konum aslında öylece tekrarı bu kulüpler var ki birkaç kez hesabınız bir not defteri bazı öylece kontrol artı artı birkaç kez kontrollü Sayfa1 Sayfa2 sayfa 3 öğretmek için sayfa 5 ve ikinci sayfada Benim sayıları 17 olan üçüncü sayfasında 12 sayfaya kadar yakın 307 ve sayfa 5 KSL 40 beş sayfaların her biri için blob yerini kontrol etmeye benim beş sayfalık web sitesi şimdi ben burada yenileme üzerinde kafa onun doğru yerde sayfa 3 sayfa sayfa Bildiğiniz birisi de umut biraz zum kullanır, böylece insanların her türlü Üç dört ve beş tamam şimdi ben de uzaklaştırdınız ediyorum ve en azından bana bir aktif gösterge verir ki çok kötü olmadığını görebilirsiniz Ben olduğum hangi sayfayı aşk o leke yerini ilgilenir böylece yiyecek işe geri üzerinde kafa en en de bu yapalım görelim Sayfa 1 öğesi bir çapa bu nedenle bu olacak ne bu olacak kontrolü yapmak Sınır demir aşk Etkin sayfanın liste öğesi Ben sadece bu çoğaltmak eğer başlayabilirsiniz sen yapmak oldukça kolay oldu 2345 sayfa 2 sayfa 3 sayfa, dört sayfa 5 madde 5 Ben 3 öğe için kulüpler Bu olacak ben aktif olarak bana sayfanın başka görsel göstergesini vermek olduğunu Temelde benim aktif sayfalar biraz var yapacağız Sadece blob ve aynı zamanda koyu kırmızı sınır sahip olacak bu yüzden benim tarayıcı üzerinde bu kafa kaydederseniz Orada yenilemek biz koyu kırmızı sınır aktif sayfa var gitmek overkill kendi kuvvet aktif sayfa yüzden biraz bizim için ne yapabilirim başka ne koduna üzerinde geri gelmek C Ne ona durumunu değiştirmek için gidiyor Öğrenciler 1 öğe öğe listelemek için düşünür üzerinde collin böylece yeşil bir karanlık gölge bir o beş kez yinelenen var ne de hatta ürün yok 3 45 şimdi şimdiye kadar sadece vurgulu kullanarak olabilirdi sözde sınıfı metin çapa ile haberleşmek için ama her kindsa üzerinde gezdirin edebilirsiniz madde Eğer üzerinde gezdirin olabilir görüntü size üzerinde gezdirin yapabilirsiniz liste öğeleri üzerinde gezdirin edebilirsiniz hak bu yüzden şimdi ben bir liste öğesi üzerinde barındıran ediyorum ve bunu içeride çapa etiketi işlemek için gidiyorum nasıl sana tekrar sınır rengini değiştirmek manipüle diyeceğim Bu yüzden benim tarayıcı şimdi ben üzerine geldiğinizde yenileme tasarruf bildirimde ben bile biraz üzerinde gezdirin gereken çapa etiketi almak zorunda değilsiniz liste öğesi bu yüzden bu liste öğenin üzerine onun olacak bir değişiklik getirdiğinizde sınır rengi listedeki bir sonraki gerçekten en önemli parçası olan ve genellikle oluşturur etkilemek bu yüzden ben de liste öğesi öğesi tek öğeler ile devam edin ve denetimi listesi öğeleri değilim akort Hofer basit K inşa etmek Medula kadar bir kayma sol vurgu var blob bu yüzden bir başkan seçme ve bu işlemek için gidiyor öncesinde blog Bu durumda liste öğesi 1 liste öğesi görünüşte hepsi aynı ana öğeye sahip hangi yaptıkları Ayrıca orada çocuk seçicileri yapabilirsiniz bu konuda manipülasyonlara ama biraz var var biraz daha uzun yani bu bir Koltuk seçicisi başına yılda şimdi ne yapacağımı, bu bombayla yapmak Ben bulunduğu üstüne gidiyorum olduğunu 5 piksel sola Olacak olan bu pozisyonda 21 piksel gerçek tutun Ben liste öğesi 1 üzerinde uçan ediyorum ne zaman Beni burada bir kaç başka şeyler yapmak liste öğesi öğesi etkin bir tane devam seçici blob bu olacak arka plan rengi için şarj oluyor ve bir daha liste öğesi öğesi biri aslında bu benim liste öğesini değiştirmek aktif Siyah renk ve görelim font-weight: bold oraya gitmek böylece önemli bir adım şimdi mega kukuleta bu öbek take Bir çoğaltılamaz beş kez gelen o yüzden şimdi sadece biraz görebilirsiniz bakın özledim senin beş kez var Tüm beş defada evet ben beş aynı ve ben öylece oraya Orada güncelleme öğe var öğeler üç öğe 4 ve gerçekten önemli şey madde 5 ve konumunu değiştirir ki ben gerçekten bilmek Benim ikinci, soldan 11 17 piksel kol Benim üçüncü 212 olan dördüncü 307 ve benim beşinci biridir Tamam 40 bu nedenle temelde ben öğenin üzerine geldiğinizde benim blog kendini yeniden konumlandırmak için gidiyor Sol kanattan gelen 117 piksel nereden önce oldu Ben liste öğesi 2 üzerine geldiğinizde bilmiyorum ve ben gerçekten umurumda değil ama Ben, soldan tam 117 Pics olmak engellemek istediğiniz Benim tarayıcı ve yenileme için bu kafa üzerinde kurtarabilir Eğer biz gitmek orada etkisini görmeye başlarsınız Şimdi etkili bir ders gecikme bizim geçiş veya CSS neden olur geçiş Ben bu tetiklemek için benim liste öğeleri üzerinde uçan ediyorum Sadece bir kez daha vurgulamak görürsünüz oraya geri o sınırları koymak blob üzerine ben en kısa sürede üzerinde hareket başlar liste öğesi aslında yavaşlatmada üzerine gelin zorunda değilsiniz ve tabii ki o beş yüz yerine aşağı blog yavaş olabilir milisaniye Eğer bu tam yapabilirdiniz İkinci animasyon o zaman sadece çok yavaş gider ben hızlı eylemi kendim gibi ama orada da bana sadece go ahead ve beşe bu geri geri gitmek izin yüz milisaniye veya yarım saniye Seni benim liste öğeleri bu sınır çekmek o tarayıcı yenileme kaydetmek ve illüzyon tamamlandı hücredir ve tabii ki tıklarsanız ve açık mavi pembe benim blog değişiklikleri basılı ve ben biraz böylece slayt nokta navigasyon size orada alışverişinde olsun bazı yaratıcılık ve bu tür tekniği uygulayabilirsiniz Ben farklı yollar olduğumu düşünüyor Kendine iyi bak.

Açıklama

Bu beavory.com kullanılan birine benzer navigasyon menüsü saf CSS versiyonunu yaratmak için çözümdür. Ben önceki hafta bu navigasyon menüsü oluşturmak için denemek için meydan okudu. Bu video Ben kullanılan CSS üzerinde gider.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Ralph Phillips

Ralph Phillips

Üretkenlik yazılımları ve web geliştirme üzerinde durularak öğretici videolar. Web Geliştirme, HTML, CSS, JavaScript, PHP, Internet, SEO, Flash, Dreamweaver, Excel, Access, Word, PowerPoint, Web tabanlı uygulamalar ...

YORUMLAR



10/10

  • 12
    Olumlu
  • 0
    Olumsuz
  • 7
    Yorum
  • 786
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • After Effects Tutorials w/ Mikey

    After Effect

    24 HAZİRAN 2009
  • Tahir Jahi

    Tahir Jahi

    6 Mart 2006
  • theatre2film

    theatre2film

    12 NİSAN 2006

ANKET



Bu sayfa işinize yaradı mı?