给TYPECHO加上导航菜单

暂无AI摘要

摘要由智能技术生成

Typecho很多主题没有显示菜单的选项，但是导航菜单对一个网站的整体布局和浏览效果来看是非常重要的，现在给出一个增加Typecho导航菜单的方法，本方法可以让菜单固定在右上角。

.css代码 以下代码加入主题的.css文件中：

   #te-site-header {
    position: fixed;
    top: 0;
    margin-bottom: 0;
    width: 100%;
    height: 30px;
    background: #FFF;
    border: none;
  }     
  .container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px; }
    .container:before, .container:after {
      content: " ";
      display: table; }
    .container:after {
      clear: both; }
    }   
  .nav {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none; }
    .nav:before, .nav:after {
      content: " ";
      display: table; }
    .nav:after {
      clear: both; }
    .nav > li {
      position: relative;
      display: block; }
      .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 15px; }
        .nav > li > a:hover, .nav > li > a:focus {
          text-decoration: none;
          background-color: #eeeeee; }
      .nav > li.disabled > a {
        color: #999999; }
        .nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
          color: #999999;
          text-decoration: none;
          background-color: transparent;
          cursor: not-allowed; }
    .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
      background-color: #eeeeee;
      border-color: #467b96; }
    .nav .nav-divider {
      height: 1px;
      margin: 3px 0;
      overflow: hidden;
      background-color: #e5e5e5; }
    .nav > li > a > img {
      max-width: none; }
  .nav-pills > li {
    float: left; }
    .nav-pills > li > a {
      border-radius: 2px; }
    .nav-pills > li + li {
      margin-left: 2px; }
    .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
      color: white;
      background-color: #467b96; }    
  #te-site-nav {
    float: right; }
    #te-site-nav li a {
      padding: 0 15px;
      line-height: 30px;
      color: #666; }
      #te-site-nav li a:hover {
        background: none;
        color: #999; }
    #te-site-nav li.active a {
      background: none;
      color: #333;
      font-weight: bold; }

在header.php加上：

<header role="banner" id="te-site-header">
    <div class="container">                
        <ul class="nav nav-pills" id="te-site-nav" role="navigation">
            <li class="active"><a href="/">首页</a></li>                    
            <li><a href="/category/essay/">随笔</a></li>
            <li><a href="/category/website-building/">分享</a></li>
            <li><a href="/category/chemistry/">听哦</a></li>
            <li><a href="/category/default/">代码</a></li>
        </ul>
    </div>

链接地址和内容要根据自己的需求修改。