響應式可彈出橫向導航欄

chenatu 發布于2019-08-02 11:04 / 1428人閱讀

摘要：響應式可彈出橫向導航欄的特點在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在端時導航欄的內容可以通過來顯示和隱藏，在移動端時也可以達到同樣的效果。

響應式可彈出橫向導航欄的特點

在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在PC端時導航欄的內容可以通過bars來顯示和隱藏，在移動端時也可以達到同樣的效果。
效果如圖所示：

代碼如下（html）：



    
        響應式菜單
        
        
        
    
    
        
            
            
            
        
        
            
                首頁
                產品
                關于
                服務
                聯系
            
        
        
        
        （控制鼠標點下時會顯示的內容）

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);（控制第一個span順時針旋轉45度）
}
.bars.active span:nth-child(3){
    transform:translateY(0px) rotate(45deg);（控制第三個span逆時針旋轉45度）
}
.bars.active span:nth-child(2){
    transform:translateY(-100%);（控制第二個span隱藏）
    opacity:0;
}（這樣就可以形成一個關閉圖標）

.nav{
    height:60px;
    background:#fff;
    padding:0px;
    margin:0px;
    transition:.5s;
}
.nav.active{
    transform:translate(-100%);
    transition:.5s;
    
}
.nav ul{
    float:right;
    
    display:flex;（可以讓父元素內的子元素排成一行）
    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;
}
(這里用媒體查詢來實現響應式的效果)
@media screen and (max-width:640px){
    .nav{
        height:100vh;（指的是在手機上視口有多高，這個就有多高）
    }
    .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);
    }

GPU云服務器云服務器橫向導航橫向二級導航 html二級導航橫向 html橫向菜單導航

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

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

響應式可彈出橫向導航欄

摘要：響應式可彈出橫向導航欄的特點在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在端時導航欄的內容可以通過來顯示和隱藏，在移動端時也可以達到同樣的效果。響應式可彈出橫向導航欄的特點在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在PC端時導航欄的內容可以通過bars來顯示和隱藏，在移動端時也可以達到同樣的效果。效果如圖所示：showImg(https://segme...

Harriet666 2019-08-29 16:10 評論0 收藏0
響應式可彈出橫向導航欄

摘要：響應式可彈出橫向導航欄的特點在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在端時導航欄的內容可以通過來顯示和隱藏，在移動端時也可以達到同樣的效果。響應式可彈出橫向導航欄的特點在排網頁時響應式可彈出導航欄可以增加你網頁的美觀和可讀性。在PC端時導航欄的內容可以通過bars來顯示和隱藏，在移動端時也可以達到同樣的效果。效果如圖所示：showImg(https://segme...

entner 2019-08-23 10:27 評論0 收藏0
??使用 HTML、CSS 和 JS 創建響應式可過濾的游戲+工具展示頁面 ??

響應式可過濾的游戲+工具展示頁面用于各種網站以按類別對圖像進行排序。在本文中，我將向您展示如何借助 HTML CSS 和 javascript 創建響應式可過濾的游戲+工具展示頁面。可過濾作品集是一種流行的網絡元素，可用于各種網站。它是一種作品畫廊，大量作品整齊地排列在一起。值得注意的一點是，所有作品都可以在這里按類別排序。有一個導航欄，其中對所有類別進行了排序。單擊這些類別中的任何一個時。...

Lavender 2021-09-06 15:00 評論0 收藏0
Python--Redis實戰：第三章：Redis命令：第二節：列表

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

superPershing 2019-07-30 18:02 評論0 收藏0