CSS+JS相應(yīng)式導(dǎo)航菜單

printempw 發(fā)布于2019-08-29 16:07 / 680人閱讀

摘要：響應(yīng)式導(dǎo)航菜單響應(yīng)式導(dǎo)航菜單就是當(dāng)網(wǎng)頁(yè)在其他不同視口的樣式，不同的設(shè)備需要不同的樣式需要掌握的知識(shí)掌握媒體查詢，如果你不是很懂那就看我寫的響應(yīng)式布局掌握重的簡(jiǎn)單的方法下面是代碼響應(yīng)式菜單首頁(yè)產(chǎn)品購(gòu)買服務(wù)聯(lián)系樣式代

響應(yīng)式導(dǎo)航菜單 響應(yīng)式導(dǎo)航菜單就是當(dāng)網(wǎng)頁(yè)在其他不同視口的樣式，不同的設(shè)備需要不同的樣式 需要掌握的知識(shí)

-　掌握媒體查詢，如果你不是很懂那就看我寫的CSS響應(yīng)式布局

掌握CSS重的display：none;

簡(jiǎn)單的JS方法

下面是HTML代碼




    
    響應(yīng)式菜單
    
    


    
        
            
            
        
        
            首頁(yè)
            產(chǎn)品
            購(gòu)買
            服務(wù)
            聯(lián)系

CSS樣式

*{
    margin:0;
    padding:0;
    text-decoration:none;
    list-style:none;
}
.nav{
    background:blue;
    width:100%;
    position:relative;
}
.pic{
    background:url(bottom.jpg) no-repeat;
    position:absolute;
    width:128px;
    height:46px;
    top:8px;
    left:60px;
}
.btn{
    font-size:20px;
    color:#fff;
    background:#13138a;
    display:none;
}
.btn i{
    padding:20px;
}
ul{
    margin-left:200px;
    
}
ul li{
    float:left;
}
ul li a:hover{
    background:pink;
}
ul li a{
    display:block;
    padding:20px 30px;
    color:#fff;
}
.clearfix:after{
    display:block;
    height:0;
    content:"";
    visibility:hidden;
    clear:both;
}
@media screen and (max-width:768px){
    ul li{
        float:none;
        width:100%;
        text-align:center;
    }
    ul{
        width:100%;
        display:none;
        margin:0;
    }
    .btn{
        display:block;
    }
    .pic{
        left:50%;
        margin-left:-64px;
    }
}

js代碼：

當(dāng)視口大于768px的時(shí)候：

當(dāng)視口小于768px的時(shí)候，導(dǎo)航菜單需要隱藏起來(lái)：

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

云服務(wù)器 GPU云服務(wù)器 div+css導(dǎo)航菜單簡(jiǎn)單導(dǎo)航菜單 js js滾動(dòng)導(dǎo)航菜單漂亮的導(dǎo)航菜單js

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

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

相關(guān)文章

CSS+JS相應(yīng)式導(dǎo)航菜單

摘要：響應(yīng)式導(dǎo)航菜單響應(yīng)式導(dǎo)航菜單就是當(dāng)網(wǎng)頁(yè)在其他不同視口的樣式，不同的設(shè)備需要不同的樣式需要掌握的知識(shí)掌握媒體查詢，如果你不是很懂那就看我寫的響應(yīng)式布局掌握重的簡(jiǎn)單的方法下面是代碼響應(yīng)式菜單首頁(yè)產(chǎn)品購(gòu)買服務(wù)聯(lián)系樣式代響應(yīng)式導(dǎo)航菜單響應(yīng)式導(dǎo)航菜單就是當(dāng)網(wǎng)頁(yè)在其他不同視口的樣式，不同的設(shè)備需要不同的樣式需要掌握的知識(shí) -　掌握媒體查詢，如果你不是很懂那就看我寫的CSS響應(yīng)式布局掌握C...

Carl 2019-08-02 10:59 評(píng)論0 收藏0
響應(yīng)式導(dǎo)航菜單（css+js）

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

CodeSheep 2019-08-29 16:06 評(píng)論0 收藏0
響應(yīng)式導(dǎo)航菜單（css+js）

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

sanyang 2019-08-02 10:59 評(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í)。一直以來(lái)響應(yīng)式布局都是利用的bootstrap來(lái)做，但是在手機(jī)上瀏覽的話，bootstrap樣式文件還是有點(diǎn)大 118k，如果再用上一些js庫(kù)的話，上個(gè)幾百k是輕輕松松了，這樣一來(lái)用移動(dòng)流量的話真的...

singerye 2019-08-30 12:44 評(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í)。一直以來(lái)響應(yīng)式布局都是利用的bootstrap來(lái)做，但是在手機(jī)上瀏覽的話，bootstrap樣式文件還是有點(diǎn)大 118k，如果再用上一些js庫(kù)的話，上個(gè)幾百k是輕輕松松了，這樣一來(lái)用移動(dòng)流量的話真的...

AlphaWatch 2019-08-01 15:02 評(píng)論0 收藏0