Issuu on Google+

Ad o b ew o rd p ress. co m / T a sa rı m U n su rl a rı / CSS3 / CSS i l e T o o g l e M en ü

CSS ile Toogle Menü Vatanay Özbeyli tarafından 25 Haziran 2013 tarihinde yazıldı. ~ Yorum Yok + Değiştir

Web üzerinde dolaşan ilgi çekici tasarım örneklerini sizlerle paylaşmaya devam ediyoruz. Bu makalemizde, tıklanıldığında açılan şık bir menü örneği hazırlayacağız. Mobil buttonları kullanarak menüyü daha ilgi çekici bir hale getireceğiz.

Nasıl yapılır? Örneği sadece CSS kullanarak hazırlayacağız. CSS3′ün geçiş teknikleri sayesinde menünün giriş ve çıkışlarını düzenleyeceğiz. CSS kodları ile başlıyoruz. CSS satırlarımızın en üstüne menü başlık görüntülerini çekeceğimiz adresi ekleyelim. Aşağıdaki dosyayı kendi sunucunuza almanızda fayda var. 1 @import url('http://netdna.bootstrapcdn.com/fontawesome/3.1.1/css/font-awesome.css'); Şimdi menü kutusunu ekleyelim ve içerisindeki yazıların görünüşlerini düzenleyelim. 1 2 3 4 5 6 7 8 9 10 11

#menu .box { font-family:Arial,Helvetica; position: fixed; text-align: center; overflow: hidden; z-index: -1; opacity: 0; width: 100%; height: 100%; left: 0px; top: 0px;


12 13 14 15 16 17

background: rgba(0,0,0,0.8); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

Menü elementlerini hazırlamaya başlayabiliriz. Ul ve li’ler ile sıralı menümüzü listeleyeceğiz. Ul içerisinde giriş ve çıkış animasyonumuzu da geçiyor. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

#menu ul { position: relative; top: 20%; -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); transform: scale(2); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } #menu li { display: inline-block; margin: 20px; }

Menüdeki linklerin görünümünü düzenleyelim. Renklendirmeler ve yazı dekorasyonları… 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

#menu li a { border-radius: 3px; padding: 15px; border: 1px solid transparent; text-decoration: none; font-size: 18px; color: #fff; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #menu li a:hover { border-color: #fff; } #menu li a i { margin-right: 5px; font-size: 24px; }

Ve son olarak toogle buttonumuzu tasarlıyoruz. 1 2 3 4 5 6 7 8 9

#toggle-nav-label { margin:50px auto; color: rgba(255,255,255,0.6); background: rgba(0,0,0,0.2); text-align: center; line-height: 20px; font-size: 16px; display: block; cursor: pointer;


10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

position: relative; z-index: 500; width: 18px; height: 18px; padding:5px; border-radius: 5px; } #toggle-nav { display: none;} #toggle-nav:checked ~ .box { opacity: 1; z-index: 400; } #toggle-nav:checked ~ .box ul { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } #toggle-nav:checked ~ #toggle-nav-label { background: #fff; color: rgba(0,0,0,0.8); }

Sırada HTML kodlarımız var. Burada da HTML5 ile aramıza katılan nav aracını kullanacağız. 1 </pre> 2 <nav id="menu"><input id="toggle-nav" type="checkbox" /> 3 <label id="toggle-nav-label" for="toggle-nav"><i class="icon-reorder"></i></label> 4 <div class="box"> 5 <ul> 6 <li><a href="#"><i class="icon-home"></i> anasayfa</a></li> 7 <li><a href="#"><i class="icon-file-alt"></i> hakkımızda</a></li> 8 <li><a href="#"><i class="icon-copy"></i> referanslar</a></li> 9 <li><a href="#"><i class="icon-envelope"></i> iletişim</a></li> 10 </ul> 11 </div> 12 </nav> 13 <pre>

Kapanış Örneğimiz hazır. Özellikle sitenizdeki küçük ayarları kullanıcın değiştirebileceği ekranlar için gayet uygun bir menü tipi yaptık. Tasarımın kendisi Alessandro Calvaresi’ye ait. İleride bu ders üzerinde çalışmalar yapmaya devam edeceğiz. Benzer teknik ile farklı tip açılır kutular hazırlayacağız. İyi çalışmalar.


Benzer Konular: HTML5 ve CSS3 ile Yaprak Menü CSS3 ile Sosyal Ağ Kutucuğu CSS ile After Effects’e Yakın Geçiş #1 CSS ile Mükemmel Twitter Buttonu Web Sayfanıza Etkileyici Giriş Paneli

Yazı Kategorisi : CSS3 , Tasarım Unsurları Anahtar Kelimeler : açılır , CSS3 , html5 , menu , toogle


Css ile toogle menü