響應式導航欄-利用純css實現

阿新 • • 發佈：2019-02-03

思路：

當螢幕為移動裝置時，隱藏導航欄列表專案，顯示選單按鈕。給選單按鈕（電腦時隱藏）加入hover 或者checked選擇器實現，當hover或者checked的觸發時動態修改導航欄列表專案display等其他樣式。這樣當滑鼠單擊選單按鈕時就可以動態修改導航欄列表的樣式了。（用checked選擇器需要在導航欄加一個 checkbox)
展示：

1.pc介面

（提示，我的部落格還用了bootstrap樣式，自己寫的這個導航欄個別樣式會被覆蓋，導致有些偏差，又稍作了些修改），展示的程式碼為未修改，最初些的樣式程式碼。）
我的部落格應用後介面

2.移動裝置介面

我的部落格應用後介面

4.示例程式碼：

<html 
>
  <head>
    <title></title>
    <meta name="viewport" content="width=320,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta content="">
    <style>
       .navbar{
           background-color: #34495E;
           height: 50px;
           display: block 
;
       }
       .navbar .nav-list{
           z-index: 0;
           display: block;

       }
       .navbar .nav-list li{
           list-style: none;
           float: left;
           margin-left: 30px;
       }
       .navbar .nav-list a{
           color: white;
           line-height: 50px;
           text-decoration-line 
: none;
       }
       .navbar .nav-list  a:hover{
           color: #1ABC9C;

       }
       .navbar input:checked~.nav-list {
           position: absolute;
           padding-bottom: 5px;
           padding-left: 5px;
           padding-right: 5px;
            display: block;
            background-color: #34495E;
            z-index: 0;
            margin-top: 50px;

       }
       .navbar input:checked~.nav-list li{
        clear: both;
        background-color: #34495E;

       }
       .navbar label{
           display: none;
       }
       .navbar .nav-toggle{
           display: none;
       }
       @media screen and (max-width: 600px) {
           .navbar .nav-toggle{
               display: none;
           }
           .navbar label{
               display: block;
               z-index: 4;
           }
           .navbar .nav-list{
               display: none;
               margin-left: 0px;
           }
           .navbar .nav-list li{
               margin-left: 0px;
           }
           .navbar  .menu-icon{
                display: block;
                float: left;
                width: 36px;
                height: 26px;
                line-height: 0;
                padding-top: 10px;
                text-align: center;

           }
           .navbar  .menu-icon>svg path{
                fill: white;
           }
           .navbar  label[for="nav-toggler"] {
                display: block;
                float: left;
                width: 36px;
                height: 36px;
                z-index: 2;
                cursor: pointer;
            }
       }
    </style>
  </head>
  <body>
    <header>

        <nav class="navbar">
            <input type="checkbox" id="nav-toggle" class="nav-toggle"/>
            <label for="nav-toggle">
                <span class="menu-icon">
                    <svg viewBox="0 0 18 15" width="18px" height="15px">
                        <path fill="white" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
                        <path fill="white" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
                        <path fill="white" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
                   </svg>
              </span>
            </label>
            <ul class="nav-list">
                <li><a href="#">選單一</a></li>
                <li><a href="#">選單二</a></li>
                <li><a href="#">選單三</a></li>
            </div>
        </nav>
    </header>
  </body>
</html>

（導航欄選單按鈕為svg繪圖，可以換成圖片。本程式碼參照jekyll minima主題的導航欄實現的。）

響應式導航欄-利用純css實現

思路：當螢幕為移動裝置時，隱藏導航欄列表專案，顯示選單按鈕。給選單按鈕（電腦時隱藏）加入hover 或者checked選擇器實現，當hover或者checked的觸發時動態修改導航欄列表專案display等其他樣式。這樣當滑鼠單擊選單按鈕時就可以動態修改導航

BootStrap-CSS樣式_佈局元件_響應式導航欄(移動裝置摺疊隨寬度增加展開)

導航欄導航欄是一個很好的功能，是 Bootstrap 網站的一個突出特點。導航欄在您的應用或網站中作為導航頁頭的響應式基礎元件。導航欄在移動裝置的檢視中是摺疊的，隨著可用檢視寬度的增加，導航欄也會水平展開。在 Bootstrap 導航欄的核心中，導航欄包括了站點名稱和基本的導航定義樣式

Bootstrap 學習筆記項目實戰響應式導航欄

span navbar fault logo zh-cn sig con href meta 導航代碼HTML： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta

bootstrap寫響應式導航欄

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 例項 - 響應式的導航欄</title> <link rel="styl

使用bootstrap製作響應式導航欄

所謂響應式導航欄，便是能根據窗體大小適配的導航欄，以前見著覺得很高階，而現在終於有機會自己寫一個了，先上幾張效果圖。這是正常螢幕：這是手機等小螢幕：點選右邊後能夠顯示出選單要實現這個效果，首先要先匯入bootstrap框架 &

純CSS實現導航欄效果

利用偽類、display和盒子模型完成一個CSS導航欄。 CSS樣式： #nav{margin:50px} .box{width:0;height:0} .btn{text-align:center

BootStrap實現簡單響應式導航菜單

bar query alt str content doctype bootstra inf ini 　　　用BootStrap實現響應式導航欄，我會對其中的一些樣式進行說明。　　先上代碼，是一個很簡單的Demo。　　　 <!doctype html>

純css實現二級導航

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>企業搜尋頁面</title> <style>

[demo]自定義響應式網頁：利用css3媒體查詢和window.matchMedia實現

需求：自定義響應式網頁，需要針對不同的螢幕尺寸做不同的處理。分析： 1，樣式處理，必須是css3媒體查詢，簡單有效； 2，行為和結構的處理，我們選用window.matchMedia函式處理

APICLOUD實現沉浸式導航欄在Android和ios上的相容

最近在使用apicloud開發一款APP，專案沒有使用安卓和ios開發人員，選擇APICLOUD開發，猶豫UI設計的導航欄是沉浸式，在Android和ios上的效果是不一樣的，ios上導航欄會浮在內容上面，將內容部分遮擋，如圖：我要達到的是不希望導航欄遮擋住內容部分，經過不懈的

純CSS實現下拉選單導航

前言：本題是網易雲課堂的前端微專業《頁面製作》課程的作業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有迴響，在學校圖書館花了幾個小時做出來並對相關知識點進行了總結，寫了這篇博文。好，進入正題。－－－－－－－－－－－－－－－－

幫助你實現響應式導航的 jQuery 外掛

　　Sidr 　　Sidr 是建立側欄和響應式選單的最佳 jQuery 外掛，提供了多種選單的顯示方案。　　Sidr →GitHub → 　　Navgoco 　　Navgoco 是一個簡單的外掛，可以把一個連結巢狀無序列表轉換成一個美麗的立式多級滑動導航，通過

第二百五十節，Bootstrap項目實戰--響應式導航

char play color home bar rgba -c fire add Bootstrap項目實戰--響應式導航學習要點：　　1.響應式導航一．響應式導航基本導航組件+響應式第一步，聲明導航區域，設置導航默認樣式，設置導航條固定在頂部na

純css實現select下拉框並排顯示

code 同時 eight spl one 背景色不起作用表單 lang <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

bootstrap-響應式導航條

bootstrap-響應式導航條1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible

純CSS實現氣泡框

set .org head left 一個 pos radi margin orange 效果圖如下：源碼： <!DOCTYPE html public "-//w3c//dtd html 4.01 transitional//en" "http://

沈浸式狀態欄的三種實現方式

stemwin barh webp trac war nba schema 布局文件 adding 沈浸式算是目前Android行業比較流行的一種App設計風格，將菜單欄北京設置為導航欄的顏色，感覺頂部狀態欄像是被入侵了一樣，因此稱為沈浸式菜單欄。本文將介紹三種方式去實現沈

響應式設計的5個css實用技巧

mda ota .html tk1 tmx htm cool http lec mongodb30%E6%AD%A3%E5%BC%8F%E7%89%88%E5%8F%91%E5%B8%83 http://www.zcool.com.cn/collection/ZMTY4O

使用純css實現波浪效果

波浪 gree transform orm infinite ram 定位 position mes 有時候我們需要實現水晃動的效果，其實我們可以通過css旋轉動畫和圓角來實現。首先來2個div,外層div相對定位，內層div絕對定位，內層div大致位於外層div上半部分

通過純css實現圖片居中的多種實現方式

splay add pad src 純css webkit web center -c html結構： 1 <div class="demo" style="width: 800px;height: 600px; border:1px solid #ddd">

響應式導航欄-利用純css實現

思路：

1.pc介面

2.移動裝置介面

4.示例程式碼：

相關推薦