• 首页
  • 博客
  • 网站
  • 分享
  • 数码

当前位置:首页 » 网站优化 » 正文

给出一个增加Typecho导航菜单的方法

 人参与  2022年11月19日 16:18  分类 : 网站优化  点这评论

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>

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

投稿内容不要求原创性,所指观点属原作者所有!

本文链接:http://www.ziti66.com/net/html/153.html

本文标签:网站    

微信公众号:升级中

<< 上一篇下一篇 >>
为祖国加油
疫情防护,人人有责。祖国加油...
为祖国加油
疫情防护,人人有责。祖国加油...

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

搜索

网站分类

Tags列表

最新留言

++发现更多精彩++

    祖国加油!!!

Copyright ziti66.com on 2022. Some Rights Reserved.