20+ Html CSS Off-Canvas Menü
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.
5. Saf CSS3 HTML5 Kayar Paneller ve Off-Canvas Gezinme
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.
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ü
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ü
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
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
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ü
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ü
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ü
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ü
İş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ü
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ü
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
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ü
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ü
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
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
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)