響應式導航菜單（css+js）

CodeSheep 發布于2019-08-29 16:06 / 1531人閱讀

摘要：響應式導航菜單先來看下效果圖把當視口大于的時候，導航條會顯示在外，當視口小于的時候，導航菜單需要隱藏起來代碼如下響應式首頁產品購買服務聯系代碼如下持續更新，歡迎大家指教

1.響應式導航菜單

先來看下效果圖把：

當視口大于640px的時候，導航條會顯示在外，當視口小于768px的時候，導航菜單需要隱藏起來！
代碼如下：

css代碼如下：

body{
    margin:0;
}
.nav{
    background-color:black;
    width:100%;
    position:relative;
}
.nav ul{

    margin:0;
    padding:0;
    width:80%;
    margin:0 auto;
}
.clearfix:after{
    display:block;
    content:"";
    height:0;
    clear:both;
    visibility:hidden;
}
.nav ul li{
    list-style:none;
    float:left;
}
.nav ul li a{
    color:white;
    padding:20px 30px;
    display:block;
    text-decoration:none;
}
.nav ul li a:hover{
    background-color:red;
}
.pic{
    background:url(logo.jpg) no-repeat;
    position:absolute;
    top:5px;
    left:5px;
    width:113px;
    height:39px;
}
.btn{
    
    background-color:#333;
    text-align:right;
    color:white;
    font-size:20px;
    padding:10px;
    display:none;
}
@media screen and (max-width:640px){
    .nav ul li{
        float:none;
        text-align:center;
    }
    .nav ul{
        width:100%;
    }
    .btn{
        display:block;
    }
    .pic{
        position:absolute;
        left:50%;
        margin-left:-56px;
    }
}

持續更新，歡迎大家指教！

云服務器 GPU云服務器 jq響應式菜單 div+css導航菜單簡單導航菜單 js js滾動導航菜單

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

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

CSS+JS相應式導航菜單

摘要：響應式導航菜單響應式導航菜單就是當網頁在其他不同視口的樣式，不同的設備需要不同的樣式需要掌握的知識掌握媒體查詢，如果你不是很懂那就看我寫的響應式布局掌握重的簡單的方法下面是代碼響應式菜單首頁產品購買服務聯系樣式代響應式導航菜單響應式導航菜單就是當網頁在其他不同視口的樣式，不同的設備需要不同的樣式需要掌握的知識 -　掌握媒體查詢，如果你不是很懂那就看我寫的CSS響應式布局掌握C...

printempw 2019-08-29 16:07 評論0 收藏0
CSS+JS相應式導航菜單

摘要：響應式導航菜單響應式導航菜單就是當網頁在其他不同視口的樣式，不同的設備需要不同的樣式需要掌握的知識掌握媒體查詢，如果你不是很懂那就看我寫的響應式布局掌握重的簡單的方法下面是代碼響應式菜單首頁產品購買服務聯系樣式代響應式導航菜單響應式導航菜單就是當網頁在其他不同視口的樣式，不同的設備需要不同的樣式需要掌握的知識 -　掌握媒體查詢，如果你不是很懂那就看我寫的CSS響應式布局掌握C...

Carl 2019-08-02 10:59 評論0 收藏0
響應式導航菜單（css+js）

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

sanyang 2019-08-02 10:59 評論0 收藏0
響應式布局入門之——側欄菜單

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

singerye 2019-08-30 12:44 評論0 收藏0
響應式布局入門之——側欄菜單

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

AlphaWatch 2019-08-01 15:02 評論0 收藏0