masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial css > Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh

Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh

WBOY
Lepaskan： 2022-08-09 11:07:03
ke hadapan
2169 orang telah melayarinya

Artikel ini membawakan anda pengetahuan yang berkaitan tentang css, yang terutamanya memperkenalkan isu berkaitan seperti sifat pelaksanaan bar navigasi css asas dan menu lungsur Menggunakan CSS, anda boleh menukarnya menjadi baik-. mencari satu. Bar navigasi bukannya menu HTML yang membosankan, mari kita lihat, saya harap ia akan membantu semua orang.

Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh

(Belajar perkongsian video: tutorial video css, tutorial video html)

Bar navigasi

Penggunaan bar navigasi yang mahir adalah sangat penting untuk mana-mana tapak web.

Menggunakan CSS anda boleh mengubahnya menjadi bar navigasi yang cantik dan bukannya menu HTML yang membosankan.

Bar navigasi = senarai pautan

Sebagai asas HTML standard, bar navigasi diperlukan.
Dalam contoh kami, kami akan membina bar navigasi senarai HTML standard.

Navbar pada asasnya ialah senarai terpaut, jadi menggunakan elemen <ul></ul> dan <li> sangat masuk akal, HTML awam: 

Salin selepas log masuk
Salin selepas log masuk



Sekarang, mari kita keluarkan bahagian tepi daripada senarai Jarak dan pelapik: 


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;}
Salin selepas log masuk


Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh


Contoh analisis: 
list-style-type:none – Keluarkan tanda kecil di hadapan senarai tidak memerlukan bar navigasi tanda senarai. 
 Mengalih keluar tetapan lalai penyemak imbas margin dan padding kepada 0. 


Kod dalam contoh di atas ialah kod standard yang digunakan untuk bar navigasi menegak dan mendatar. 


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
    </style>




Salin selepas log masuk





Bar navigasi menegak


Dalam kod di atas, kita hanya memerlukan gaya elemen <a></a> untuk mencipta bar navigasi menegak: 


li a {
  display: block;
  width: 60px;
  background-color: #dddddd;}
Salin selepas log masuk


 Contoh penerangan :


display:block Memaparkan pautan elemen blok, menjadikan keseluruhan kawasan pautan boleh klik (bukan teks sahaja), yang membolehkan kami menentukan lebar lebar: 60px. 


Elemen sekat adalah lebar maksimum secara lalai. Kami akan menentukan lebar 60 piksel. 


Nota: Pastikan anda menyatakan lebar elemen  <a></a> dalam bar navigasi menegak. Jika anda meninggalkan lebar, IE6 mungkin mempunyai kesan yang tidak dijangka. 


Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        li a {
            display: block;
            width: 60px;
            background-color: #dddddd;
        }
    </style>




Salin selepas log masuk





Instance Bar Navigasi Menegak


Buat contoh bar navigasi menegak yang mudah dan ubah suai warna latar belakang apabila tetikus bergerak ke pilihan: 


Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
        }
        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        /* 鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #555;
            color: white;
        }
    </style>




Salin selepas log masuk





Instance bar navigasi aktif/semasa


Selepas pilihan diklik, kami boleh menambah kelas “active” untuk menyeragamkan pilihan yang dipilih: 
Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh


li a.active {
    background-color: #4CAF50;
    color: white;}li a:hover:not(.active) {
    background-color: #555;
    color: white;}
Salin selepas log masuk


Kod contoh: 


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
        }
        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }
        /* 鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #555;
            color: white;
        }
        li a.active {
            background-color: #4CAF50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>




Salin selepas log masuk



<script>
function removeActiveClass(node) {
    node.className = &#39;&#39;;
}

let menus = document.querySelectorAll(&#39;#nav&#39;);

menus.forEach(function (value, index) {
    value.addEventListener(&#39;click&#39;, function (e) {
        var target = e.target;
        Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass);
        target.className = &#39;active&#39;;
    })
});
</script>



Buat pautan dan tambah sempadan


Anda boleh menambah gaya <li> or <a> </a>
</li> pada text-align:center untuk menjadikan pautan itu Berpusat. 


Anda boleh menambah atribut sempadan pada jidar <ul></ul> untuk menjadikan bar navigasi mempunyai jidar. 
 Jika anda ingin menambah sempadan pada setiap pilihan, anda boleh menambah sempadan bawah pada setiap elemen <li>: 


Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 200px;
            background-color: #f1f1f1;
            border: 1px solid #555;
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        li {
            text-align: center;
            border-bottom: 1px solid #555;
        }

        li:last-child {
            border-bottom: none;
        }

        li a.active {
            background-color: #4CAF50;
            color: white;
        }

        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>




Salin selepas log masuk



<script>
function removeActiveClass(node) {
    node.className = &#39;&#39;;
}

let menus = document.querySelectorAll(&#39;#nav&#39;);

menus.forEach(function (value, index) {
    value.addEventListener(&#39;click&#39;, function (e) {
        var target = e.target;
        Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass);
        target.className = &#39;active&#39;;
    })
});
</script>



Navigasi tetap dengan skrin penuh height Bar


Seterusnya kami mencipta bar navigasi tetap dengan ketinggian skrin penuh di sebelah kiri dan kandungan boleh ditatal di sebelah kanan. 


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */}
Salin selepas log masuk


Nota: Contoh ini boleh digunakan pada peranti mudah alih. 


Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh
 Kod Sumber


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 25%;
            background-color: #f1f1f1;
            height: 100%; /* 全屏高度 */
            position: fixed; 
            overflow: auto; /* 如果导航栏选项多，允许滚动 */
        }

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        li {
            text-align: center;
            border-bottom: 1px solid #555;
        }

        li:last-child {
            border-bottom: none;
        }

        li a.active {
            background-color: #4CAF50;
            color: white;
        }

        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>




Salin selepas log masuk



<script>
function removeActiveClass(node) {
    node.className = &#39;&#39;;
}

let menus = document.querySelectorAll(&#39;#nav&#39;);

menus.forEach(function (value, index) {
    value.addEventListener(&#39;click&#39;, function (e) {
        var target = e.target;
        Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass);
        target.className = &#39;active&#39;;
    })
});
</script>



Bar Navigasi Mendatar


Terdapat dua cara untuk mencipta bar navigasi mendatar. Gunakan 内联 (inline)  atau 浮动 (float)  untuk item senarai. 


Kedua-dua kaedah adalah baik, tetapi jika anda mahu pautan mempunyai saiz yang sama, anda perlu menggunakan kaedah apungan. 


Item senarai sebaris


Salah satu cara untuk mencipta bar navigasi mendatar ialah dengan menentukan elemen Kod di atas adalah sebaris standard: 


ul {
    list-style-type:none;
    margin:0;
    padding:0;}li {
    display:inline;}
Salin selepas log masuk


Contoh analisis: <.>


; - Secara lalai, elemen display:inline ialah elemen blok. <li> Di sini kami mengalih keluar baris baharu sebelum dan selepas setiap item senarai untuk memaparkan satu baris. 
Item senarai terapung
Dalam contoh di atas pautan mempunyai lebar yang berbeza. <p></p>Untuk semua pautan mempunyai lebar yang sama, apungkan elemen 
 dan nyatakan lebar elemen <li>:  <a></a>


ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;}li {
    float:left;}li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;}
Salin selepas log masuk
Contoh analisis: <p></p>

   float:left – 使用浮动块元素的幻灯片彼此相邻。
display:block – 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。
   width:60px – 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。
Salin selepas log masuk
 Contoh bar navigasi mendatar 
 Cipta bar navigasi mendatar dan ubah suai warna latar belakang selepas tetikus bergerak ke pilihan. <p></p>

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;}
 li {
    float: left;}
 li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;}
 /*鼠标移动到选项上修改背景颜色 */li a:hover {
    background-color: #111;}
Salin selepas log masuk


链接右对齐


将导航条最右边的选项设置右对齐 (float:right;)：
Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh


Salin selepas log masuk
Salin selepas log masuk

<li>关于

添加分割线


<li>  通过 border-right 样式来添加分割线:


/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
    border-right: 1px solid #bbb;
}
 
li:last-child {
    border-right: none;
}
Salin selepas log masuk



Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh


固定导航条


可以设置页面的导航条固定在头部或者底部。


固定在头部：


ul {
    position: fixed;
    top: 0;
    width: 100%;}
Salin selepas log masuk


固定在底部：


ul {
    position: fixed;
    bottom: 0;
    width: 100%;}
Salin selepas log masuk


注意: 该实例可以在移动设备上使用。


源码


Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh


nbsp;html>


    <meta>
    <title>显示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
            border-right: 1px solid #bbb;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        /*鼠标移动到选项上修改背景颜色 */
        li a:hover {
            background-color: #111;
        }
        li a.active {
            background-color: #4CAF50;
            color: white;
        }
        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>




Salin selepas log masuk



<script>
function removeActiveClass(node) {
    node.className = &#39;&#39;;
}

let menus = document.querySelectorAll(&#39;#nav&#39;);

menus.forEach(function (value, index) {
    value.addEventListener(&#39;click&#39;, function (e) {
        var target = e.target;
        Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li a&#39;), removeActiveClass);
        target.className = &#39;active&#39;;
    })
});
</script>



示例 1


Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh


nbsp;html>


    <meta>
    <title>原生js实现菜单动态添加active类</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50px;
            list-style: none;
            box-shadow: 0 2px 4px #eeeeee;
        }
        ul > li {
            padding: 6px 16px;
            margin: 0 5px;
            border-right: 1px solid #f7f7f7;
            border-bottom: 1px solid transparent;
            cursor: pointer;
        }
        ul > li:last-child{
            border-right: none;
        }
        li:hover, li:focus, .active {
            color: #ff6615;
            border-bottom: 1px solid #ff6615;
        }
    </style>




Salin selepas log masuk


    
    <li>首页
    <li>产品中心
    <li>新闻资讯
    <li>文档下载
    <li>联系我们



<script>
    function removeActiveClass(node) {
        node.className = &#39;&#39;;
    }

    let menus = document.querySelectorAll(&#39;#nav&#39;);
    menus.forEach(function (value, index) {
        value.addEventListener(&#39;click&#39;, function (e) {
            var target = e.target;
            Array.prototype.forEach.call(document.querySelectorAll(&#39;#nav li&#39;), removeActiveClass);
            target.className = &#39;active&#39;;
        })
    });
</script>


CSS 下拉菜单


使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。


基本下拉菜单


当鼠标移动到指定元素上时，会出现下拉菜单。


Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh


nbsp;html>


    <meta>
    <title>下拉菜单</title>
    <style>
        /*鼠标下拉菜单*/
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>



<div>
    <span>鼠标移动到我这看到下拉菜单！</span>
    <div>
        <p>CSDN博客</p>
        <p>wgchen.blog.csdn.net</p>
    </div>
</div>



Salin selepas log masuk


实例解析


HTML 部分


我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span></span> , 或 a  <button></button> 元素。


使用容器元素 (如： <p></p> ) 来创建下拉菜单的内容，并放在任何你想放的位置上。


使用 <p> </p> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。


CSS 部分


.dropdown 类使用 position:relative：
 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute ) 的右下角位置。


.dropdown-content 类中是实际的下拉菜单。
 默认是隐藏的，在鼠标移动到指定元素后会显示。 注意 min-width 的值设置为 160px。你可以随意修改它。


注意：如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100%
 ( overflow:auto 设置可以在小尺寸屏幕上滚动)。


我们使用 box-shadow 属性让下拉菜单看起来像一个”卡片”。


:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。


下拉菜单


创建下拉菜单，并允许用户选取列表中的某一项：


Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh


nbsp;html>


    <meta>
    <title>下拉菜单</title>
    <style>
        /* 下拉按钮样式 */
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 容器 <div> - 需要定位下拉内容 */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* 下拉内容 (默认隐藏) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        }

        /* 下拉菜单的链接 */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* 鼠标移上去后修改下拉菜单链接颜色 */
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

        /* 在鼠标移上去后显示下拉菜单 */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 当下拉内容显示后修改下拉按钮的背景颜色 */
        .dropdown:hover .dropbtn {
            background-color: #3e8e41;
        }
    </style>



    <div>
        <button>下拉菜单</button>
        <div>
            <a>CSDN博客 1</a>
            <a>CSDN博客 2</a>
            <a>CSDN博客 3</a>
        </div>
    </div>



Salin selepas log masuk


（学习视频分享：css视频教程、html视频教程）
Atas ialah kandungan terperinci Pemahaman mudah tentang bar navigasi CSS asas dan menu lungsur turun CSS melalui contoh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
                

            

            

                                

                    Label berkaitan：
                    

                        css                    

                

                                
sumber：csdn.net

                            

            

                                    
                        Artikel sebelumnya：Penjelasan terperinci tentang sifat lebar dan ketinggian CSS
                    
                                    
                        Artikel seterusnya：Penjelasan terperinci tentang sifat tetap sifat kedudukan CSS
                    
                            

            

       
                
Kenyataan Laman Web ini

                
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

            

            

            

                
Artikel terbaru oleh pengarang

                
            

            

                
Isu terkini

                

                                        

                        

                            Di manakah perisian kursus tentang pemetaan minda CSS?
                            Perisian kursus
                            

                                

                                     daripada 2024-04-16 10:10:18
                                

                                

                                    
  0 

                                    
0

                                    
1335

                                

                            

                        

                    

                    

                                        

                        

                            Halaman tiba-tiba tidak dapat menarik css atau bootstrap
                            Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
                            

                                

                                     daripada 2024-04-06 21:58:04
                                

                                

                                    
  0 

                                    
1

                                    
800

                                

                            

                        

                    

                    

                                        

                        

                            Ubah suai gaya CSS sebaris secara dinamik dalam Javafx
                            Saya cuba menukar imej latar belakang anak tetingkap apabila aplikasi dimaksimumkan. Latar...
                            

                                

                                     daripada 2024-04-06 20:57:16
                                

                                

                                    
  0 

                                    
1

                                    
487

                                

                            

                        

                    

                    

                                        

                        

                            Bagaimana untuk membuat elemen terapung disusun secara menegak dan bukannya secara mendatar dalam CSS?
                            Saya cuba membuat halaman web dengan dua lajur, dengan kandungan utama di satu pihak dan k...
                            

                                

                                     daripada 2024-04-06 20:45:26
                                

                                

                                    
  0 

                                    
2

                                    
386

                                

                            

                        

                    

                    

                                        

                        

                            Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada?
                            Saya mempunyai kod CSS berikut yang merupakan sebahagian daripada kod CSS yang lebih besar...
                            

                                

                                     daripada 2024-04-06 20:41:51
                                

                                

                                    
  0 

                                    
1

                                    
518

                                

                            

                        

                    

                    

                                    

            


            

                

                    
Topik-topik yang berkaitan

                    Lagi>
                    
                

                

                    
                

            

        

    


    

    
    
        

            
Cadangan popular

            

                
            

        

        
        

            

                
Tutorial Popular

                Lagi>
                
            

            

                

                    
Tutorial berkaitan 

                    
Cadangan popular

                    
Kursus terkini

                

                
                
                
            

            
        


        

            

                
Muat turun terkini

                Lagi>
                
            

                        
            

                

                    
kesan web 

                    
Kod sumber laman web

                    
Bahan laman web

                    
Templat hujung hadapan