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

資訊專欄INFORMATION COLUMN

web--響應(yīng)式導(dǎo)航菜單

Cc_2011 / 1480人閱讀

摘要：響應(yīng)式導(dǎo)航菜單代碼如下代碼響應(yīng)式導(dǎo)航菜單首頁導(dǎo)航產(chǎn)品新聞我們定義樣式媒體查詢屏幕寬度最大的時(shí)候執(zhí)行里面的效果圖

響應(yīng)式導(dǎo)航菜單 代碼如下 HTML代碼： 



    
    
    
    響應(yīng)式導(dǎo)航菜單
定義樣式： 
*{
    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%);
}
/*媒體查詢*/
        /*屏幕寬度最大570px的時(shí)候執(zhí)行里面的css*/
@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);
    }
}
效果圖：

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

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

相關(guān)文章

  • web--響應(yīng)式導(dǎo)航菜單

    摘要：響應(yīng)式導(dǎo)航菜單代碼如下代碼響應(yīng)式導(dǎo)航菜單首頁導(dǎo)航產(chǎn)品新聞我們定義樣式媒體查詢屏幕寬度最大的時(shí)候執(zhí)行里面的效果圖 響應(yīng)式導(dǎo)航菜單 代碼如下 HTML代碼： 響應(yīng)式導(dǎo)航菜單 首頁 ...

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

  • web--響應(yīng)式導(dǎo)航菜單

    摘要：響應(yīng)式導(dǎo)航菜單代碼如下代碼響應(yīng)式導(dǎo)航菜單首頁導(dǎo)航產(chǎn)品新聞我們定義樣式媒體查詢屏幕寬度最大的時(shí)候執(zhí)行里面的效果圖 響應(yīng)式導(dǎo)航菜單 代碼如下 HTML代碼： 響應(yīng)式導(dǎo)航菜單 首頁 ...

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

  • 響應(yīng)式布局入門之——側(cè)欄菜單

    摘要：年月初，中共中央國(guó)務(wù)院發(fā)布了關(guān)于構(gòu)建和諧勞動(dòng)關(guān)系的意見，明確提出切實(shí)保障職工休息休假的權(quán)利，完善并落實(shí)國(guó)家關(guān)于職工工作時(shí)間全國(guó)年節(jié)及紀(jì)念日假期帶薪年休假等規(guī)定。下一步要抓好這項(xiàng)工作的落實(shí)。 一直以來響應(yīng)式布局都是利用的bootstrap來做，但是在手機(jī)上瀏覽的話，bootstrap樣式文件還是有點(diǎn)大 118k，如果再用上一些js庫(kù)的話，上個(gè)幾百k是輕輕松松了，這樣一來用移動(dòng)流量的話真的...

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

  • 響應(yīng)式布局入門之——側(cè)欄菜單

    摘要：年月初，中共中央國(guó)務(wù)院發(fā)布了關(guān)于構(gòu)建和諧勞動(dòng)關(guān)系的意見，明確提出切實(shí)保障職工休息休假的權(quán)利，完善并落實(shí)國(guó)家關(guān)于職工工作時(shí)間全國(guó)年節(jié)及紀(jì)念日假期帶薪年休假等規(guī)定。下一步要抓好這項(xiàng)工作的落實(shí)。 一直以來響應(yīng)式布局都是利用的bootstrap來做，但是在手機(jī)上瀏覽的話，bootstrap樣式文件還是有點(diǎn)大 118k，如果再用上一些js庫(kù)的話，上個(gè)幾百k是輕輕松松了，這樣一來用移動(dòng)流量的話真的...

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

  • 響應(yīng)式導(dǎo)航菜單（css+js）

    摘要：響應(yīng)式導(dǎo)航菜單先來看下效果圖把當(dāng)視口大于的時(shí)候，導(dǎo)航條會(huì)顯示在外，當(dāng)視口小于的時(shí)候，導(dǎo)航菜單需要隱藏起來代碼如下響應(yīng)式首頁產(chǎn)品購(gòu)買服務(wù)聯(lián)系代碼如下持續(xù)更新，歡迎大家指教 1.響應(yīng)式導(dǎo)航菜單 先來看下效果圖把：showImg(https://segmentfault.com/img/bVbecgx?w=1206&h=533); 當(dāng)視口大于640px的時(shí)候，導(dǎo)航條會(huì)顯示在外，當(dāng)視口小于76...

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

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

0條評(píng)論

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