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.
|
1 |
<script src="/js/jquery-1.10.2.min.js"></script> |
Css kodu
|
1 2 3 4 5 6 7 8 9 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 36 37 38 39 40 41 42 43 |
.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
|
1 2 3 4 5 6 7 8 9 10 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="menu22"> <div class="fa fa-bars" style="width: 100%;" id="ac"></div> <div class="alt_mm2"> <a href="/"> <div class="alt_mm"> ANASAYFA</div></a> <a class="alt_menu22" href="#"><div class="alt_mm"> KURUMSAL </div> </a> <div class="alt_menu_secenek"> <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> </div> |
Bu Yazılarıda Okuyabilirsiniz...
Bir yanıt yazın