程序员的知识教程库

网站首页 > 教程分享 正文

Html5第二天练习（html5基础）

henian88 2024-09-06 18:41:18 教程分享 63 ℃ 0 评论

Html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
        <link href="../css/20231230.css" rel="stylesheet">
        <title></title>
    </head>
    <body>
        <div class="sidebar">
            <div class="logo-details">
                <i class="bx bxl-c-plus-plus"></i>
                <span class="logo_name">
                    侧导航栏
                </span>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="#">
                    <i class="bx bx-grid-alt"></i>
                    <span class="link_name">Dashboard</span>
                    </a>
                    <ul class="sub-menu blank">
                        <li><a class="link_name" href="#">Category</a></li>
                    </ul>
                </li>
                <li>
                    <div class="icon-link">
                        <a href="#">
                            <i class="bx bx-collection"></i>
                            <span class="link_name">Category</span>
                        </a>
                        <i class="bx bxs-chevron-down arrow"></i>
                    </div>
                    <ul class="sub-menu">
                        <li><a class="link_name" href="#">Category</a></li>
                        <li><a href="#">HTML & CSS</a></li>
                        <li><a href="#">Javascript</a></li>
                        <li><a href="#">PHP & MySQL</a></li>
                    </ul>
                </li>

                <li>
                    <div class="icon-link">
                        <a href="#">
                            <i class="bx bx-book-alt"></i>
                            <span class="link_name">Posts</span>
                        </a>
                        <i class="bx bxs-chevron-down arrow"></i>
                    </div>
                    <ul class="sub-menu">
                        <li><a class="link_name" href="#">Posts</a></li>
                        
                        <li><a href="#">Web Design</a></li>
                        <li><a href="#">Login Form</a></li>
                        <li><a href="#">Card Design</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">
                    <i class="bx bx-pie-chart-alt-2"></i>
                    <span class="link_name">Analytics</span>
                    </a>
                    <ul class="sub-menu blank">
                        <li><a class="link_name" href="#">Analytics</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">
                    <i class="bx bx-line-chart"></i>
                    <span class="link_name">Chart</span>
                    </a>
                    <ul class="sub-menu blank">
                        <li><a class="link_name" href="#">Chart</a></li>
                    </ul>
                </li>

                <li>
                    <div class="icon-link">
                        <a href="#">
                            <i class="bx bx-plug"></i>
                            <span class="link_name">Plugins</span>
                        </a>
                        <i class="bx bxs-chevron-down arrow"></i>
                    </div>
                    <ul class="sub-menu">
                        <li><a class="link_name" href="#">Plugins</a></li>
                        
                        <li><a href="#">UI Face</a></li>
                        <li><a href="#">Pigments</a></li>
                        <li><a href="#">Box Icons</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">
                    <i class="bx bx-compass"></i>
                    <span class="link_name">Explore</span>
                    </a>
                    <ul class="sub-menu blank">
                        <li><a class="link_name" href="#">Explore</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">
                    <i class="bx bx-history"></i>
                    <span class="link_name">History</span>
                    </a>
                    <ul class="sub-menu blank">
                        <li><a class="link_name" href="#">History</a></li>
                    </ul>
                </li>

                <li>
                    <a href="#">
                    <i class="bx bx-cog"></i>
                    <span class="link_name">Setting</span>
                    </a>
                    <ul class="sub-menu blank">
                        <li><a class="link_name" href="#">Setting</a></li>
                    </ul>
                </li>

                <li>
                    <div class="profile-details">
                        <div class="profile-content">
                            <img src="image/profile.jpg" alt="">
                        </div>
                        
                        <div class="name-job">
                            <div class="profile_name">Shen Cong Yun</div>
                            <div class="job">Web Desiner</div>
                        </div>
                        <i class="bx bx-log-out"></i>
                    </div>
                </li>
            </ul>
            
        </div>

        <selection class="home-section">
            <div class="home-content">
                <i class="bx bx-menu"></i>
                <span class="text">
                    下拉侧栏
                </span>
            </div>
        </selection>

        <script>
            let arrow = document.querySelectorAll(".arrow");
            
            for (let index = 0; index < arrow.length; index++) {
               arrow[index].addEventListener("click", (e)=>{
                console.log(e);
                let arrowParent = e.target.parentElement.parentElement;
                console.log(arrowParent);
                arrowParent.classList.toggle("showMenu")
               });
                
            }

            let sidebar = document.querySelector(".sidebar");
            let sidebarBtn = document.querySelector(".bx-menu");
            sidebarBtn.addEventListener("click", ()=>{
                sidebar.classList.toggle("close");
            });
        </script>
    </body>
</html>

Css:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700%display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

.sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 260px;
    background: #11101d;
    z-index: 100;
    transition: all 0.5s ease;
}

.sidebar.close{
    width: 78px;
}

.sidebar .logo-details {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
}

.sidebar .logo-details i{
    font-size: 30px;
    color: #fff;
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px;
   
}

.sidebar .logo-details .logo_name{
    font-size: 22px;
    color: #fff;
    font-weight: 600;
    transition: 0.3s ease;
    transition-delay: 0.1s;
}

.sidebar.close .logo-details .logo_name{
    transition-delay: 0s;
    opacity: 0;
    pointer-events: none;
}

.sidebar .nav-links{
    height: 100%;
    padding: 30px 0 150px 0;
    overflow: auto;
}

.sidebar.close .nav-links{
    overflow: visible;
}

.sidebar .nav-links::-webkit-scrollbar{
    display: none;
}

.sidebar .nav-links li{
    position: relative;
    list-style: none;
    transition: all 0.4s ease;
}

.sidebar .nav-links li:hover{
    background: #1d1b31;

}

.sidebar .nav-links li .icon-link{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar.close .nav-links li .icon-link{
    display: block;
}

.sidebar .nav-links li i{
    height: 50px;
    min-width: 78px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sidebar .nav-links li.showMenu i.arrow{
    transform: rotate(-180deg);

}

.sidebar.close .nav-links i.arrow{
    display: none;
}

.sidebar .nav-links li a{
    display: flex;
    align-items: center;
    text-decoration: none;

}

.sidebar .nav-links li a .link_name{
    font-size: 18px;
    font-weight: 400;
    color: #fff;
}

.sidebar.close .nav-links li a .link_name{
    opacity: 0;
    pointer-events: none;
}

.sidebar .nav-links li .sub-menu{
   padding: 6px 6px 14px 80px;
   margin-top: -10px;
    background: #1d1b31;
    display: none;
}

.sidebar .nav-links li.showMenu .sub-menu{
    display: block;
}

.sidebar .nav-links li .sub-menu a {
    color: #fff;
    font-size: 15px;
    padding: 5px 0;
    white-space: nowrap;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.sidebar .nav-links li .sub-menu a:hover{
    opacity: 1;

}

.sidebar.close .nav-links li .sub-menu{
    position: absolute;
    left: 100%;
    top: -10px;
    margin-top: 0;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    transition: all 0.4s ease;
    opacity: 0;
    display: block;
    pointer-events: none;
    transition: 0s;
 }

 .sidebar.close .nav-links li:hover .sub-menu{
    top: 0px;
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
 }

 .sidebar .nav-links li .sub-menu .link_name{
    display: none;
 }

 .sidebar.close .nav-links li .sub-menu .link_name{
    display: none;
 }

 .sidebar.close .nav-links li .sub-menu .link_name{
    font-size: 18px;
    opacity: 1;
    display: block;
 }

 .sidebar .nav-links li .sub-menu.blank {
    opacity: 1;
    pointer-events: auto;
    padding: 3px 20px 6px 16px;
    opacity: 0;
    pointer-events: none;
    transition: 0s;
}

.sidebar .nav-links li:hover .sub-menu.blank{
    top: 50%;
    transform: translateY(-50%);
}

.sidebar .profile-details{
    position: fixed;
    bottom: 0;
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1d1b31;
    padding: 6px 0;
    transition: all 0.5s ease;
}

.sidebar.close .profile-details{
    background: none;
}

.sidebar.close .profile-details{
    width: 78px;
}

.sidebar .profile-details .profile-content{
     display: flex;
     align-items: center;
     
}

.sidebar .profile-details img{
    height: 52px;
    width: 52px;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 14px 0 12px;
    background: #1d1b31;
    padding: 10px;
    transition: all 0.5s ease;
}

.sidebar.close .profile-details img{
    padding: 10px;
}
.sidebar .profile-details .profile_name,
.sidebar .profile-details .job{
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
}

.sidebar.close .profile-details i,
.sidebar.close .profile-details .profile_name,
.sidebar.close .profile-details .job{
    display: none;
}


.sidebar .profile-details .job{
    font-size: 12px;
}

.home-section{
    position: relative;
    background: #e4e9f7;
    height: 100vh;
    left: 260px;
    width: calc(100% - 260px);
    transition: all 0.5s ease;
}

.sidebar.close ~ .home-section{
    left: 78px;
    width: calc(100% - 78px);
}

.home-section .home-content{
    height: 60px;
    display: flex;
    align-items: center;
}

.home-section .home-content .bx-menu,
.home-section .home-content .text{
    color: #11101d;
    font-size: 35px;
}

.home-section .home-content .bx-menu{
    margin: 0 15px;
    cursor: pointer;
}

.home-section .home-content .text{
    font-size: 26px;
    font-weight: 600;
}

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表