国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

響應式導航欄

yintaolaowanzi / 832人閱讀

摘要:響應式導航欄響應式導航欄就是在和在移動端的渲染形式不一樣代碼如下首頁導航產品新聞我們樣式代碼如下運行結果如下圖技術要點媒體查詢當在手機的時候,需要先隱藏,點擊的時候全部顯示按鈕的制作用到了的動畫運用到了中的點擊事件持續更新,歡迎大家指教

響應式導航欄
響應式導航欄就是在pc和在移動端的渲染形式不一樣
HTML代碼如下:



    
    
    
    Document
    
    


    

css樣式

*{
    margin: 0;
    padding: 0;
}
body{
    background: #000;
}
ul{
    list-style: none;
}
a{text-decoration: none}
.bars{
    width: 60px;
    height: 60px;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;  
}
.bars span{
    width: 30px;
    height: 2px;
    background: #000;
    position: absolute;
    left: calc(50% - 15px);
    top:calc(50% - 1px);
    transition: 0.1s;
}
.bars span:first-child{
    transform: translateY(-10px);
}
.bars span:last-child{
    transform: translateY(10px);
}
.bars.active span:first-child{
    transform: rotate(45deg);
}
.bars.active span:nth-child(2){
    transform: translateX(-100%);
    opacity: 0;
}
.bars.active span:last-child{
    transform: rotate(-45deg);
}
.nav{

    height: 60px;
    background: #fff;
    transition: .4s;
}
.nav ul{
    float: right;
    display: flex;
}
.nav ul li{
    border-right:1px solid rgba(0,0,0,.2);
    line-height: 60px;
}
.nav ul li:last-child{
    border: 0;
}
.nav ul li a{
    padding: 0 20px;
    display: block;
    color: #262626;
}
.nav ul li a:hover{
    background: #262626;
     color: #fff;
}
.nav.active{
    transform: translateX(-100%);
}
@media screen and (max-width:570px){
    .nav{
        height: 100vh;
    }
    .nav ul{
        width: 100%;
        display: inherit;
        text-align: center;
    }
    .nav ul li{
        border-bottom: 1px solid rgba(0,0,0,.2);
    }
}

js代碼如下

 

運行結果如下圖

技術要點:

媒體查詢:當在手機的時候,需要先隱藏,點擊的時候全部顯示

按鈕的制作:用到了C3的動畫

運用到了js中的點擊事件

持續更新,歡迎大家指教!

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113570.html

相關文章

  • 響應可彈出橫向導航

    摘要:響應式可彈出橫向導航欄的特點在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在端時導航欄的內容可以通過來顯示和隱藏,在移動端時也可以達到同樣的效果。 響應式可彈出橫向導航欄的特點 在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在PC端時導航欄的內容可以通過bars來顯示和隱藏,在移動端時也可以達到同樣的效果。效果如圖所示:showImg(https://segme...

    Harriet666 評論0 收藏0
  • 響應可彈出橫向導航

    摘要:響應式可彈出橫向導航欄的特點在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在端時導航欄的內容可以通過來顯示和隱藏,在移動端時也可以達到同樣的效果。 響應式可彈出橫向導航欄的特點 在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在PC端時導航欄的內容可以通過bars來顯示和隱藏,在移動端時也可以達到同樣的效果。效果如圖所示:showImg(https://segme...

    entner 評論0 收藏0
  • 響應可彈出橫向導航

    摘要:響應式可彈出橫向導航欄的特點在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在端時導航欄的內容可以通過來顯示和隱藏,在移動端時也可以達到同樣的效果。 響應式可彈出橫向導航欄的特點 在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在PC端時導航欄的內容可以通過bars來顯示和隱藏,在移動端時也可以達到同樣的效果。效果如圖所示:showImg(https://segme...

    chenatu 評論0 收藏0
  • 響應導航

    摘要:響應式導航欄響應式導航欄就是在和在移動端的渲染形式不一樣代碼如下首頁導航產品新聞我們樣式代碼如下運行結果如下圖技術要點媒體查詢當在手機的時候,需要先隱藏,點擊的時候全部顯示按鈕的制作用到了的動畫運用到了中的點擊事件持續更新,歡迎大家指教 響應式導航欄 響應式導航欄就是在pc和在移動端的渲染形式不一樣 HTML代碼如下: Document ...

    OBKoro1 評論0 收藏0
  • 響應導航

    摘要:響應式導航欄響應式導航欄就是在和在移動端的渲染形式不一樣代碼如下首頁導航產品新聞我們樣式代碼如下運行結果如下圖技術要點媒體查詢當在手機的時候,需要先隱藏,點擊的時候全部顯示按鈕的制作用到了的動畫運用到了中的點擊事件持續更新,歡迎大家指教 響應式導航欄 響應式導航欄就是在pc和在移動端的渲染形式不一樣 HTML代碼如下: Document ...

    王陸寬 評論0 收藏0

發表評論

0條評論

yintaolaowanzi

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<