• WM Clubu - Yeni Nesil Webmaster Forumu
Giriş Yap Üye Ol


Konu Bilgileri 
Konu : MyBB Mobil Uyumlu Responsive Header Menü Ekleme
Yazar : Invite      
Cevap Sayısı : 0 Görüntüleme : 28

Forum içerisindeki kategorilerde yapılan tüm bilgi ve paylaşımlar öncesinde lütfen (Forum Kuralları'nı) okuyunuz.

Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5
MyBB Mobil Uyumlu Responsive Header Menü Ekleme
#1
Responsive Menu, duyarlı bir tasarımın özüdür. Varsayılan olarak, MyBB teması duyarlı değildir ve onları duyarlı hale getirmek için başlık bölümüne duyarlı bir menü eklemeniz gerekir. Bu, MyBB forumları için duyarlı bir menü oluşturmanıza yardımcı olacak ve forumunuzun görünümünü daha iyi hale getirecek üç adımlı basit bir eğitimdir. Bu eğitim için varsayılan MyBB temasını kullandım ve bu eğitim forumun çoğu için iyi çalışmalı.
Herhangi bir şüpheniz varsa, yorumlarda bana bildirin. Forumunuz için duyarlı bir menü edinmenize yardımcı olacağım. Bu eğitim tamamen CSS ve HTML ile yapılır, yani bir açılır menü için oldukça temiz ve temiz olan hiçbir jQuery kullanılmaz. ?
Bu derste yazı tipi harika simgeler kullandım.
[Resim: Responsive-Menü-MyBB-1.png]
[Resim: Responsive-Menü-MyBB-2.png]
[Resim: Responsive-Menü-MyBB-3.png]
[Resim: Responsive-Menü-MyBB-4.png]
Adımlar: -
1. Öncelikle - - Yönetici cp> Şablonlar ve Stiller> Şablonlar> Tema Şablonunuz> başlık Şablonlar> başlık kısmında bulunan başlık şablonunu açın ve hemen yukarıdaki kodu ekleyin
Kod:
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
       <Nav>
       <label for = "drop" class = "toggle"> <i class = "fa fa-barlar" aria-hidden = "true"> </i> Menü </label>
       <input type = "checkbox" id = "bırak" />
           <ul class = "menu">
<li> <a href="{$mybb-> settings ['bburl']} / index.php "class =" Home "> <span> <i class =" fa fa-home "aria-hidden =" true "> </i> Ana Sayfa </span> </a> </li>
<li> <a href="{$mybb-> settings ['bburl']} / memberlist.php "class =" Üyeler "> <span> <i class =" fa fa-user "aria-hidden =" true "> </i> Üye Listesi </span> </a> </li>
<li> <a href="{$mybb-> settings ['bburl']} / search.php "class =" Arama "> <span> <i class =" fa fa-arama "aria-hidden =" true "> </i> Ara </span> </a> </li>
               <li> <a href="{$mybb-> ayarları ['bburl']}} / advertise.php "> <span> <i class =" fa fa-küre "aria-hidden =" true "> </ i > Reklam Ver </span> </a> </li>
               <Li>
                   <! - İlk Seviye Düşürme ->
                   <label for = "drop-1" class = "toggle"> Bırakma <i class = "fa fa-sort-desc" aria-hidden = "true"> </i> </label>
                   <a href="#"> Açılır Pencere </a>
                   <input type = "checkbox" id = "drop-1" />
                   <Ul>
                       <li> <a href="#"> Bağlantılar </a> </li>
                       <li> <a href="#"> Bağlantılar </a> </li>
                       <li> <a href="#"> Bağlantılar </a> </li>
                   </ Ul>
               </ Li>
               <Li>
<li> <a href="{$mybb-> ayarları ['bburl']} / misc.php? action = yardım "class =" help "> <span> <i class =" fa fa-question "> < / i> {$ lang-> toplinks_help} </span> </a> </li>
           </ Ul>
</ Nav>
2. Temanıza gidin ve stil sayfası ekle'yi tıklayın. Adı responsive_menu.css olarak yazın ve kendi içeriğimi yaz'ı tıklayın.
3. Aşağıdaki içeriği yapıştırın ve stil sayfasını kaydet öğesine tıklayın.

Kod:
/ *
WallBB'dan Öğretici
http://wallbb.co.uk
* /
.toggle, [id ^ = "bırak"] {
   görüntü yok;
}
nav {
   arkaplan: # 333;
   marj: 0;
   dolgu maddesi: 0;
}
nav :: sonra {
   ikisini de temizle;
   içerik: "";
   ekran: masa;
}
nav ul {
   liste tarzı: hiçbiri dışında;
   marj: 0;
   dolgu maddesi: 0;
   pozisyon: göreceli;
}
nav ul li {
   sınır-sol: 1 piksel katı # 555;
   ekran: satır içi blok;
   şamandıra: sol;
   marj: 0;
}
nav a {
   arkaplan: # 222;
   renk: #fff;
   Ekran bloğu;
   font ailesi: Helvetica, Arial, Verdana, sans-serif;
   yazı tipi boyutu: 12 piksel;
   dolgu maddesi: 10px 15px;
   metin dekorasyon: yok;
}
nav ul li ul li: vurgulu {
   arkaplan: # 444 hiçbiri kaydırma işlemini tekrarlama 0 0;
}
nav a: gezdirmek {
   arkaplan rengi: # 000000;
}
nav ul ul {
   görüntü yok;
   pozisyon: mutlak;
   üst: 35 piksel;
}
nav ul li: vurgulu> ul {
   ekran: miras;
}
nav ul ul li {
   görüntüleme: liste öğesi;
   şamandıra: yok;
   pozisyon: göreceli;
   genişlik: 170 piksel;
}
nav ul ul ul li {
   solda: 170 piksel;
   pozisyon: göreceli;
   üst: -60px;
}
nav ul li> a :: sonra {
   içerik: "";
   ekran: satır içi;
   font-family: fontawesome;
}
nav ul li> a: only-child :: after {
   içerik: "";
}
@media all ve (maksimum genişlik: 768px) {
nav {
   marj: 0;
}
.toggle + a, .menu {
   görüntü yok;
}
.toggle {
   arkaplan: # 333;
   sınır: orta hiçbiri;
   renk: #ffffff;
   Ekran bloğu;
   font ailesi: Helvetica, Arial, Verdana, sans-serif;
   yazı tipi boyutu: 12 piksel;
   dolgu maddesi: 10px 15px;
   metin dekorasyon: yok;
}
.toggle: hover {
   arkaplan rengi: # 000000;
}
[id ^ = "bırak"]: işaretli + ul {
   Ekran bloğu;
}
nav ul li {
   Ekran bloğu;
   genişlik:% 100;
}
nav ul ul. toggle, nav ul ul a {
   dolgu maddesi: 0 40 piksel;
}
nav ul ul ul a {
   dolgu maddesi: 0 80 piksel;
}
nav a: vurgulu, nav ul ul ul a {
   arkaplan rengi: # 000000;
}
nav ul li ul li .toggle, nav ul ul a, nav ul ul ul {
   renk: #ffffff;
   yazı tipi boyutu: 12 piksel;
   dolgu maddesi: 10px 15px;
}
nav ul li ul li .toggle, nav ul ul a {
   arkaplan rengi: # 212121;
}
nav ul ul {
   renk: #ffffff;
   şamandıra: yok;
   pozisyon: statik;
}
Nav ul ul li: vurgulu> ul, Nav ul li: vurgulu> ul
   görüntü yok;
}
nav ul ul li {
   Ekran bloğu;
   genişlik:% 100;
}
nav ul ul ul li {
   pozisyon: statik;
}
}
@media all ve (maksimum genişlik: 330px) {
nav ul li {
   Ekran bloğu;
   genişlik:% 94;
}
}
@ sadece medya ekranı ve (dak: 769 piksel) {
nav ul {
   sol kenar boşluğu:% 8;
}
nav ul ul {
   sol kenar boşluğu: 0;
}
}
Canlı Demo'ya benzer bir açılır menü göreceksiniz - http://codepen.io/WallBB/pen/bwwwBL
 
Alinti
Teşekkür tarafından verilen:
  
[ Etiketler: mybb | mobil | uyumlu | responsive | header | menu | ekleme ]


Anahtar Kelimeler

MyBB Mobil Uyumlu Responsive Header Menü Ekleme, MyBB Mobil Uyumlu Responsive Header Menü Ekleme indir, MyBB Mobil Uyumlu Responsive Header Menü Ekleme Videosu, MyBB Mobil Uyumlu Responsive Header Menü Ekleme online izle, MyBB Mobil Uyumlu Responsive Header Menü Ekleme Bedava indir, MyBB Mobil Uyumlu Responsive Header Menü Ekleme Yükle, MyBB Mobil Uyumlu Responsive Header Menü Ekleme Hakkında, MyBB Mobil Uyumlu Responsive Header Menü Ekleme nedir, MyBB Mobil Uyumlu Responsive Header Menü Ekleme Free indir, MyBB Mobil Uyumlu Responsive Header Menü Ekleme oyunu, MyBB Mobil Uyumlu Responsive Header Menü Ekleme download


Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  MyBB TagCloud (Otomatik Etiket) Eklentisi 1.8 Invite 0 34 23-05-2019, Saat:14:31
Son Yorum: Invite
  Mybb Animation Logo ( Animasyonlu Logo ) Yapımı Basit Invite 0 36 09-05-2019, Saat:13:21
Son Yorum: Invite
  MyBB Profil Sayfasında Kapak Resmi Eklentisi 1.8 [Türkçe] Invite 0 68 27-04-2019, Saat:13:21
Son Yorum: Invite
  MyBB Forum Görüntülemede Avatar Eklentisi Invite 0 40 25-04-2019, Saat:09:56
Son Yorum: Invite
  MyBB Facebook İle Üye Girişi Bağlan Eklentisi v2.3.0 (Türkçe) Invite 0 42 24-04-2019, Saat:11:38
Son Yorum: Invite
  Mybb Last Poster Avatar Anasayfa Son Mesajlar Yanına Avatar Eklentisi Invite 0 41 19-04-2019, Saat:14:14
Son Yorum: Invite
  MyBB Konu Başlığına Resim Koyma Eklentisi 1.8.x Invite 0 43 04-04-2019, Saat:13:49
Son Yorum: Invite

Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi