←如何在 CSS 中创建模糊文本
如何为 PNG 图像创建投影→

添加 CSS

  • 使用宽度和高度属性设置“软件包”的宽度和高度。
  • 设置 z-index 以确保导航菜单将放置在其他元素的顶部。

添加保证金和仓位属性。

  • 使用 color 属性设置整个菜单的颜色。

我们可以从我们的颜色选择器工具中选择颜色。

  • 将位置设置为“绝对”，这样我们的下拉菜单就不会向下推其他元素。
  • 通过将浮动属性设置为“左”，在页面顶部水平排列菜单项。
  • 为其余的锚标记设置样式。
  • 设置菜单背景样式，以便在悬停时更改颜色。
  • 添加样式以隐藏下拉菜单，以及当鼠标指针悬停在主菜单项上时隐藏的另一种样式。
  • 设置下拉菜单的样式。
  • 更改边框以创建主菜单的效果。
#wrap {
  width: 100%;
  height: 50px;
  margin: 0;
  z-index: 99;
  position: relative;
  background-color: #444444;
}
.navbar {
  height: 50px;
  padding: 0;
  margin: 0;
  position: absolute;
}
.navbar li {
  height: auto;
  width: 135.8px;
  float: left;
  text-align: center;
  list-style: none;
  font: normal bold 13px/1em Arial, Verdana, Helvetica;
  padding: 0;
  margin: 0;
  background-color: #444444;
}
.navbar a {
  padding: 18px 0;
  border-left: 1px solid #ccc9c9;
  text-decoration: none;
  color: white;
  display: block;
}
.navbar li:hover,
a:hover {
  background-color: #444444;
}
.navbar li ul {
  display: none;
  height: auto;
  margin: 0;
  padding: 0;
}
.navbar li:hover ul {
  display: block;
}
.navbar li ul li {
  background-color: #444444;
}
.navbar li ul li a {
  border-left: 1px solid #444444;
  border-right: 1px solid #444444;
  border-top: 1px solid #c9d4d8;
  border-bottom: 1px solid #444444;
}
.navbar li ul li a:hover {
  background-color: #a3a1a1;
}

所以，让我们看看我们的下拉菜单是什么样的：

创建下拉导航菜单的示例：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #wrap {
        width: 100%;
        height: 50px;
        margin: 0;
        z-index: 99;
        position: relative;
        background-color: #444444;
      }
      .navbar {
        height: 50px;
        padding: 0;
        margin: 0;
        position: absolute;
      }
      .navbar li {
        height: auto;
        width: 135px;
        float: left;
        text-align: center;
        list-style: none;
        font: normal bold 13px/1em Arial, Verdana, Helvetica;
        padding: 0;
        margin: 0;
        background-color: #444444;
      }
      .navbar a {
        padding: 18px 0;
        border-left: 1px solid #ccc9c9;
        text-decoration: none;
        color: white;
        display: block;
      }
      .navbar li:hover,
      a:hover {
        background-color: #444444;
      }
      .navbar li ul {
        display: none;
        height: auto;
        margin: 0;
        padding: 0;
      }
      .navbar li:hover ul {
        display: block;
      }
      .navbar li ul li {
        background-color: #444444;
      }
      .navbar li ul li a {
        border-left: 1px solid #444444;
        border-right: 1px solid #444444;
        border-top: 1px solid #c9d4d8;
        border-bottom: 1px solid #444444;
      }
      .navbar li ul li a:hover {
        background-color: #a3a1a1;
      }
    </style>
  </head>
  <body>
    <h2>创建下拉导航菜单</h2>
    <div id="wrap">
      <ul class="navbar">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">教程</a>
          <ul>
            <li>
              <a href="https://www.onitroad.com/learn-html.html">HTML</a>
            </li>
            <li>
              <a href="https://www.onitroad.com/learn-css.html">CSS</a>
            </li>
            <li>
              <a href="https://www.onitroad.com/learn-javascript.html">JavaScript</a>
            </li>
            <li>
              <a href="https://www.onitroad.com/learn-php.html">PHP</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">常见问题</a>
          <ul>
            <li>
              <a href="https://www.onitroad.com/css">CSS</a>
            </li>
            <li>
              <a href="https://www.onitroad.com/php">PHP</a>
            </li>
            <li>
              <a href="https://www.onitroad.com/js">JavaScript</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Tools</a>
          <ul>
            <li>
              <a href="https://www.onitroad.com/tools/css.html">CSS</a>
            </li>
            <li>
              <a href="https://www.onitroad.com/tools/javascript.html">JavaScript</a>
            </li>
            <li>
              <a href="https://www.onitroad.com/tools/angularjs.html">Angular</a>
            </li>
            <li>
              <a href="https://www.onitroad.com/tools/git.html">Git</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">String Functions</a>
          <ul>
            <li>
              <a href="https://www.onitroad.com/tools/string-revers">String Reverse</a>
            </li>
            <li>
              <a href="https://www.onitroad.com/tools/string-url-encoder">URL Encoder</a>
            </li>
            <li>
              <a href="https://www.onitroad.com/tools/string-remove-empty-lines">Empty Lines Remover</a>
            </li>
            <li>
              <a href="https://www.onitroad.com/tools/string-word-count">String Word Count</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </body>
</html>

创建带有动画的下拉导航菜单的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
        box-sizing: border-box;
      }
      body {
        background: url('onitroad.png') center;
        background-size: cover;
        min-height: 600px;
        font-family: 'Helvetica Neue', sans-serif;
      }
      nav {
        text-align: center;
      }
      .menu {
        display: inline-block;
      }
      .menu>li {
        float: left;
        color: #e298e1;
        width: 140px;
        height: 40px;
        line-height: 40px;
        background: rgba(0, 0, 0, 0.7);
        cursor: pointer;
        font-size: 17px;
      }
      .sub-menu {
        transform: scale(0);
        transform-oroirn: top center;
        transition: all 300ms ease-in-out;
      }
      .sub-menu li {
        font-size: 14px;
        background: rgba(0, 0, 0, 0.8);
        padding: 8px 0;
        color: white;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        transform: scale(0);
        transform-oroirn: top center;
        transition: all 300ms ease-in-out;
      }
      .sub-menu li:last-child {
        border-bottom: 0;
      }
      .sub-menu li:hover {
        background: black;
      }
      .menu>li:hover .sub-menu li {
        transform: scale(1);
      }
      .menu>li:hover .sub-menu {
        transform: scale(1);
      }
    </style>
  </head>
  <body>
    <nav>
      <ul class="menu">
        <li>
          Italy
          <ul class="sub-menu">
            <li>Rome</li>
            <li>Milan</li>
            <li>Venice</li>
            <li>Lacio</li>
            <li>Florence</li>
          </ul>
        </li>
        <li>
          France
          <ul class="sub-menu">
            <li>Paris</li>
            <li>Bordeau</li>
            <li>Marseille</li>
            <li>Toulouse</li>
          </ul>
        </li>
        <li>
          Spain
          <ul class="sub-menu">
            <li>Madrid</li>
            <li>Valencia</li>
            <li>Barcelona</li>
            <li>Seville</li>
            <li>Bilbao</li>
          </ul>
        </li>
        <li>
          Russia
          <ul class="sub-menu">
            <li>Moscow</li>
            <li>Saint Petersburg</li>
            <li>Tula</li>
            <li>Chekhov</li>
          </ul>
        </li>
        <li>
          Germany
          <ul class="sub-menu">
            <li>Berlin</li>
            <li>Munich</li>
            <li>Frankfurt</li>
            <li>Hamburg</li>
            <li>Dresden</li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>

创建 HTML

  • 创建一个 id 为“wrap”的 <div> 元素。
  • 在 <div> 元素中使用 <ul> 标签，并使用“navbar”类。

无序列表的每个元素都在 <li> 标签内声明。

  • 在 <li> 标签内写下我们要在菜单中显示的内容。
<div id="wrap">
  <ul class="navbar">
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Books</a>
      <ul>
        <li>
          <a href="#">Learn HTML</a>
        </li>
        <li>
          <a href="#">Learn CSS</a>
        </li>
        <li>
          <a href="#">Learn JavaScript</a>
        </li>
        <li>
          <a href="#">Learn PHP</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Quizzes</a>
      <ul>
        <li>
          <a href="#">CSS Basic</a>
        </li>
        <li>
          <a href="#">PHP Basic</a>
        </li>
        <li>
          <a href="#">JavaScript Basic</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Tools</a>
      <ul>
        <li>
          <a href="#">Geomatric Images</a>
        </li>
        <li>
          <a href="#">Color Picker</a>
        </li>
        <li>
          <a href="#">Password Generator</a>
        </li>
        <li>
          <a href="#">HTML Editor</a>
        </li>
        <li>
          <a href="#">Base 64</a>
        </li>
      </ul>
    </li>
    
    <li>
      <a href="#">String Functions</a>
      <ul>
        <li>
          <a href="#">String Reverse</a>
        </li>
        <li>
          <a href="#">URL Encoder</a>
        </li>
        <li>
          <a href="#">Empty Lines Remover</a>
        </li>
        <li>
          <a href="#">String Word Count</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

所以，第一步准备好了。
让我们继续创建一个有吸引力的导航菜单！

如何使用 CSS 创建下拉导航菜单

独特且有吸引力的导航菜单对每个都很重要。
导航菜单对于我们的出色可访问性至关重要。
用户喜欢精心设计的。

我们将展示基于 CSS/HTML 的菜单教程，允许我们轻松创建下拉导航菜单，并且它提供更小的应用程序大小。

使用 CSS/HTML 是避免 JavaScript 冲突的最佳方式。

此外，基于 CSS/HTML 的菜单可以被更多人使用。

日期：2020-06-02 22:15:01 来源：oir作者：oir
←如何在 CSS 中创建模糊文本
如何为 PNG 图像创建投影→

目录

Copyright © 2017-2019 OnITRoad.com All rights reserved.  桂ICP备20001160号-1  关于 | 隐私和政策