Responsive Menü Bar Örneği

HTML ve CSS kullanarak yapılmış basit bir Responsive Menu Bar çalışması. Menü barın 600px ve daha büyük ekran genişlikleri için görünümü aşağıdaki gibidir.

Eğer ekran genişliği 600px in altına düşer ise görünümü şu ekilde oluyor.

Bu görünümü menü barıın CSS koduna eklenen @media  (max-width:600px) ile başlayan kod bloğu sayesinde sağlanıyor.  Menü barın HTML ve CSS kodları aşağıdaki gibidir.  Bu kodlara bakarak CSS media query ile responsive kodlamanın mantığını kolayca kavrayabilirsiniz.

        <style type="text/css">
        .menu-kutu1{
            max-width: 600px;
            float: left;
        }
        .menu-kutu1 ul,li{
            margin: 0px;
            padding: 0px;
            float: left;
        }
            .navi{
                background-color: #333;
                color:#fff;
                list-style-type: none;
                font-family: Helvetica;
                font-size:16px;
                text-align: center;
           

            }
            .navi li{
                float: left;
                line-height: 40px;
                width: 150px;

            }
            .navi li a{
                text-decoration: none;
                height: 40px;
                color: #fff;
                display: block;
                width: 100%;

            }
            .navi li a:hover{
                background-color: #22B807;
            }
            @media (max-width:600px){
                .navi{
                    font-size: 20px;
                }
                .menu-kutu1{
                    clear: left;
                    width: 100%;
                }
                .menu-kutu1 ul{
                    width: 100%;
                }
                .navi li{
                    display: block;
                    width: 100%;
                }
            }

        </style>
        <div class="menu-kutu1">
            <ul class="navi">
                <li><a title="Anasayfa" href="#">Anasayfa</a></li>
                <li><a title="Hakkımızda" href="#">Hakkımızda</a></li>
                <li><a title="Şirket Haberleri" href="#">Şirket Haberleri</a></li>
                <li><a title="İletişim" href="#">İletişim</a></li>
            </ul>

        </div>
Bu kodları bir de canlı görün :):

• Anasayfa
• Hakkımızda
• Şirket Haberleri
• İletişim