Takip Edin

BOOTSTRAP

Bootstrap 4 İle Sidebar Menü Yapımı

bootstrap 4 ile sidebar menü yapımı öne çıkan görsel

Öncelikle sidebar menü için HTML kodlarını yerleştirelim:

Menülere .text-light sınıfını ekleyerek menülerin rengini değiştirelim.

Yazıların font stilini değiştirelim:

body{
    font-family: 'Libre Baskerville', serif;    
}

İçerik ile menüyü yan yana getirelim:

.wrapper{
    display: flex;      
}

Sidebar menünün arka plan rengini değiştirelim ve menü kapandığında bir geçiş efektiyle kapanması için gerekli kodumuzu ekleyelim:

#sidebar{
    min-width: 250px;
    max-width: 250px;
    color: #fff; 
    background: #0069D9;    
    transition: all 0.3s;
}

Menüde bulunan Vihekasade yazısının arka plan rengini değiştirelim ve padding verelim:

#sidebar .sidebar-header{
    padding: 20px;
    background: #003078;
}

Menülere üstten-alttan 20 px değerinde padding verelim:

#sidebar ul.components{
    padding: 20px 0;    
}

Yan Menü yazısına 10 px değerinde padding değeri verelim:

#sidebar ul p{  
    padding: 10px;
}

Menülerin font boyutunu artıralım ve menülere 10 px değerinde padding verelim:

#sidebar ul li a{
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

Menülerin üzerinde gezindiğimizde arka plan renginin geçiş efektiyle değişmesini sağlayalım:

#sidebar ul li a:hover{
    color: #fff !important;
    background: #2076E5;
    transition: .3s all ease;
}

Kredi menüsünün aktif menü olduğunu göstermek amacıyla arka plan rengini değiştirelim. Ayrıca sigorta menüsüne tıkladığımızda da arka plan renginin değişmesini sağlayalım:

#sidebar ul li.active>a,
a[aria-expanded="true"]{
    color: #fff;
    background: #003078;
}

Alt menülerin rengini aktif olan menülerin rengi ile aynı yapalım. Ayrıca font boyutlarını küçültüp soldan 30 px değerinde padding verelim:

ul ul a{
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #003078;
}

id değeri content olan div’e 20 px değerinde padding verelim:

#content{
    width: 100%;
    padding: 20px;        
}

Sayfa genişliği 768 px ve daha aşağı değerlerde olduğunda sidebar menüyü ve butonda bulunan yazıyı kaldıralım:

@media (max-width:768px) {
    #sidebar{
        margin-left: -250px;
    }

    #sidebar.active{
        margin-left: 0;
    }

    #sidebarCollapse span{
        display: none;
    }
}

Butona tıkladığımızda sidebar menünün, genişliği kadar sola kayarak ortadan kalkmasını sağlayalım:

#sidebar.active{
    margin-left: -250px;
}
<script>
        $(document).ready(function () {
            $("#sidebarCollapse").on('click', function () {
                $("#sidebar").toggleClass('active');
            });
        });
</script>

Sidebar menüsünün son hali aşağıdaki gibidir:

Devamını oku

Popüler

error: Content is protected !!