Basit Responsive Menu Yapımı

12:34 Hiç yorum yok

HTML Kodları :

    <div class="menu">
        <div class="menuAc">Menüyü Aç</div>
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
            <li><a href="#">Menu 4</a></li>
            <li><a href="#">Menu 5</a></li>
        </ul>
    </div> 

 CSS KODLARI :

 .menu {
    overflow:hidden;
    background-color:#111;
}
.menu ul li {
    float:left
}
.menu ul li a {
    display:block;
    padding:10px 20px;
    color:#fff;
    border-right:1px solid #555;
}
.menu ul li a:hover {
    background-color:#555;
}
.menuAc {
    background-color:#fa6585;
    padding:10px;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    display:none;
}
.content {
    border:1px solid #ddd;
    padding:10px;
    margin:10px;
}
@media (max-width:700px) {
    .menuAc {
        display:block;
    }
    .menu ul {
        display:none
    }
    .menu ul li{
        float:none;
    }
    .menu ul li a{
        border-right:none;
        border-bottom:1px solid #555;
    }
}
@media (min-width:700px){
    .menu ul {display:block!important}
}


JS KODLARI  :

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(function(){
        var a=0;
        $('.menuAc').click(function(){
            if (a==0){
                $(this).text('Menüyü Gizle');
                a++;
            } else {
                $(this).text('Menüyü Aç');
                a=0;
            }
           
            $(this).next('ul').slideToggle(500);
        });
    });
   
    </script> 

Hiç yorum yok :

Yorum Gönder

Kaydol: Kayıt Yorumları ( Atom )

Labels

Subscribe