CSS Side bar

មេរៀននេះយើងបន្តរពីមេរៀនមុនគឺ CSS Navigation Bar ប៉ុន្តែនៅមេរៀនមួយនេះយើងសូមធ្វើ side bar ដោយយើងធ្វើពីខាងឆ្វង

<body>
  <div class="container-fluid navi">..</div>
  <div class="navbar-menu">...</div>
  <!-- slidebar -->
  <div class="container">
        <div class="row">
            <div class="col-xl-3 slide-menu">
                <div class="box">
                    <ul>
                        <li>
                            <a href="">Facebook <i class="fa-solid fa-angle-right"></i></a>
                        </li>
                        <li>
                            <a href="">Google <i class="fa-solid fa-angle-right"></i></a>
                        </li>
                        <li>
                            <a href="">Apple <i class="fa-solid fa-angle-right"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-xl-9 main-article">
                main
            </div>
        </div>
    </div>
</body>
CSS

/*MARK: make backround color black */
.popup{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.195);

}

/*MARK: slide bar*/
.slide-menu{
    margin-top: 15px;
}
.slide-menu .box{
    background-color: bisque;
}
.slide-menu .box ul li a{
    text-decoration: none;
    display: block;
    padding: 10px;
}
.slide-menu .box ul li a:hover{
    background-color: yellow;
}

Sub menu

យើងធ្វើ sub menu ដោយយើងនៅពេល hover លើវា

<body>
  <div class="container-fluid navi">..</div>
  <div class="navbar-menu">...</div>
  
  <!-- slidebar -->
   <div class="container">
        <div class="row">
            <div class="col-xl-3 slide-menu">
                <div class="box">
                    <ul>
                        <li>
                            <a href="">Facebook <i class="fa-solid fa-angle-right"></i></a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="">Facebook 1</a>
                                </li>
                                <li>
                                    <a href="">Facebook 2</a>
                                </li>
                                <li>
                                    <a href="">Facebook 3</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="">Google <i class="fa-solid fa-angle-right"></i></a>
                        </li>
                        <li>
                            <a href="">Apple <i class="fa-solid fa-angle-right"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-xl-9 main-article">
                main
            </div>
        </div>
    </div>
</body>
CSS

/*MARK: make backround color black */
.popup{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.195);

}

/*MARK: slide bar*/
.slide-menu{
    margin-top: 15px;
}
.slide-menu .box{
    background-color: bisque;
}
.slide-menu .box ul li a{
    text-decoration: none;
    display: block;
    padding: 10px;
}
.slide-menu .box ul li a:hover{
    background-color: yellow;
}
.slide-menu .box ul li a i{
    float: right;
    margin-top: 5px;
}
.slide-menu .box ul li .sub-menu{
    background-color: beige;
    width: 90%;
    margin-left: 5%;
    display: none;
}
.slide-menu .box ul li:hover .sub-menu{
    display: block;
}
Tags
Reactions

Post a Comment

0 Comments