成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

響應(yīng)式可彈出橫向?qū)Ш綑?

entner / 1231人閱讀

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

代碼如下（html）：



    
        響應(yīng)式菜單
        
        
        
    
    
        

            
            
            
        

        
        
        
        （控制鼠標(biāo)點(diǎn)下時(shí)會(huì)顯示的內(nèi)容）
    
    
body{
    margin:0;
    background:black;
}
.bars{
    width:60px;
    height:60px;
    background:white;
    position:fixed;
    top:0px;
    left:0px;
    cursor:pointer;
    z-index:1;
    border-right:1px solid rgba(0,0,0.2);
    
}
.bars span{
    display:block;
    width:30px;
    height:2px;
    background:#262626;
    position:absolute;
    top:calc(50% - 1px);
    left:calc(50% - 15px);
    
    transition:.2s;
}


.bars span:nth-child(1){
    transform:translateY(-10px);
}
.bars span:nth-child(3){
    transform:translateY(10px);
}
.bars.active span:nth-child(1){
    transform:translateY(0px) rotate(-45deg);（控制第一個(gè)span順時(shí)針旋轉(zhuǎn)45度）
}
.bars.active span:nth-child(3){
    transform:translateY(0px) rotate(45deg);（控制第三個(gè)span逆時(shí)針旋轉(zhuǎn)45度）
}
.bars.active span:nth-child(2){
    transform:translateY(-100%);（控制第二個(gè)span隱藏）
    opacity:0;
}（這樣就可以形成一個(gè)關(guān)閉圖標(biāo)）

.nav{
    height:60px;
    background:#fff;
    padding:0px;
    margin:0px;
    transition:.5s;
}
.nav.active{
    transform:translate(-100%);
    transition:.5s;
    
}
.nav ul{
    float:right;
    
    display:flex;（可以讓父元素內(nèi)的子元素排成一行）
    list-style:none;
    padding:0px 20px 0px 0px;
    margin:0px;
    
}
.nav ul li{
    border-right:1px solid rgba(0,0,0,.2);
}
.nav ul li:last-child{
    border-right:none;
}
.nav ul li a{
    line-height:60px;
    text-decoration:none;
    color:#262626;
    padding:0 20px;
    display:block;
}
.nav ul li a:hover{
    background:#262626;
    color:#fff;
}
(這里用媒體查詢來(lái)實(shí)現(xiàn)響應(yīng)式的效果)
@media screen and (max-width:640px){
    .nav{
        height:100vh;（指的是在手機(jī)上視口有多高，這個(gè)就有多高）
    }
    .nav ul{
        display:block;
        width:100%;
        text-align:center;
        padding:0px;
    }
    .nav ul li{
        border-right:none;
        border-bottom:1px solid rgba(0,0,0 .2);
    }

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

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

相關(guān)文章

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

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

    Harriet666 評(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è)的美觀和可讀性。在端時(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è)的美觀和可讀性。在PC端時(shí)導(dǎo)航欄的內(nèi)容可以通過(guò)bars來(lái)顯示和隱藏，在移動(dòng)端時(shí)也可以達(dá)到同樣的效果。效果如圖所示：showImg(https://segme...

    chenatu 評(píng)論0 收藏0

  • ??使用 HTML、CSS 和 JS 創(chuàng)建響應(yīng)式可過(guò)濾的游戲+工具展示頁(yè)面 ??

    響應(yīng)式可過(guò)濾的游戲+工具展示頁(yè)面 用于各種網(wǎng)站以按類(lèi)別對(duì)圖像進(jìn)行排序。在本文中，我將向您展示如何借助 HTML CSS 和 javascript 創(chuàng)建響應(yīng)式可過(guò)濾的游戲+工具展示頁(yè)面。 可過(guò)濾作品集是一種流行的網(wǎng)絡(luò)元素，可用于各種網(wǎng)站。它是一種作品畫(huà)廊，大量作品整齊地排列在一起。值得注意的一點(diǎn)是，所有作品都可以在這里按類(lèi)別排序。有一個(gè)導(dǎo)航欄，其中對(duì)所有類(lèi)別進(jìn)行了排序。單擊這些類(lèi)別中的任何一個(gè)時(shí)。...

    Lavender 評(píng)論0 收藏0

  • Python--Redis實(shí)戰(zhàn)：第三章：Redis命令：第二節(jié)：列表

    摘要：上一篇文章實(shí)戰(zhàn)第三章命令第一節(jié)字符串下一篇文章實(shí)戰(zhàn)第三章命令第三節(jié)集合在之前我們介紹過(guò)，的列表允許用戶從序列的兩端推入或者彈出元素獲取列表元素以及執(zhí)行各種常見(jiàn)的列表操作。 上一篇文章： Python--Redis實(shí)戰(zhàn)：第三章：Redis命令：第一節(jié)：字符串下一篇文章：Python--Redis實(shí)戰(zhàn)：第三章：Redis命令：第三節(jié)：集合 在之前我們介紹過(guò)，Redis的列表允許用戶從序列...

    superPershing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<