24 Aralık 2012, PAZARTESİ

Html5 Css Kolay Drop Down Kategori Menüler Ayrıntı Ve Özet Öğeleri

Bu video derste size açılır trippin bir ayrıntı araya öğreneceksiniz Menü sistemi hangi açılan menü sistemleri oluşturmak için en kolay yolu olabilir ne zaman yeni html5 ayrıntıları ve özeti elemanları, HTML standardize hale Ayrıntılar ve özet kontrolleri ile henüz tüm tarayıcılarda işe yaramadı Sadece Google Chrome'da çalışır o outta ya da en popüler tarayıcılar Şimdiye kadar bu yüzden biz şimdi onunla deneme nerede ve biz kesinlikle bunu bir web sitesi geliştirme kullanabilirsiniz zaman bu iki unsurun tüm tarayıcılarda standart çalışmalarını haline ve çok yakında gerçekleşmesi gerekir Bu siz

i araya öğrenme olacak ne bitmiş ürün birisi olarak ayrıntıları eleman tarafından HTML bilmek Özellikle yerli açık ve kapalı davranışlara sahip yönelik ancak yerli davranış içinde içerik olduğunu Bize yerinde CSS ve JavaS

cript kodu için gereksinimini ortadan kaldırır bu tür büyü o doğal olur gerçekleşmesi için Bu ana menü öğesi ayrıntıları unsurdur elemanı ayrıntıları ve özet elemanı aslında ne olduğunu bir etiket yapar ama bu ele

“Ders Kodu: http://www.developphp.com/video/CSS/Drop-Down-Category-Menus-details-and-summary-Elements Menü sisteminde açılan tahrik HTML5 ayrıntıları monte öğrenin...”
Adam Khoury

manlar doğru beslenme ayrıntıları ne ben menü öğesi biri yazdı Burada ama benim özet eleman boyun istiyorum Benim için yetersizlik Buraya daha sonra bu sadece normal ayrıntılar eleman etiket ve bağlantı Tek bir etiketi kullanan bağlantılar Çok oluşturmak için basit ve karmaşık bir betik var bu çok karmaşık bir tip şey değil çünkü artık çok fazla zaman harcamak değilim Dur açıklayan Sadece gideceğiz kulüpler düz gövde elemanının benim çıplak kemikleri html5 web belgey

Html5 Css Kolay Drop Down Kategori Menüler Ayrıntı Ve Özet Öğeleri Resim 1 Html5 Css Kolay Drop Down Kategori Menüler Ayrıntı Ve Özet Öğeleri Resim 2 Html5 Css Kolay Drop Down Kategori Menüler Ayrıntı Ve Özet Öğeleri Resim 3 Html5 Css Kolay Drop Down Kategori Menüler Ayrıntı Ve Özet Öğeleri Resim 4

e Ben hatları bunu kapatmak bir çift aşağı gitmek 8 kalkınmayı kurmak ediyorum ve gelişim içinde bir kimliği olduğunu vermek onun sol menüye eşit ve yardımcı olacak bizim CSS ile yaptığımız sadece hedeflediğim iki kez uzay vuracak sol menü atıf yapıldı lazım Düzgün girinti ve sonra benim ayrıntıları elemanı benim ilk ayrıntılar eleman çıkmak olacak Birkaç satır aşağı gitmek i kapatmak emin olun ayrıntıları elemanı ve ben bu iç istediğiniz ilk şey ayrıntılar eleman Bir özet elemanı şimdi özet eleman yok ile Eğer sahip olduğu, aksi

takdirde ayrıntıları eleman etiket sağlar Varsayılan etiket zirvesi menü öğesi olmuştur biri ben sağ altında şimdi benim summary elemanı emin olun yakın ve bu unsur bu etiketi Bütün bunlar bir metin kardeşler olacak Onlar tüm ayrıntıları elemanın çocukları olacak alt yukarı alakalı böylece yapabilirsiniz Bir elemanının bkz Bir kardeş özeti öğesi içinde bu ikisi olduğu öğesi var değil ayrıntılar elemanı çocukların yakın ama bir Saat pound işareti eşittir Yeni tam ne olursa olsun web adresi hedef nerede onların Oranı gidin ve en bu verelim gereken sayfa etiket alt kategori bir Bay sadece almak esaslı bir satır aşağı git başka ve başka ve bu bir CP yapmak Swansea öylesine sen hale getirebilir ne bakmak istiyorum Gözat bu noktada bakın En sevdiğiniz tarayıcınıza bu Dreamweaver sadece burada ayrıntıları öğesi var f12 BC basabilirsiniz Ben üzerine tıklayın ve eğer bana biraz içine gizlenmiş içeriğini gösterir hangi burada üç bir unsurdur özet unsurdur çünkü özet elemanı görebilirsiniz Sadece sana ne ben göstereyim ayrıntıları elemanı bir etiket vermek için tasarlanmıştır ortalama Ben kaldırırsanız, açıklama dışarı o özet elemanı Basın f12 sadece varsayılan diyor Kelime detay detay elemanı için etiket Ben yerine geri özet eleman koyarsanız ama bunu görebilirsiniz ben demek istedim ne diyor ve benim göstermek nasıl o ok kaldırmak ve Bunları tasarım özet elemanının kendisi yapmak düğmeler gibi bakmak Bir düğme gibi bakmak ve alt kategoriler yapabilirsiniz Şimdi sadece bu anlamsız kapmak oluyor düğmeleri gibi görünüyorsun tüm çocuklar, tüm ayrıntıları eleman ve sağ bunun altında gitmek ama bu başka biri altında başka biri olsun ve bunun altında başka biri şimdi ben onları çok Sadece değiştirmesine izin için sahip görebilir söylemek istiyorum Bu kez her 3 bu 4 görmek ve isterseniz etmek Eğer her biri farklı uzunlukta olduğundan emin olun olabilir bu yüzden hepsi aynı yapmak onun GED ISH değiliz O ve sonra belki kendi makyaj sadece koymak ve bir adam için birleşik şimdi menü öğesi ne var bir göz atmanız O içine teleskop daraltmak için gidiyor 3 ve yoksul Bizim belgeye ve biz-ebil yapmak ilk şey stil öğesi hedef olduğunu gövde elemanı biz istemiyoruz 20 piksel çünkü biz bu şekilde sadece kendi Margie özelliğini dedi herhangi isteğe bağlıdır sayfanın etrafında marjinal alan şimdi hedef bakın bu sol menü ruh take kontrolü yapmak istiyorum ve diyez işareti bıraktı menüsünde birkaç satır bizim kıvırcık bas iyi açın koymak kıvırcık kapatmak ancak kapanış kıvırcık yer şu anda iki özellik Ben vereceğim Burada sol menüyü vermek ile vardır belki on beş yüzde ve erkeklerin hangi o olabilir asgari 150 piksel olan ve bu nasıl kurulacağını gösterir sizin dinamik hangi o herhangi bir streç böylece ekran boyutları, kullanıcı daha sonra bir cihaz yapmak ve vardır Onların ekran işgünü bir olurdu tarayıcı penceresini yeniden boyutlandırmak küçülür Menü komiteleri 150 piksel ile en az ve sol menü sadece tüm detay seviyorum tutan eklenir elemanları ve CSS hedeflemek istiyorsanız Bu detaylı unsurlar bu ve bunun gibi yapabilirsiniz CSS tanımı bu kural hedefleyecek oldu tüm ayrıntıları elemanları ancak bu örneğe Ben herhangi özelliklere sahip gitmiyorum Sadece hedef ihtiyacı var size göstermek istiyorum Her her eleman bu kurala ve biz gereken bir sonraki şey ile bunu yapabilirsiniz yer Bana bir plaj içinde görebilirsiniz HTML açalım ayrıntılar eleman böylece en önde gidelim ve o hedef özet elemanı vardı Bizim CSS böylece biz menü sol içeri menü bırakmış olacak ve bir çocuk% olarak uh menü tüm detay elemanları sol ve sonra ah olan özet elemanları tüm% hedefleyebilir çocuk elemanlar gördüğünüz detay elemanları ve biz bu yapmak istiyorum Biraz benim evim Averell küçük el dönüşür bu şekilde işaretçisi imleç O biriyle sinyal işaretçi gibi parmak ve size 52 olacak platin olmak istiyorum ne Bana bir açık mavi oldu o benim durumda istersen renk bir arka plan vermek marjı etrafında altı Piksel onlar değil bu şekilde tüm yol var Tüm birbirinin üstüne bir dolgu Tamam 8 piksel yolu üzerinde kalabalık sözler içeride düğme o tamam çevrelerindeki biraz boşluk beri çok özet unsur düğmesi gibi hareket ediyor Bizim ana kategori düğmeleri yapacağımız Sadece kolon koyabilirsiniz CSS bir sözde seçici olan liman devleti kullanmak Herhangi bir öğe için liman ve değişecek sayfadaki tasarımı yaparken kullandığı fare üzerinde gezinen böylece hangi değişiklikler olduğunu Açık mavi arka plan Burada burada büyük bir renk ve istediğiniz herhangi bir renk olabilir ve aslında kullanabilirsiniz düğme grafikleri size olamaz istiyorsanız URL'ye ancak arka plan özelliği yol ve sadece ama grafik sen apeks dalgalanma olsun isterseniz ama şimdi bu hızlı örnek öylece kullanım renklerini ben en az bir göz atalım ne var bu yüzden şimdi biz bile küçük bir a hedefli değil bakın elementler eleman detayları içinde CSS ikinci olanlara olsun ve ayrıca düğmeler gibi bakıyor çıkacaktır ve şimdi yapabilirsiniz ya bu Arial kurtulun yapmak istediğinizi güzel bir özellik olduğunu orada o ok tutmak ya da ben şu anda tek hedef sol menüyü kaldırmak için nasıl size göstereceğim menü ayrıntıları unsurları sol içinde ve biz ayrıntılar işaretleyici hedef için gidiyoruz ve ben görebiliyorum Bu tüm standardize edildiğinde burada WebKit işemek Pics böylece sadece koymak ayrıntılar işaretini ve WebKit öneki almak ve o bunu yenilemek ekranda 9 şimdi sayfaya gitmek olduğunu söyledi belki onlar serin çünkü orada onları tutalım küçük oklar gitti demek küçük özellik Şimdi ne yapacağımızı hedef tüm bu küçük rahatsızlıkları olan detay ağıtlar içerde küçük bağlantılar Ne CSS oluyor ve sol menüde koymak oluyor ve sol menü detayları içindeki tüm detaylar var içeride Her bir eleman olacak o ekranı vermek: bu şekilde engellemek Çünkü aynı uzunluğu boyunca tüm yol ebeveyn düğmesi gibi ve biz şimdi bakmak hakkında bana bahsediyorum sana göstereyim Eğer kenarına burada tüm yol boyunca nasıl gidiyor bakınız Bu isteyebileceğiniz serin bir küçük özellik yoksa onlar her yerde duracağım Kelime durur düğmesi menü üzerinden tüm yol genişletmek isteyebilirsiniz bağlantı Bana bir metin dekorasyon dönelim: hiçbiri varsayılan olarak altı çizili değil yani boyutuna metin rengi o 13 yapmak ve marjinal boşluk oldu şimdi ne yaptım ben bunu bir sol kenar verdi yolu yolu kesen bir 18 piksel Eğer üst düğmesi içine amaçlanan görebilirsiniz Size Kullanıcıların yardım edeceğiz şey hangi hangi orada kategori ve marjinal alanda geri kalanında pokus kalmak sadece onlar olduğunu yapacağız şimdi ne birbirinin üstüne tüm olduğunuzdan emin olun O vermek Bir diğer böylece biz orada background-color içinde başka ne göreceksiniz: Daha sonra bu kadar basit ve az düğmeleri içindeki kelimelerin bir dolgu var böylece kap ve marj içine sıkışmış olan Bu da durdurmak gibi steno kullanmak için gidiyoruz eğer Sağ alt sol Sağ üst alt üst sağa sola sonbahar, sol ihtiyacımız tüm şimdi unutma Süper seçici ama onlar bu küçük düğmeleri devlet hover kullanıcının fare onlara üzerine geldiğinde beni onlara arka plan rengini değiştirmek ve biz biz seçerseniz yol çok cesur bach değiştirebilirsiniz Şimdi en bir göz atalım ve biz şimdi var biz renk değişiklikleri gitmek görmek ve haftada yüceltmek için değişiklikler üzerinde ve ben bunun altında sana bir daha küçük hile göstereceğim istediğiniz Sözde seçicisi önce a hedef yani hastalık içindeki küçük düğmeleri her birinde O eleman açar içeriği koyabilirsiniz ve ben yaptım tüm uzay sonra koymak ve ok edildi ve Eğer gerçekten bir URL grafiği kullanmak isteyeyim kullanmak istemem Beni küçük ok görüyoruz ne açık menü tarafından şimdi demek göstermek ve burada iç mekan Eğer herhangi bir HTML kullanabilirsiniz böyle bir şey yapabileceğini Eğer gerçekten istediğiniz sembol karakteri bu çıkmak istemem yerinde karakterin ne yaptığını size gösterilen orada Bunu veya benzeri basit bir şey biliyor Bunu almak ve böylece içerik URL'sini koyabilirsiniz Evet ama URL açık yakın parantez ve burada içinde benim küçük işaretleyici demek nerede Böyle bir domuz ama böyle benim terk sadece edeceğiz ama siz kullanabilirsiniz biliyorum Burada bir görüntü ben sana bu konuda öylesine sen bahis gibi kolay html5 ve css: ve güzel işlevsellik bkz etti Ana kategorileri ile size nispeten küçük bir menü olabilir alt kategori içinde yer alan, ancak bu yol Ana kategori ve benzeri Bunları olabilir dedi benim gibi dikey ya da sayfa boyunca gidiş yatay olabilir, bu yol ve menü hala size ayarlanır CSS emin olmalıyız altındaki düşecek sağ yukarı böylece aşağı altındaki tüm sayfa içeriğini itmek değil ve bu konumlandırma ile yapmak çok kolay artık milyon vardır farklı yollar sen acı tasarlayabilirsiniz herhangi bir tür herhangi bir şekilde davranmasını istediğiniz bir düğme stili yapmak size istemek Farklı CSS seçicileri ve farklı özelliklerini kullanarak Burada var olan go crazy biçimini kullanarak sınırlı hissetmiyorum senin yaratıcılık tamam ben seni html5 o ders memnun kaldım umarım ve CSS kolay peasy açılır menüler.

Açıklama

Ders Kodu: http://www.developphp.com/video/CSS/Drop-Down-Category-Menus-details-and-summary-Elements Menü sisteminde açılan tahrik HTML5 ayrıntıları monte öğrenin. Html5 ayrıntıları ve özeti etiketleri henüz tüm tarayıcılarda çalışmıyor. 4 En popüler tarayıcıların dışında, sadece bugüne kadar Google krom çalışır. Biz şimdi onunla deneme nerede Yani olmasıdır. Bu iki unsurun tüm tarayıcılarda standart ve iş olunca ve biz kesinlikle web sitesi geliştirme için kullanabilirsiniz. Bu çok yakında gerçekleşmesi gerekir. HTML5 ayrıntıları eleman özellikle bunun içinde içerik için yerli açık ve kapalı davranışa sahip içindir. Bu yerli davranış o öğenin varsayılan olur, büyü bu tür gerçekleşmesi için yerinde CSS veya JavaScript kodunu olması gereksinimini ortadan kaldırır. HTML5 özeti elemanı ile birlikte kullanıldığında, ayrıntıları eleman menü sistemleri açılan için biraz uygun görünüyor. Bu ayrıntılar elemanın kullanım amacı olmayabilir, ama bunun için Tamam çalışır, o zaman neden olmasın? Onlar menü sistemleri aşağı dikey veya yatay damla içine yapılabilir.

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

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.7/10

  • 336
    Olumlu
  • 7
    Olumsuz
  • 81
    Yorum
  • 44473
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • Alexander Johnson

    Alexander Jo

    26 Temmuz 2008
  • Kanaal van Dj0fifty

    Kanaal van D

    28 EKİM 2011
  • Machinima

    Machinima

    17 Ocak 2006

ANKET



Bu sayfa işinize yaradı mı?