web--響應式導航菜單

NickZhou 發布于2019-08-23 10:28 / 3392人閱讀

摘要：響應式導航菜單代碼如下代碼響應式導航菜單首頁導航產品新聞我們定義樣式媒體查詢屏幕寬度最大的時候執行里面的效果圖

響應式導航菜單 代碼如下 HTML代碼：

定義樣式：

*{
    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的時候執行里面的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);
    }
}

效果圖：

GPU云服務器云服務器 jq響應式菜單響應式響應式布局響應式網站

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

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

web--響應式導航菜單

摘要：響應式導航菜單代碼如下代碼響應式導航菜單首頁導航產品新聞我們定義樣式媒體查詢屏幕寬度最大的時候執行里面的效果圖響應式導航菜單代碼如下 HTML代碼：響應式導航菜單首頁 ...

Cc_2011 2019-08-29 16:12 評論0 收藏0
web--響應式導航菜單

摘要：響應式導航菜單代碼如下代碼響應式導航菜單首頁導航產品新聞我們定義樣式媒體查詢屏幕寬度最大的時候執行里面的效果圖響應式導航菜單代碼如下 HTML代碼：響應式導航菜單首頁 ...

levius 2019-08-02 11:04 評論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
響應式導航菜單（css+js）

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

CodeSheep 2019-08-29 16:06 評論0 收藏0