Oksijen Oluşturucu üzerinde tam ekran menüsü hazırlayın

Bunu böyle koyduk, bir sonraki bizle, Sitemize Hamburger simgesini gerçekten eklemeliyiz. Bu kod bloğu kullanılarak yapılır. Anahtarın arkasındaki kodu anlamak için Hamburger.css belgelerini takip edin. Aşağıdaki HTML yapısını kullanarak ekledik: Üretim sitesinde, bu kod bloğu, başlık/altbilgi catchall şablonundaki başlık üreticisinin sağ üst köşesinde veya öğesinde olabilir.

CSS kütüphanesi ile Hamburger Supqueeze’yi başka bir seçeneğe değiştirerek animasyonu değiştirebilirsiniz (30+ vardır). Bazıları: Hamburger-Elastik, Hamburger-Minus, Hamburger-Vortex, anahtarın sermayenin üzerinde kalmasını sağlamak için kod bloğunu çevreleyen div’e bir index-z 1401 verin. Z-Index Capital 1400’dir, böylece bu, ziyaretçilerin açıldıktan sonra menüyü kapatabilmesini sağlar. Bu adımın son kısmı, kod bloğu kodunu hatırlaması kolay bir şeye dönüştürmektir. Örneğimizde, ISO-Menu-Toggle olarak değiştirdik. Bu isteğe bağlıdır. Adım 2: Sermayede Artış Şimdi, bir menü oluşturmak için kullanacağımız sermayemizi ekleyeceğiz. Catchall şablonuna ekleyin ve aşağıdakileri ayarlayın:

Sermaye Tetikleyicileri: Kullanıcılar öğeleri tıkladığında #Open-Modal
Genişlik ve Yükseklik: 100vw, 100vh
Bu varsayılan ayarı% 100 veya 100VW olarak değiştirin. 100vh yükseklik yapın. Bu, sermaye menüsünün tam bir ekran olmasını sağlar.

Yakın sermaye: Tüm işlevler hayır olarak ayarlanmıştır. Sadece JS oxyclosemodal () işlevinin işlevini yerine getirmesini istiyoruz.

Adım 3: Menü Yapma Şimdi menü tuvalimiz olarak sermaye var, gerçek menüyü oluşturmamız gerekiyor. Bunu yapmanın birkaç yolu var. Birincisi, oksijen menü öğelerini gömmek ve arka uçta oluşturduğunuz “tam ekran” menüsünü çizmek için kullanmaktır. Menüde hızlı değişiklikler yapabilmek için bir site sahibine ihtiyacınız varsa bu iyidir, ancak düzenleme açısından biraz sınırlısınız. Diğer uçta, metin öğeleri, bağlantı sarma, tüm menüyü yapabilirsiniz. ve çeşitli yapısal bileşenler. Size en çok stili organize etme özgürlüğü sunar ve siteyi yönetecek kişiyseniz çok iyidir. Ancak WordPress’te varsayılan menü yöneticisini kullanmayın, bu nedenle değişiklik yapmak için bunu doğrudan şablondan yapmalısınız. Daha gelişmiş bir yöntem, menünüzü kod bloğundan eklemek ve CSS üzerinden stil yapmak için PHP’yi kullanacaktır. Bu, istediğiniz gibi düzenlerken WordPress menü özelliğini kullanmanızı sağlar. Örneğin, menüyü iki sütuna bölebilir, benzersiz bir Hover efekti ekleyebilirsiniz, vb … Bu genellikle yaptığımız şeydir, böylece kullanıcılar WordPress yöneticisinden değişiklik yapabilir.
WP NAV menüsünü kaydetme ve girme hakkında daha fazla bilgi.Ayrıca, menü etkinleştirildiğinde benzersiz giriş hareketleri içerecek şekilde Oxygen Builder Animasyon Kitaplığı’nı kullanmanızı öneririz.Daha fazla bilgi için ilgili video eğitimlerini izleyin.Gerçek menüyü yaptıktan sonra, şimdi Hamburger.css bağlayan sistemi ayarlamanın zamanı geldi.Adım 4: Açık/kapanış sistemi (JS kodu) bazı özel JavaScript ve gizli düğmelerin eklenmesi gerekecektir, ancak anlaşılması nispeten kolaydır.Bu JavaScript’i Catchall şablonuna ekleyin.HTML Hamburger’inizi .js dosyası veya diğer yöntemler aracılığıyla girmek için kullanılan kod bloğuna dahil edilebilir.Size kalmış, tek kod bloğunun JS bölümüne koyduk.

/** * Nesneler/nodelistler/diziler için forEach uygulaması, otomatik tip döngü ve bağlam seçeneği * * @prive * @Author Todd sloganı * @link https://github.com/toddmotto/foreach * @param {Array | Nesne | Nodelist koleksiyonu} – Tekrarlanacak öğelerin toplanması, diziler, nesneler veya nodelistler olabilir * @Callback RequestCallback geri arama – her yineleme için geri arama işlevi. * @param {Array | Object | Nodelist} Scope = NULL – Nesne/nodelist/ForEach yineleme olan dizisi, geri çekilirken bu değer olarak kullanılacak. * @retururns {} */ var foreach = function (t, o, r) {if (“[nesne nesnesi]” === object.pototype.tosting.call (t)) için (t) nesnesi. prototip.hasownpperper.call (t, c) && o.call (r, t [c], c, t); else (var e = 0, l = t.length; l> e; e ++) o.call (r, t [e], e, t)}; var Hamburger = document.querysectorall (“. Hamburger”); if (Hamburger.length> 0) {foreach (Hamburger, Function (Hamburger) {Hamburger.AddeventListener (“Click”, function () {this.classlist.toggle (“IS-aktif”);}, false);}) ; } jQuery (‘##iso-menu-toggle’). (‘Click’, function () {// (JQuery (‘. Oxy-modal-backrop’). Hasclass. (‘canlı’)) {// sermaye açık, oksijenin oksijenin oksiklosemodal okssiklosemodal işlevini ();} başka {// sermaye açık değil, bu yüzden açık sermaye jQuery’yi tetikleyen düğmeye tıklayarak simüle ederek açık değil Capital ‘). Click ();}}); Bu kod aşağıdakileri yapar: Hamburger simgesine tıkladığınızda, animasyonu etkinleştiren ve X yapan etkin bir sınıftır.
Bu simgeye tıkladığınızda, sermayeyi açacak (kapanırsa) düğmeyi ( #open-menu ile) tıklar. Açık sermaye ve hamburger simgesi x ise, aynı kod JS oksijen fonksiyonunu etkinleştirir sermayeyi kapatmak için.
Bu tıklamayı oluştururken X Hamburger’e döner. Ve döngü devam ediyor.
Bu kodda dikkate alınması gereken iki şey var:

#ISO-MENU-TOGGLE-Bu, geçiş menüsünü (ve JS) oluşturan HTML içeren kod bloğunun bir kimliğidir.
#Open -modal – yapacağımız kimlik düğmesi ve sermaye açılışını tetikleyecek kimlik öğeleri.
Şimdi yerinde bir kod var. Yapılacak son şey gizli bir sermaye düğmesi yapmak. Sermaye menüsünü açmak için kullanacağımız şey budur. JS ile sermaye açmanın belgelenmiş bir yolu olmadığından, bu en iyi alternatiftir. Bununla birlikte, açılmak ve kapatmak için hamburger kullandığımız ve görseller (x/☰) sunduğumuz için, açmak/kapatmak için hamburger’i tıklamak istiyoruz. Bu nedenle, ziyaretçiler düğmeye tıkladığında, menümüzü açan düğmeyi tıklatır. Sayfada herhangi bir yere düğmeler ekleyin (bu durumda, kod bloğunu da içeren div’e ekliyoruz. Bu div navigasyon çubuğumuzun sağına yerleştirilecek) ve kimliği #open-modal olarak değiştirin. Ardından, düğmeyi gizleyin.
Düğmeyi ekleyin, kimliği değiştirin, URL için Yok
Düzen – Ekran – Yok (gizlemek için)
Ve …. bitmişsin. Yeni tam ekran menünüzün tadını çıkarın! Erişilebilirlik ve SEO (ve diğer hususlar) menünüzü oluştururken erişilebilirliği ve SEO’yu düşünün. Hamburger.css, takip edilecek bazı erişilebilirlik ipuçları var. Doğru ARIA etiketini kullandığınızdan emin olun, her şeyi içine yerleştirin ve bir klavye kısayolunu açıp kapatın. Bunu öğreticiye eklemiyoruz. Bunun hakkında daha fazlasını burada okuyun. Dikkate alınması gereken son bir şey – sermayeniz açık olduğunda, sayfa yine de piyasaya sürülebilir. Yani, ziyaretçiler sayfayı aşağı kaydırırlarsa, sermayenin arkasındaki içerik hareket eder. Anahtarınız statik olarak konumlandırılmışsa, anahtar hareket eder. Korkunç değil, ama ideal değil. Ayrıca, açık sermayede kalıcı bir pozisyona sahip olmasını ve kapalıyken statik/akrabaya dönmesini sağlayabilirsiniz, ancak bu daha fazla JS gerektirir ve ne kadar duyarlı olduğundan emin değilim. Buradaki en iyi çözüm, kaydırmada kalan kalıcı/yapışkan bir başlığa sahip olmaktır. Ardından, marjı menüdeki içeriğe ekleyin, böylece başlık hala tasarıma oynatılır. Örnekleri burada görebilirsiniz:
Bunu yapmak için oksijene bir bindirme menüsü eklemenin başka bir yolu, başlık şablonunu ve footer catchall’ı kullanmamız gerekir.Bu, üstbilgiye, iç içeriğe ve ardından altbilgi bölümüne sahip olduğumuz bir web sitesi oluşturduğumuzda standarttır.Bu şablon, CatchAll filtresi kullanılarak tüm sayfalara uygulanır (farklı bir filtre kullanılarak tam olarak nerede farklı bir başlık varyasyonunun görüntülenmesini istediğinizi belirleyebilirsiniz).Genellikle, şu anda bir menü veya menü öğesi ekleyebilirsiniz.Megamenu bile ayarlayabilirsiniz ve burada nasıl yapılacağına dair bir eğitim veriyoruz.Daha fazla bir şey istiyorsanız, tam ekranın tam ekran menüsünü yapmak en iyi seçim olabilir.
Bunu yönetmek için iyi tasarlanmış aşırı menü, yalnızca sermaye öğesini kullanacağız, yani bunu etkinleştirmek için gerekli kod veya üçüncü taraf bileşeni yok. İlk olarak, başlığımızı hazırlayalım. Bu başlık öğesi yalnızca soldaki logomuzu ve sağdaki menü düğmesini içerir. Bu menüyü değiştirmek çok basit olabilir. Bu örnekte, yalnızca “menü” metnini kullanacağız. Bu, menüye normal bir metin öğesi ekleyerek, etiketleyerek, ardından onu kaldırmayan özel bir CSS ekleyerek ve imleci üste yönlendirirken imleci bir işaretçiye dönüştürerek yapılır. İmleç: işaretçi kullanıcı seçimi: yok; Daha sonra “Menutoggle” gibi özel dersler de sunuyoruz. Ancak, imleci tıklarken veya yönlendirirken benzersiz animasyonlar oluşturmak için CSS veya JavaScript kullanabilirsiniz. Birçok web sitesi Hamburger simgeleri kullanır, ancak tıklarken onları oluşturan üç satır bir araya gelir. Menünüzü değiştirmek için ilham ve kodlamaya ihtiyacınız varsa, bu harika bir codepen: geçiş menümüz bittikten sonra sermayemizi ayarlayacağız. Tam bir ekran olmalı, imleci diğer tüm içeriğe yönlendirmeli ve kolayca kapatılmalıdır. Bunu yapmak için sermaye öğeleri ekliyoruz, 100 VH, genişlik 100 VW olarak ayarlıyoruz ve gerçekten diğer tüm içeriğin üzerine konumlandırıldı. Bu örnekte, Sermaye içindeki rütbe olmayacaktır, ancak bu öğreticiyi izleyerek düzenleyebilirsiniz.

Genel bir sermaye yaptıktan sonraki ilk adımımız, menü anahtarımıza bağlamaktır.Birisi menü düğmesini tıkladığında, tam ekran kaplama menüsünün görüntülenmesi gerekir.Bu, tetikleyiciyi açarak ve kullanıcı bir öğeye tıkladığında görüntülenecek şekilde ayarlanarak yapılır.Ardından, geçiş menüsüne verdiğiniz özel CSS sınıfını alana ekleyin.Bizim durumumuzda bu “. Menutoggle” olacak

. Kullanıcı Hamburger menü öğesini tıkladığında, tam ekran kaplama menüsü Oxygen Builder web sitenizde görüntülenir. Varsayılan olarak, yalnızca kaybolur, ancak birçok benzersiz sermaye ekran efekti ekleyebilirsiniz (yapışkan geçişler havalıdır). Sermayenin genel arka planı, bindirme menümüzün arka planı olacaktır. Bu örnekte, yalnızca tek tek renkleri kullanacağız, ancak arka plan videosu, görüntüler veya diğerleri ekleyebilirsiniz. Sadece sayfanıza başka parçalar ekleyelim, burada yapabileceğiniz birçok şey var. Ayrıca, bu kaplama menüsünün tüm sayfalara yükleneceğini unutmayın. İçinde kullandığınız tasarıma ve öğelere dikkat edin, çünkü sayfanızın yükleme süresini etkileyecektir. Temel sermaye belirlendikten sonra, nasıl devam edeceğiniz konusunda birkaç seçeneğiniz vardır. En basit kaplama menüsü yalnızca ana sayfa bağlantınızı görüntüler. Genellikle, bu dikey olarak yapılır, ancak yatay olarak da yapabilirsiniz. Standart metin eklemeyi ve bir bağlantı sargısına sarmayı seçebilirsiniz. Genellikle bunu böyle yaparız ve benzersiz bir seri etkisi ekleriz. Genellikle, birisi üzerinde yüzene kadar metin% 80 opaklıktır. Sonra%100 oldu ve grafiti de ekledik. Bu, kullanıcıların imleci doğru bağlantıya yönlendirdiğini gösterir.
Bağlantıya tıklanır tıkladıkları en kısa sürede yeni bir sayfaya yönlendirildiler. Gerekirse yapabilseniz bile, bağlantıyı tıklarken menüyü kapatan herhangi bir işlev ayarlamaya gerek yoktur. Bu menüye herhangi bir standart oksijen bileşeni ekleyebilirsiniz. Örnekler arasında en son blog yayınlarınızı görüntülemek için kolay yayınların kullanımını, satış sayfanıza statik davranma davetiyeleri, iletişim formları veya diğerleri yer alabilir. Düşünülmesi gereken son şey, kullanıcıların bindirme menünüzü nasıl kapatacağıdır. Varsayılan olarak, Kaçış düğmesini tıklamak sermayeyi kapatır ve bu işlevi menümüz için kaydederiz. Bununla birlikte, çok görünür olan kendi özel kapalı düğmelerimizi de ayarlamak istiyoruz. Bu, metin dizeleri veya düğmeler ekleyerek yapılır. Genellikle, yakın olduğu ve sol veya üst köşede bulunduğu söylenir. Menüyü kapatmak için ayarlamak için, özel bir sınıf “.oksi-modal kaplı” verin. Bu sonuç, kodsuz ve üçüncü taraf eklentisi olmadan oksijen oluşturucuya tam ekran menüsü eklemenin basit bir yoludur. Bunu kendi sitenizde nasıl uygulayacağınız hakkında sorularınız varsa, lütfen aşağıdaki yorumlarla iletişime geçin. Bir öğretici isteğiniz varsa, bize de söyleyin!

Oksijen Oluşturucu üzerinde tam ekran menüsü hazırlayın