Sola Sabit Sağa Açılır Menü Tasarımı (Metro)

+ -
-1




   -Yapımı bilmeyen arkadaşlar olabilir hazır şekilde veriyoruz peki burada alt alta yeni menüler nasıl ekleyebilirsiniz ? Örnek bir uygulama gösterecek olursak;
Bu örnekte <ul class="anamenu"> kısmı menüyü sola alan ve stilleri barındıran kısım olduğu için bu kısımı değiştirmiyoruz.
Daha sonra açacağınız "li" tagları sol tarafta butonlar oluşturacaktır.
<li>
    <a href="#">
      <i class="fa fa-info-circle"></i>
      <span>Bilgi</span>
    </a>
</li>
şeklinde kullandığınızda açılır menü değil direk link butonu çıkacaktır. "href" tagı içerisine "#" yerine gidilecek link adresini yazdığınızda gidilecek adrese gidilebilir onun dışında "a" tagına "target='_blank'" etiketi gibi etiketler de kullanarak sayfanın yeni sekmede açılmasını sağlayabilirsiniz. normal sağa açılan bir menü eklemek istiyorsanız kullanmanız gereken "li" tagı şekli şöyledir ;
<li>
    <a href="#"> //Bu kısım a tagında buton oluşturuyor
      <i class="fa fa-info-circle"></i> //Burası fontawasomeden iconu çekiyor
      <span>Bilgi</span> // Burası icon altı yazı kısmı
    </a>
    <ul> // Burda sağa soğru açılacak bölümler
      <li>  // Aynı buton gibi açılması için li tagı  <<<--->>>
        <a href="https://www.premium-turk.net/" target="_blank"> //Yönlendirecek a tagı
          <i class="fa fa-folder-open"></i> //Fontawasome icon kısmı
          <span>Dosyalar</span> //İcon altı yazı kısmı
        </a>
      </li>  // <<<--->>>
      <li>
        <a href="#" target="_blank">
          <i class="fa fa-question-circle"></i>
          <span>Hakkımızda</span>
        </a>
      </li>
   </ul>
</li>
Dilerseniz 2 adet "<<<--->>>" arasındaki kodları kopyalayarak açılacak kısımdaki örnekleri arttırabilirsiniz.

İcon alınan "fontawesome" versiyonu ; 4.7.0





Yorumlar 0

Bilgilendirme
Yorum Ekleyebilmeniz için Sitemize Kayıt Olmanız Gerekmektedir.