开往   虫洞   统计
  • 文章总数:228 篇
  • 评论总数:594 条
  • 分类总数:7 个
  • 最后更新:7月7日

给TYPECHO加上导航菜单

本文阅读 1 分钟
首页 建站代码 正文

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>

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

请输入图片描述

本文来自投稿,不代表本站立场,如若转载,请注明出处:
-- 展开阅读全文 --
爆款云服务器2核2G4M 6.6元/月起
« 上一篇 09-23
评论者添加IP地址归属地信息
下一篇 » 10-31

发表评论


V注册会员 L评论等级
R3 条回复
  1. oWo
    2023-01-03   广东省 · Windows 10 ·  Google Chrome

    不会吧,右下角主页和主域名不匹配

    1. 2023-01-03   河北省 · iPhone ·  Safari

      @oWo

      设置的我的展示页

  2. 2022-10-06   北京市 · Windows 10 ·  Google Chrome

    有导航会方便的多!

没有更多评论了
    请配置好页面缩略名选项

标签TAG

AI
AI在线
在您需要帮助时能够及时提供解答
您好,这里是乙未博客,请问有什么能帮到您?