使用 html css 和 javascript 的導覽列抽屜 https://www.instagram.com/webstreet_code/

在 Instagram 上追蹤我們：https://www.instagram.com/webstreet_code/

    
    
    抽屜標題>
    
   

    *{
        保證金：0；
        填充：0；
        框大小：邊框框；
        字體系列：'Poppins'，sans-serif；
    }

    身體 {
            背景顏色：#141625；
            顯示：柔性；
            對齊項目：居中；
            justify-content：flex-start；
            高度：100vh；
            溢出：隱藏；
        }
        。漢堡{
            位置：絕對；
            頂部：20 像素；
            左：18 像素；
            遊標：指針；
            z 索引：10；
        }

        .漢堡.線{
            寬度：35 像素；
            高度：4px；
            背景顏色：#f0a500；
            邊距：6px 0；
            邊框半徑：2px；
            過渡：全部 0.4s 緩和；
        }

        .選單列{
            位置：固定；
            頂部：0；
            左：0；
            寬度：80px；
            高度：100%；
            背景顏色：#1f2235；
            盒子陰影：2px 0 15px rgba(0, 0, 0, 0.6);
            溢出：隱藏；
            過渡：寬度0.4s緩和；

        }

        .menu-bar.open {
            寬度：220px；
        }

        .選單列 ul {
            列表樣式：無；
            內邊距：80px 10px；
        }
        .menu-bar ul li {
            顯示：柔性；
            對齊項目：居中；
            內邊距：15px；
            顏色：#b2becd；
            遊標：指針；
            過渡：背景顏色 0.3s 緩動；
            左邊框：4px實心透明；
        }

        .menu-bar ul li i {
            字體大小：24px；
            右邊距：20px；
            過渡：變換0.3s緩和；
        }
        .menu-bar ul li span {
            不透明度：0；
            字體大小：16px；
            過渡：不透明度 0.4s 緩動；
            空白：nowrap；
        }

        .menu-bar.open ul li span {
            不透明度：1；
        }

        .menu-bar ul li:hover {
            背景顏色：#282a40；
            盒子陰影：0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .menu-bar ul li:懸停 i {
            變換：縮放（1.2）；
        }

        .menu-bar ul li.active {
            背景顏色：#f0a500；
            邊框半徑：20px；
            顏色：#1f2235；
            左邊框：4px 實線#f0a500；
        }

        .menu-bar ul li.active i {
            顏色：#1f2235；
        }

        .menu-bar ul li.active span {
            顏色：#1f2235；
        }

















   風格>
頭>

    <div>




          </div>

以上是使用 html css 和 javascript 的導覽列抽屜 https://www.instagram.com/webstreet_code/的詳細內容。更多資訊請關注PHP中文網其他相關文章！