Kullanıcı İşlemlerini Aç/Kapat

SinemaOvasi.Com - Değerli Vaktini Filmlerle Geçirenlere
Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Material Design Öne Çıkarılmış Menü Tasarımı
****
Grafik Ekibi
2. Seviye
Çevrimdışı
Kullanıcı Bilgileri Göster
Yorum Sayısı: 1,945
Konu Sayısı: 338
Üyelik Tarihi: 06-04-2017
Rep Puanı: 66
Teşekkürler: 17
60 mesaj içinde 484 teşekkür verildi.

SanalPara (SP): 1,496.47₺
Eşya: (Tüm Eşyaları Göster)
#1
material-button.gif?resize=807%2C342

Web sitenize NTVspor veya Yerel Futbol‘da da kullanılan material design menü tasarımını eklemek ister misiniz? Özellikle mobil erişimlerde öne çıkarılmasını istediğiniz içerikleri listelemenize yardımcı olacak bu tasarımı hazırlamak tahmin ettiğinizden de basit.
Material Design Floating Action Button

Ekranın sağ altında gözüken buton tasarımı bu şekilde isimlendirilmekte. Biz bu kısma menü tasarımı da ekleyerek farklı bir varyasyon oluşturacağız. Hazırsanız başlayalım.

HTML Kodları

İlk olarak md-primary classına sahip bir div oluşturup içerisine görünmez bir ul ekliyoruz. Sonrasında da bir buton tasarımı için a elemanına ihtiyacımız olacak.

Kod:
<div class="md-primary">
<ul style="display:none;">
 <li><a href="#">MENÜ 1</a></li>
 <li><a href="#">MENÜ 2</a></li>
 <li><a href="#">MENÜ 3</a></li>
 <li><a href="#">MENÜ 4</a></li>
 </ul>
</div>
<a class="md-primary-btn"><i class="fa fa-bars" aria-hidden="true"></i></a>

CSS Kodları

Menü aktif edildiğinde olması gereken işlemleri belirleyelim. Öncelikle ekran kararmalı.

Kod:
div.md-primary.activated {
 background-color: rgba(1, 1, 1, 0.5);
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
Daha sonra ul görünür olmalı.

Kod:
div.md-primary.activated ul {
 position:absolute;
 right:30px;
 bottom:86px;
 list-style:none;
}

div.md-primary.activated ul li{
 padding:6px 12px;
 background-color:rgba(1,1,1,0.6);
 border-radius:15px;
 margin-bottom:5px;
}

div.md-primary.activated ul li a{
 text-decoration: none;
 color:white;
}

div.md-primary.activated ul li:hover{
 background-color:rgba(1,1,1,0.8);
}

Son olarak da butonumuzun tasarımını yapalım.


Kod:
a.md-primary-btn {
 background-color: #448AFF;
 position: absolute;
 bottom: 30px;
 right: 30px;
 width: 56px;
 height: 56px;
 border-radius: 50%;
 color: #fff;
 overflow: hidden;
 cursor: pointer;
 transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 transition-delay: 0.2s;
 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
 text-align:center;
 line-height:56px;
 font-size:18px;
}

JavaScript Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

Kod:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Şimdi tek yapmamız gereken perdenin ve menünün açılıp kapanmasını sağlayacak click fonksiyonlarını yazmak.


Kod:
$('a.md-primary-btn').click(function(){
 $('div.md-primary').toggleClass('activated')
 $('div.md-primary').find('ul').toggle();
});

$('body').on('click', 'div.md-primary.activated', function () {
 $('div.md-primary').toggleClass('activated')
 $('div.md-primary').find('ul').toggle();
})

ÖN İZLEME ;

Kod:
http://www.adobewordpress.com/tasarim/css-material-design-button.php
☯️ Social Media Asistan ☯️

Grafiker Ekibi 1.Sv 
Grafiker Ekibi 2.Sv 
Grafiker Ekibi 3.Sv X

WWW
Cevapla
Teşekkür verenler:
*
Destek Ekibi
1. Seviye
Çevrimdışı
Kullanıcı Bilgileri Göster
Yorum Sayısı: 1,586
Konu Sayısı: 259
Üyelik Tarihi: 02-02-2018
Rep Puanı: 16
Teşekkürler: 41
11 mesaj içinde 255 teşekkür verildi.

SanalPara (SP): 129.56₺
Eşya: (Tüm Eşyaları Göster)
#2
Eline Sağlık
Discord Türkçe Eğlence Bot
Cevapla
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi
Önerilen Bağlantılar
Tema yapımcısı: Metehan Durmuş
Tüm hakları saklıdır. 10TL.Net sistemi için yazılmıştır.


***


Reliable Magento web hosting on https://certahosting.co.uk page. Click to see prices!