響應(yīng)式導(dǎo)航欄

yintaolaowanzi 發(fā)布于2019-08-29 16:10 / 845人閱讀

摘要：響應(yīng)式導(dǎo)航欄響應(yīng)式導(dǎo)航欄就是在和在移動(dòng)端的渲染形式不一樣代碼如下首頁(yè)導(dǎo)航產(chǎn)品新聞我們樣式代碼如下運(yùn)行結(jié)果如下圖技術(shù)要點(diǎn)媒體查詢(xún)當(dāng)在手機(jī)的時(shí)候，需要先隱藏，點(diǎn)擊的時(shí)候全部顯示按鈕的制作用到了的動(dòng)畫(huà)運(yùn)用到了中的點(diǎn)擊事件持續(xù)更新，歡迎大家指教

響應(yīng)式導(dǎo)航欄

響應(yīng)式導(dǎo)航欄就是在pc和在移動(dòng)端的渲染形式不一樣

HTML代碼如下：

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代碼如下

運(yùn)行結(jié)果如下圖

技術(shù)要點(diǎn)：

媒體查詢(xún)：當(dāng)在手機(jī)的時(shí)候，需要先隱藏，點(diǎn)擊的時(shí)候全部顯示

按鈕的制作：用到了C3的動(dòng)畫(huà)

運(yùn)用到了js中的點(diǎn)擊事件

持續(xù)更新，歡迎大家指教！

云服務(wù)器 GPU云服務(wù)器響應(yīng)式響應(yīng)式布局響應(yīng)式網(wǎng)站響應(yīng)式設(shè)計(jì)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113570.html

上一篇：響應(yīng)式可彈出橫向?qū)Ш綑?/a>

相關(guān)文章

響應(yīng)式可彈出橫向導(dǎo)航欄

摘要：響應(yīng)式可彈出橫向?qū)Ш綑诘奶攸c(diǎn)在排網(wǎng)頁(yè)時(shí)響應(yīng)式可彈出導(dǎo)航欄可以增加你網(wǎng)頁(yè)的美觀(guān)和可讀性。在端時(shí)導(dǎo)航欄的內(nèi)容可以通過(guò)來(lái)顯示和隱藏，在移動(dòng)端時(shí)也可以達(dá)到同樣的效果。響應(yīng)式可彈出橫向?qū)Ш綑诘奶攸c(diǎn) 在排網(wǎng)頁(yè)時(shí)響應(yīng)式可彈出導(dǎo)航欄可以增加你網(wǎng)頁(yè)的美觀(guān)和可讀性。在PC端時(shí)導(dǎo)航欄的內(nèi)容可以通過(guò)bars來(lái)顯示和隱藏，在移動(dòng)端時(shí)也可以達(dá)到同樣的效果。效果如圖所示：showImg(https://segme...

Harriet666 2019-08-29 16:10 評(píng)論0 收藏0
響應(yīng)式可彈出橫向導(dǎo)航欄

摘要：響應(yīng)式可彈出橫向?qū)Ш綑诘奶攸c(diǎn)在排網(wǎng)頁(yè)時(shí)響應(yīng)式可彈出導(dǎo)航欄可以增加你網(wǎng)頁(yè)的美觀(guān)和可讀性。在端時(shí)導(dǎo)航欄的內(nèi)容可以通過(guò)來(lái)顯示和隱藏，在移動(dòng)端時(shí)也可以達(dá)到同樣的效果。響應(yīng)式可彈出橫向?qū)Ш綑诘奶攸c(diǎn) 在排網(wǎng)頁(yè)時(shí)響應(yīng)式可彈出導(dǎo)航欄可以增加你網(wǎng)頁(yè)的美觀(guān)和可讀性。在PC端時(shí)導(dǎo)航欄的內(nèi)容可以通過(guò)bars來(lái)顯示和隱藏，在移動(dòng)端時(shí)也可以達(dá)到同樣的效果。效果如圖所示：showImg(https://segme...

entner 2019-08-23 10:27 評(píng)論0 收藏0
響應(yīng)式可彈出橫向導(dǎo)航欄

摘要：響應(yīng)式可彈出橫向?qū)Ш綑诘奶攸c(diǎn)在排網(wǎng)頁(yè)時(shí)響應(yīng)式可彈出導(dǎo)航欄可以增加你網(wǎng)頁(yè)的美觀(guān)和可讀性。在端時(shí)導(dǎo)航欄的內(nèi)容可以通過(guò)來(lái)顯示和隱藏，在移動(dòng)端時(shí)也可以達(dá)到同樣的效果。響應(yīng)式可彈出橫向?qū)Ш綑诘奶攸c(diǎn) 在排網(wǎng)頁(yè)時(shí)響應(yīng)式可彈出導(dǎo)航欄可以增加你網(wǎng)頁(yè)的美觀(guān)和可讀性。在PC端時(shí)導(dǎo)航欄的內(nèi)容可以通過(guò)bars來(lái)顯示和隱藏，在移動(dòng)端時(shí)也可以達(dá)到同樣的效果。效果如圖所示：showImg(https://segme...

chenatu 2019-08-02 11:04 評(píng)論0 收藏0
響應(yīng)式導(dǎo)航欄

摘要：響應(yīng)式導(dǎo)航欄響應(yīng)式導(dǎo)航欄就是在和在移動(dòng)端的渲染形式不一樣代碼如下首頁(yè)導(dǎo)航產(chǎn)品新聞我們樣式代碼如下運(yùn)行結(jié)果如下圖技術(shù)要點(diǎn)媒體查詢(xún)當(dāng)在手機(jī)的時(shí)候，需要先隱藏，點(diǎn)擊的時(shí)候全部顯示按鈕的制作用到了的動(dòng)畫(huà)運(yùn)用到了中的點(diǎn)擊事件持續(xù)更新，歡迎大家指教響應(yīng)式導(dǎo)航欄響應(yīng)式導(dǎo)航欄就是在pc和在移動(dòng)端的渲染形式不一樣 HTML代碼如下： Document ...

OBKoro1 2019-08-23 10:27 評(píng)論0 收藏0
響應(yīng)式導(dǎo)航欄

摘要：響應(yīng)式導(dǎo)航欄響應(yīng)式導(dǎo)航欄就是在和在移動(dòng)端的渲染形式不一樣代碼如下首頁(yè)導(dǎo)航產(chǎn)品新聞我們樣式代碼如下運(yùn)行結(jié)果如下圖技術(shù)要點(diǎn)媒體查詢(xún)當(dāng)在手機(jī)的時(shí)候，需要先隱藏，點(diǎn)擊的時(shí)候全部顯示按鈕的制作用到了的動(dòng)畫(huà)運(yùn)用到了中的點(diǎn)擊事件持續(xù)更新，歡迎大家指教響應(yīng)式導(dǎo)航欄響應(yīng)式導(dǎo)航欄就是在pc和在移動(dòng)端的渲染形式不一樣 HTML代碼如下： Document ...

王陸寬 2019-08-02 11:04 評(píng)論0 收藏0