使用 Bootstrap 4 样式库和单独的 CSS 文件来创建菜单栏

有些 typecho 没有菜单栏，这是一个简易的菜单栏目教程：
以下 html 代码，找个位置插入，然后写个 CSS 就完事了。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
 <a class="navbar-brand" href="//cansnow.cn">首页</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="/ai.html">AI画廊</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/category/natural-scenery/">风光相册</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">关于我</a>
      </li>
    </ul>
  </div>
</nav>

CSS：

/* 在这里编写您自己的 CSS 样式 */

.navbar-brand {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 2rem;
}

.navbar-nav .nav-link {
  font-size: 1.2rem;
  margin-right: 1rem;
}

.navbar-nav .nav-item.active .nav-link {
  color: #fff; /* 高亮显示导航栏项 */
}

.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  background-color: #fff; /* 菜单 */
}

CSS2：

/* 在这里编写您自己的 CSS 样式 */
.navbar-nav .nav-item .nav-link.active {
  color: #fff;
  background-color: #d89910; /* 设置活动菜单项的背景色和文本颜色 */
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center; /* 文字居中 */
}

我们将代码分为两部分：导航栏 HTML 代码和单独的 CSS 文件。
导航栏 HTML 代码是与之前相同的。在单独的 CSS 文件中，可编写您自己的样式。
请注意，如果您使用一个单独的 CSS 文件而没有使用样式库，需要确保将 Bootstrap 的 CSS 和 JS 文件正确引用到您的 HTML 页面中。
在 HTML 页面 head 标签中加入以下代码即可引用 Bootstrap 文件和独立的 CSS 文件：

在这个例子中，我们引用了 Bootstrap 的 CSS 和 JS 文件，还引用了名为 mystyle.css 的自定义样式文件。请注意，Bootstrap 的 JS 文件需要在页面底部加载，以确保所有的 DOM 元素加载完毕时才会启动。
这样，在单独的 CSS 文件中，就可以编写更具体化的样式，以实现您的自定义效果。
网址自己修改一下吧。

1. 2023 年 6 月份更新

页面滚动后，导航栏无法固定，这样滚动了 N 久再切换分类的时候很麻烦。
使导航条固定在页面的顶部，并随着浏览器滚动而变动，在导航条的外层包裹一个固定位置的容器。以下是修改后的代码：

<div class="fixed-top">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="//www.cansnow.cn">首页</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/category/natural-scenery/">风光相册</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/category/city_building/">城市建筑</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/category/animals_and_plants/">植物动物</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="https://www.znian.cn">文字游记</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/ai.html">AI画廊</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

CSS 参考：

/* Add a background color and increase the height of the navbar */
.navbar {
  background-color: #333;
  height: 60px;
}

/* Adjust the padding and font size of the navbar items */
.navbar-nav .nav-link {
  padding: 15px;
  font-size: 18px;
}

/* Add a hover effect to the navbar items */
.navbar-nav .nav-link:hover {
  background-color: #555;
}

/* Add a smooth transition for the navbar items on hover */
.navbar-nav .nav-link {
  transition: background-color 0.3s ease;
}

/* Add a border bottom to indicate the active page */
.navbar-nav .active {
  border-bottom: 3px solid #fff;
}

/* Add a transition for the active page border bottom */
.navbar-nav .active {
  transition: border-bottom 0.3s ease;
}

/* Add a transition for the navbar background color on scroll */
.fixed-top.navbar-scrolled {
  background-color: #222;
  transition: background-color 0.3s ease;
}

/* Reduce the height of the navbar on scroll */
.fixed-top.navbar-scrolled .navbar {
  height: 50px;
}

参考了一下 https://somepic.cn/ 的导航栏设置。
导航代码：

<nav class="header-nav">
    <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/category/city_building/">城市建筑</a></li>
        <li><a href="/category/natural-scenery/">风光相册</a></li>
        <li><a href="/category/animals_and_plants/">植物动物</a></li>
        <li><a href="/ai.html">AI画廊</a></li>
</ul>
</nav>

CSS：

.header-nav {
    background: #fff;
    padding: 10px 10px;
    box-sizing: border-box;
    position: sticky;
    top: -1px;
    left: 0;
    width: 100%;
    z-index: 99;
}
.header-nav ul li a {
    color: #000;
    padding: 10px;
    display: inline-block;
    font-size: 16px;
    transition: all 0.1s linear;
}
.header-nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

CSS 方面，我一直是在引入一个独立的文件，在不破坏原有主题的样式前提下实现。