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

CSS Menu Bar Kodu

CSS Hazır Menu Bar Kodu

Kolayca sitenize ekleyebileceğiniz basit bir menü çubuğu kodladım.

• Anasayfa
• Hakkımızda
• Hizmetlerimiz
• Galeri
• İletişim

Menü barın kodlarını aşağıdan kopyalayabilirsiniz.


        <style type="text/css">
        div.menu-kutu{
            background-color:#575141;
            height: 34px;
            width: 600px;
            font-family: arial;
            font-size: 12px;
            font-weight: bold;

        }
        div.menu-kutu ul{
            list-style-type: none;
            float: left;
            margin: 0px;
            padding: 0px;
            border-top:2px solid #1D3327;
            border-bottom:2px solid #1D3327;

        }
        div.menu-kutu ul li{
            width: 120px;
            float: left;
            text-align: center;
        }
        div.menu-kutu ul li a{
            text-decoration: none;
            color:#fff;
            line-height: 30px;
            display:block;
        }
        div.menu-kutu ul li a:hover{
            background-color:#F0E1B9;
            color:#545454;
            font-weight: bold;
        }

        </style>
        <div class="menu-kutu">
            <ul>
                <li><a href="#" title="Anasayfa">Anasayfa</a></li>
                <li><a href="#" title="Hakkımızda">Hakkımızda</a></li>
                <li><a href="#" title="Hizmetlerimiz">Hizmetlerimiz</a></li>
                <li><a href="#" title="Galeri">Galeri</a></li>
                <li><a href="#" title="İletişim">İletişim</a></li>

            </ul>


        </div>