ArmyYazılım

20+ Html CSS Off-Canvas Menü

Şubat 23, 2022 | İbrahim Bozkurt

HTML ve CSS Off-Canvas menü kodu örneklerinden oluşan bu %100 ücretsiz ve açık kaynak koleksiyonunun keyfini çıkarın. Aynı zamanda bu Off-Canvas menüleri web sitenize eklemek kolaydır.

1. CSS3 Side Panel Menü

2. Sadece CSS ile Off-Canvas Menü

3. Sadece CSS ile Off-Canvas Kaydrımalı Menü

4. Gizli Yan Menü | Yalnızca CSS

5. Saf CSS3 HTML5 Kayar Paneller ve Off-Canvas Gezinme

6. CSS ve Bir JavaScript Dokunuşu ile Off-Canvas Menü

7. Saf CSS Ekran Dışı Gezinme Menüsü

8. Flexbox ile Saf CSS Off-Canvas Menü

9. IOS Tarzı Kayar Menü

10. Saf CSS Off-Canvas Menü

11. Saf CSS Off Canvas Menüsü

12. CSS Kenar Çubuğu Geçişi

13. Saf CSS OffCanvas Menüsü

14. OffCanvas Menü

15. JS’siz Menü ve Site Navigasyonu

16. Uçan Gezinme

17. Bükümlü Offcanvas Kenar Çubuğu Menüsü

18. CSS Dönüşümü Menü Geçişi

19. En İyi Hamburger Menüsü

1. CSS3 Side Panel Menü

Sayfanın sağ tarafından geçiş yapan menü ve ilgili içerik içeren bir CSS3 yan paneli. Bundan dolayı bu efekti oluşturmak için sayfanın tüm gövdesi sola hareket eder.

1. CSS3 Side Panel Menü

Yazar: Darren Huskie (Huskie)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 19 Haziran 2013

Şunlarla yapılmıştır: HTML, Sass, JS

Etiketler: css3, menü, panel, geçiş, slayt

2. Sadece CSS ile Off-Canvas Menü

2. Sadece CSS ile Off-Canvas Menü

Yazar: Andrej Sharapov (andrejsharapov)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 22 Mart 2019

Şunlarla yapılmıştır: Pug, SCSS

CSS Ön işlemcisi: SCSS

JS Ön işlemcisi: Yok

HTML Ön işlemcisi: Pug

Etiketler: off-canvas, menü, css

3. Sadece CSS ile Off-Canvas Kaydırmalı Menü

3. Sadece CSS ile Off-Canvas Kaydırmalı Menü

Kısacası sadece css kullanarak basit bir kaydırma menüsü.

Yazar: Max Kurapov (mkurapov)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 21 Mayıs 2016

Şunlarla yapılmıştır: HTML, SCSS, JS

Etiketler: slayt, off-canvas, menü, css, basit

4. Gizli Yan Menü | Yalnızca CSS

4. Gizli Yan Menü | Yalnızca CSS

Kısacası yalnızca CSS kullanılarak gizli yan menü ve hamburger animasyonu.

Yazar: Joshua Ward (joshuaward)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 28 Haziran 2017

Şunlarla yapılmıştır: HTML, SCSS

5. Saf CSS3 HTML5 Kayar Paneller ve Off-Canvas Gezinme

5. Saf CSS3 HTML5 Kayar Paneller ve Off-Canvas Gezinme

Yazar: Adam Carignan (acarignan)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 29 Ekim 2014

Şunlarla yapılmıştır: HTML, SCSS

6. CSS ve Bir JavaScript Dokunuşu ile Off-Canvas Menü

6. CSS ve Bir JavaScript Dokunuşu ile Off-Canvas Menü

Bununla birlikte Tuts+’ta George Martsoukos’un tam öğreticisini okuyun.

Yazar: Envato Tuts+ (tutsplus)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: Ocak 22, 2018

Şunlarla yapılmıştır: HTML, CSS, Babel

Etiketler: off-canvas, navigasyon, javascript

7. Saf CSS Ekran Dışı Gezinme Menüsü

7. Saf CSS Ekran Dışı Gezinme Menüsü

Yazar: SitePoint (SitePoint)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: Temmuz 31, 2014

Şunlarla yapılmıştır: HTML, CSS, JS

8. Flexbox ile Saf CSS Off-Canvas Menü

8. Flexbox ile Saf CSS Off-Canvas Menü

Flexbox, menü görünür hale geldiğinde ve genişliğin bir kısmını kapladığında, içerik alanının görünüm alanında kalan alana sığacak şekilde yeniden boyutlandırılmasına izin verir. Ayrıca Oliver Knoblich’in Pen Pure CSS Off Canvas Menüsünden örnek alınmıştır.

Yazar: Zoe Gillenwater (zomigi)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 1 Ekim 2014

Şunlarla yapılmıştır: HTML, SCSS

Etiketler: css3, off-canvas, flexbox, menü, mobil

9. IOS Tarzı Kayar Menü

9. IOS Tarzı Kayar Menü

İşte bir iOS stili, yandan kayan menü oluşturmanın kolay bir yolu.

Yazar: Jason Howmans (jasonhowmans)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 12 Temmuz 2013

Şunlarla yapılmıştır: HTML, SCSS, JS

10. Saf CSS Off-Canvas Menü

10. Saf CSS Off-Canvas Menü

Duyarlı bir sitede gezinme menüsü için kolay bir çözüme ihtiyacım vardı ve basit bir geçiş yapmak için Javascript kullanmaktan kaçınmak istedim. Bunun için de jQuery eklentileri görmekten bıktım, sadece CSS kullanarak çekmece stili/off-canvas bir menü yapmaya karar verdim. Ayrıca belirtmek gerekir ki Austin Wulf’un Pen Pure CSS Tuval Dışı Menüsünden örnek alınmıştır.

Yazar: BOMBCAT (bombcat)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 24 Mayıs 2014

Şunlarla yapılmıştır: HTML, CSS, JS

Etiketler: mobil, duyarlı, gezinme, geçiş, tuval dışı

11. Saf CSS Off-Canvas Menüsü

11. Saf CSS Off Canvas Menüsü

Yazar: Cimri (rbardtke)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 2 Mayıs 2014

Şunlarla yapılmıştır: HTML, SCSS

Etiketler: css3, tuval dışı, flexbox, menü, mobil

12. CSS Kenar Çubuğu Geçişi

12. CSS Kenar Çubuğu Geçişi

Kenar çubuğunu gizlemek ve göstermek için saf CSS çözümü.

Yazar: Silvestar Bistrovic (CiTA)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 7 Şubat 2017

Şunlarla yapılmıştır: HTML, SCSS, Babel

Etiketler: css, kenar çubuğu, geçiş, tbm-tam sayfa gezinme, codepenchallenge

13. Saf CSS Off-Canvas Menüsü

13. Saf CSS OffCanvas Menüsü

Sadece off-canvas menü konseptiyle oluşturuldu.

Yazar: Akshay Nair (fenaks)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 4 Ekim 2015

Şunlarla yapılmıştır: HTML, SCSS, JS

Etiketler: tuval dışı, menü, saf, css, purcss

14. Off-Canvas Menü

14. OffCanvas Menü

Yazar: Mojtaba Seyedi (seyedi)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 12 Haziran 2015

Şunlarla yapılmıştır: HTML, CSS

15. JS’siz Menü ve Site Navigasyonu

15. JS'siz Menü ve Site Navigasyonu

Radyo düğmeleri her yerde! Ortak bir ebeveyn olmadığında bile bir radyo girişinin etiketinin onu kontrol etmeye devam edeceği ortaya çıktı. Bununla beraber Tek yapmanız gereken, girişi ilgili bölümünün hemen önüne yerleştirmektir. Gerisini CSS “+” seçicisi halleder.

Yazar: Nicolas Udy (udyuk)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: Şubat 11, 2016

Şunlarla yapılmıştır: HTML, PostCSS, JS

Etiketler: no-js, css, radyo, menü, navigasyon

16. Uçan Gezinme

16. Uçan Gezinme

Uçan bir gezinme çubuğu…

Yazar: Tiffany Rayside (tmrDevelops)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 27 Mart 2015

Şunlarla yapılmıştır: HTML, SCSS

Etiketler: navigasyon, menü, açılır menü, menü geçişleri, css menüsü

17. Bükümlü Offcanvas Kenar Çubuğu Menüsü

Fikir ve ilham: https://dribbble.com/shots/1719325-GIF-Sticker-App Chrome’da geliştirildi, başka bir yerde test edilmedi, üretime hazır değil. Bilinen sorun: döndürüldüğünde içerik taşması kesiliyor.

Yazar: Devilish Alchemist (devilishalchemist)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 29 Aralık 2014

Şunlarla yapılmıştır: HTML, SCSS, JS

18. CSS Dönüşümü Menü Geçişi

Yine bir başka animasyonlu CSS “hamburger” menü geçişi. Aktif sınıflar arasında geçiş yapmak için bazı lite javascript kullanılarak .scss ile yazılmıştır. Üç çubuk yukarı/aşağı oklara ve bir “x”e dönüşür. Woohoo!

Yazar: Matt Soria (poopsplat)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 10 Ekim 2014

Şunlarla yapılmıştır: HTML, SCSS, JS

Etiketler: css, geçişler, menü, nav, hamburger

19. En İyi Hamburger Menüsü

Düz bir tasarım klasiğine çok skeuomorfik bir yaklaşım. Svg animasyonu hakkında bilgi edinmek için etrafta dolaşmak.

Yazar: Charles (CharlesSmart)

Bağlantılar: Kaynak Kodu / Demo

Oluşturma tarihi: 6 Mart 2015

Şunlarla yapılmıştır: HTML, CSS, JS

Etiketler: hamburger-menü, menü

Kaynak: devsnap.

WordPress Vurgulanmış Metin Nasıl Kullanılır? (Başlangıç Kılavuzu)



css html html5 Off-Canvas Menü yan menü
3 ay / YAZILIMA DAİR!


Yorumlar