使用 HTML 和 CSS 创建动画侧边导航栏

几乎每个网站都包含一个侧面导航栏。通过使用侧面导航栏，用户可以轻松导航到网站的其他页面，如果导航栏是动画的，它看起来很有吸引力并吸引了观众的注意力。在本文中，我们将看到创建侧边导航栏的基本代码。代码包含 HTML 代码和 CSS。

方法：方法是使用第n个子属性来动画悬停效果。

HTML 代码：在本节中，我们将使用无序列表创建包含文本、图像、图标等的侧边导航栏的基本结构。

HTML

  

    
    
    side navigation bar
    
    

  

    
        
            
                
            
            
                
                        
                        Dashboard
                    
                
                
                        
                        Message
                    
                
                
                        
                        users
                    
                
                
                        
                        Rewards
                    
                
                
                        
                        Report
                    
                
                
                        
                        Setting
                    
                
                
            
        
    

  

CSS 代码：在本节中，我们为 HTML 代码中使用的文本、图标和图像提供基本样式，并且我们使用 nth-child 属性来移动悬停效果，简而言之，为悬停效果设置动画。

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
  
.header {
    width: 100%;
    height: 100vh;
    background: #ccffff;
}
  
.side-nav {
    width: 250px;
    height: 100%;
    background: #00ff00;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px 30px;
}
  
.logo {
    display: block;
    margin-bottom: 130px;
}
  
.logo-img {
    width: 170px;
    margin-top: 20px;
}
  
.nav-links {
    list-style: none;
    position: relative;
}
  
.nav-links li {
    padding: 10px 0;
}
  
.nav-links li a {
    color: #000000;
    text-decoration: none;
    padding: 10px 14px;
    display: flex;
    align-items: center;
}
  
.nav-links li a i {
    font-size: 22px;
    margin-right: 20px;
}
  
.active {
    background: #000000;
    width: 100%;
    height: 47px;
    position: absolute;
    left: 0;
    top: 2.6%;
    z-index: -1;
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(255, 255, 255, 0.4);
    display: none;
    transition: top 0.5s;
}
  
.nav-links li:hover a {
    color: #fff;
    transition: 0.3s;
}
  
.nav-links li:hover~.active {
    display: block;
}
  
.nav-links li:nth-child(1):hover~.active {
    top: 2.6%;
}
  
.nav-links li:nth-child(2):hover~.active {
    top: 19.2%;
}
  
.nav-links li:nth-child(3):hover~.active {
    top: 35.8%;
}
  
.nav-links li:nth-child(4):hover~.active {
    top: 52.4%;
}
  
.nav-links li:nth-child(5):hover~.active {
    top: 69%;
}
  
.nav-links li:nth-child(6):hover~.active {
    top: 85.6%;
}

输出：