Compréhension simple de la barre de navigation CSS de base et du menu déroulant CSS à travers des exemples

Cet article vous apporte des connaissances pertinentes sur css, qui présente principalement des problèmes connexes tels que les propriétés d'implémentation de la barre de navigation CSS de base et du menu déroulant. En utilisant CSS, vous pouvez la convertir en une belle barre de navigation au lieu d'une. ennuyeux. Jetons un coup d’œil au menu HTML, j’espère qu’il sera utile à tout le monde.

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS, Tutoriel vidéo HTML)

Barre de navigation

Une utilisation compétente de la barre de navigation est très importante pour tout site Web.

En utilisant CSS, vous pouvez vous transformer en une belle barre de navigation au lieu d'un menu HTML ennuyeux.

Barre de navigation = Liste de liens

En tant que base HTML standard, une barre de navigation est indispensable.
Dans notre exemple, nous allons construire une barre de navigation de liste HTML standard.

Une barre de navigation est essentiellement une liste de liens, donc utiliser les éléments <ul></ul> et <li> a beaucoup de sens. HTML commun : <ul></ul> 和 <li> 元素非常有意义，公共HTML：

    <li>主页     <li>新闻     <li>联系     <li>关于

现在，让我们从列表中删除边距和填充：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;}

例子解析：
list-style-type:none – 移除列表前小标志，一个导航栏并不需要列表标记。
移除浏览器的默认设置将边距和填充设置为0。

上面的例子中的代码是垂直和水平导航栏使用的标准代码。

nbsp;html>


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

    <li>主页     <li>新闻     <li>联系     <li>关于

垂直导航栏

上面的代码，我们只需要 <a></a> 元素的样式，建立一个垂直的导航栏：

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

示例说明：

display:block 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度 width:60px 。

块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。

注意： 请务必指定 <a></a> 元素在垂直导航栏的的宽度。如果省略宽度，IE6可能产生意想不到的效果。

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>

    <li>主页     <li>新闻     <li>联系     <li>关于

垂直导航条实例

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

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>

    <li>主页     <li>新闻     <li>联系     <li>关于

激活/当前导航条实例

在点击了选项后，我们可以添加 “active” 类来标准哪个选项被选中：

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

示例代码：

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>

    <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 a&#39;), removeActiveClass); target.className = &#39;active&#39;; }) }); </script>

创链接并添加边框

可以在 <li> or <a> </a> </li> 上添加 text-align:center 样式来让链接居中。

可以在 border <ul></ul> 上添加 border 属性来让导航栏有边框。
如果要在每个选项上添加边框，可以在每个 <li> 元素上添加 border-bottom :

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>

    <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 a&#39;), removeActiveClass); target.className = &#39;active&#39;; }) }); </script>

全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。

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

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

源码

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>

    <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 a&#39;), removeActiveClass); target.className = &#39;active&#39;; }) }); </script>

水平导航栏

有两种方法创建横向导航栏。使用 内联 (inline) 或 浮动 (float) 的列表项。

这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。

内联列表项

建立一个横向导航栏的方法之一是指定元素， 上述代码是标准的内联:

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

实例解析：

display:inline; -默认情况下，<li> 元素是块元素。
在这里，我们删除换行符之前和之后每个列表项，以显示一行。

浮动列表项

在上面的例子中链接有不同的宽度。

对于所有的链接宽度相等，浮动 <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;}

Maintenant, supprimons la marge et le remplissage de la liste : <p></p>

   float:left – 使用浮动块元素的幻灯片彼此相邻。
display:block – 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度。
   width:60px – 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度。

Exemple d'analyse :

list-style-type:none - Supprimez la petite marque devant la liste. Une barre de navigation ne nécessite pas de marque de liste.

Supprimez les marges et le remplissage des paramètres par défaut du navigateur à 0. 🎜🎜Le code dans l'exemple ci-dessus est le code standard utilisé pour les barres de navigation verticales et horizontales. 🎜

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;}

🎜Barre de navigation verticale🎜🎜Pour le code ci-dessus, nous n'avons besoin que du style de l'élément <a></a> pour créer une barre de navigation verticale : 🎜

<li>关于🎜Exemple de description : 🎜🎜 display: block affiche le lien de l'élément block, rendant toute la zone du lien (pas seulement le texte) cliquable. Cela nous permet de spécifier la largeur width : 60px. 🎜🎜Les éléments de bloc ont une largeur maximale par défaut. Nous allons spécifier une largeur de 60 pixels. 🎜🎜Remarque : Assurez-vous de spécifier la largeur de l'élément <a></a> dans la barre de navigation verticale. Si vous omettez la largeur, IE6 peut avoir des effets inattendus. 🎜🎜🎜

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

  <li>主页   <li>新闻   <li>联系   <li>关于

🎜Barre de navigation verticale Exemple 🎜🎜Créez un exemple simple de barre de navigation verticale et modifiez la couleur d'arrière-plan lorsque la souris se déplace vers l'option :🎜🎜🎜

ul {
    position: fixed;
    top: 0;
    width: 100%;}

🎜Instance de barre de navigation active/actuelle🎜🎜Après avoir cliqué sur l'option, nous pouvons ajouter la classe "active" au standard Which est sélectionnée : 🎜🎜

ul {
    position: fixed;
    bottom: 0;
    width: 100%;}

🎜Exemple code : 🎜

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>

    <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 a&#39;), removeActiveClass); target.className = &#39;active&#39;; }) }); </script> 🎜Créez un lien et ajoutez une bordure🎜🎜Vous pouvez ajouter le style text-align:center sur <li> ou le lien Centré. 🎜🎜Vous pouvez ajouter l'attribut border sur border <ul></ul> pour que la barre de navigation ait une bordure. 🎜 Si vous souhaitez ajouter une bordure à chaque option, vous pouvez ajouter border-bottom à chaque élément <li> : 🎜🎜🎜

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>

    <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> 🎜Barre de navigation fixe avec hauteur plein écran🎜🎜Ensuite, nous créons une navigation fixe avec hauteur plein écran sur le barre de gauche, avec contenu déroulant à droite. 🎜

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>

🎜Remarque : cet exemple peut être utilisé sur les appareils mobiles. 🎜🎜🎜 Code source 🎜

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>

🎜Niveau Barre de navigation 🎜🎜Il existe deux façons de créer une barre de navigation horizontale. Utilisez inline ou float pour les éléments de liste. 🎜🎜Les deux méthodes conviennent, mais si vous souhaitez que les liens aient la même taille, vous devez utiliser la méthode float. 🎜🎜Éléments de liste en ligne🎜🎜L'une des façons de créer une barre de navigation horizontale est de spécifier l'élément. Le code ci-dessus est en ligne standard : 🎜rrreee🎜Exemple d'analyse : 🎜🎜display:inline -; Par défaut Dans ce cas, l'élément <li> est un élément de bloc. 🎜 Ici, nous supprimons les nouvelles lignes avant et après chaque élément de la liste pour afficher une seule ligne. 🎜🎜 Éléments de liste flottante 🎜🎜 Dans l'exemple ci-dessus, les liens ont des largeurs différentes. 🎜🎜Pour que tous les liens aient la même largeur, faites flotter l'élément <li> et spécifiez la largeur de l'élément <a></a> : 🎜rrreee🎜Exemple d'analyse : 🎜 rrreee🎜 Exemple de barre de navigation horizontale🎜🎜Créez une barre de navigation horizontale et modifiez la couleur d'arrière-plan après avoir déplacé la souris sur l'option. 🎜

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;}

链接右对齐

将导航条最右边的选项设置右对齐 (float:right;)：

<li>关于

添加分割线

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

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

  <li>主页   <li>新闻   <li>联系   <li>关于

固定导航条

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

固定在头部：

ul {
    position: fixed;
    top: 0;
    width: 100%;}

固定在底部：

ul {
    position: fixed;
    bottom: 0;
    width: 100%;}

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

源码

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>

    <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 a&#39;), removeActiveClass); target.className = &#39;active&#39;; }) }); </script>

示例 1

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>

    <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 创建一个鼠标移动上去后显示下拉菜单的效果。

基本下拉菜单

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

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>

实例解析

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 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

下拉菜单

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

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>

（学习视频分享：css视频教程、html视频教程）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!