Responsive Menü Yapımı

Anasayfa / Yazılım / Responsive Menü Yapımı

13 Mart 2017 / 16:30

Burak

Merhaba arkadaşlar, aşağıdaki kodlar yardımıyla sizlerde rahatlıkla sitenize responsive menü ekleyebilirsiniz.

Öncelikle jquery dosyamızı sisteme yüklüyoruz.Jquery dosyasını buradan indirebilirsiniz.

 <script src="/js/jquery-1.10.2.min.js"></script>

1	<script src="/js/jquery-1.10.2.min.js"></script>

Css kodu

      .menu {
            display: none;
             background-color:white;
             font-family:Roboto;
             width:100%;
            
        }
 .alt_mm2 a, a:hover,a:visited{
 color:black;
 }
            .alt_mm2 {
                 display: none;
                 background-color:white;
                 font-family:Roboto;
                 width: 100%;
            }

        .alt_menu_secenek {
            display: none;
            background-color:white;
             font-family:Roboto;
             clear:both;
            width: 100%;
        }
        .alt_kirilim_secenek{
            height: 25px;
    padding-top: 10px;
    font-family: Roboto;
       width: 100%; 
    font-size: 13px;
     width: 100%;
        }
                    .alt_mm {
                      min-height: 30px;
    padding-top: 14px;
    border-bottom: 1px #3f3c38 solid;
     width: 100%;
                    }
                    @media (max-width:930px) {
                        .menu22 {
                            display: block;
                        }
                    }

.menu {

display: none;

background-color:white;

font-family:Roboto;

width:100%;

}

.alt_mm2 a, a:hover,a:visited{

color:black;

}

.alt_mm2 {

display: none;

background-color:white;

font-family:Roboto;

width: 100%;

}

.alt_menu_secenek {

display: none;

background-color:white;

font-family:Roboto;

clear:both;

width: 100%;

}

.alt_kirilim_secenek{

height: 25px;

padding-top: 10px;

font-family: Roboto;

width: 100%;

font-size: 13px;

width: 100%;

}

.alt_mm {

min-height: 30px;

padding-top: 14px;

border-bottom: 1px #3f3c38 solid;

width: 100%;

}

@media (max-width:930px) {

.menu22 {

display: block;

}

Jquery kod betiği

JavaScript

<script>
                     $(function () {
                         $("#ac").click(function () {
                             $(this).next(".alt_mm2").toggle(200);
                         });
                         $(".alt_menu22").click(function () {
                             $(this).next(".alt_menu_secenek").toggle(200);
                         });
                     });
</script>

$(function () {

$("#ac").click(function () {

$(this).next(".alt_mm2").toggle(200);

});

$(".alt_menu22").click(function () {

$(this).next(".alt_menu_secenek").toggle(200);

});

</script>

Html kod betiği

 <div class="menu22">
            <div  class="fa fa-bars" style="width: 100%;" id="ac"></div>
            <div class="alt_mm2">
               <a href="/"> <div class="alt_mm">&nbsp;&nbsp;ANASAYFA</div></a>
                <a class="alt_menu22" href="#"><div class="alt_mm"> &nbsp;&nbsp;KURUMSAL </div> </a>
                     <div class="alt_menu_secenek">
                          <a href="/s/hakkimizda">  <div  class="alt_kirilim_secenek">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>&nbsp;HAKKIMIZDA</div></a>
                          <a href="/s/yonetim"><div  class="alt_kirilim_secenek">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>&nbsp;YÖNETİM</div></a>
                          <a href="/s/sertifikalar"> <div  class="alt_kirilim_secenek">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>&nbsp;SERTİFİKALAR</div></a>
                          <a href="/s/logolar">  <div  class="alt_kirilim_secenek">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>&nbsp;LOGOLARIMIZ</div></a>
                     </div>  
                
               <a href="/k/kataloglar/0"> <div class="alt_mm">&nbsp;&nbsp;ÜRÜNLER</div></a>
               <a href="/s/teknik-bilgi"> <div class="alt_mm">&nbsp;&nbsp;TEKNİK BİLGİ</div> </a>                                 
               <a href="/s/basinda-biz"> <div class="alt_mm">&nbsp;&nbsp;HABERLER</div></a>
               <a href="/s/iletisim"> <div class="alt_mm">&nbsp;&nbsp;İLETİŞİM</div></a>
            </div>
        </div>

<a href="/"> <div class="alt_mm">  ANASAYFA</div></a>

<a class="alt_menu22" href="#"><div class="alt_mm">   KURUMSAL </div> </a>

<a href="/s/hakkimizda"> <div class="alt_kirilim_secenek">      <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> HAKKIMIZDA</div></a>

<a href="/s/yonetim"><div class="alt_kirilim_secenek">      <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> YÖNETİM</div></a>

<a href="/s/sertifikalar"> <div class="alt_kirilim_secenek">      <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> SERTİFİKALAR</div></a>

<a href="/s/logolar"> <div class="alt_kirilim_secenek">      <i class="fa fa-arrow-circle-right" aria-hidden="true"></i> LOGOLARIMIZ</div></a>

</div>

<a href="/k/kataloglar/0"> <div class="alt_mm">  ÜRÜNLER</div></a>

<a href="/s/teknik-bilgi"> <div class="alt_mm">  TEKNİK BİLGİ</div> </a>

<a href="/s/basinda-biz"> <div class="alt_mm">  HABERLER</div></a>

<a href="/s/iletisim"> <div class="alt_mm">  İLETİŞİM</div></a>

</div>

Bu Yazılarıda Okuyabilirsiniz...

Mysql Event ( Olaylar ) Aktif / Pasif Yapma ve Kontrol

Mysql AES_DECRYPT ve AES_ENCRYPT kullanımı

C# ile Guid Kullanımı

Visual Studio’da Satır Sayılarını Gösterme

Linux Uzak Masaüstü Kurulumu

Bir yanıt yazın Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Yorum *

Ad *

E-posta *

İnternet sitesi

Kategoriler

Sosyal Medya

Bir yanıt yazın Yanıtı iptal et