Original link: https://yf-ch.com/archives/1927.html
Many themes of Typecho do not have menu options, but the navigation menu is very important to the overall layout and browsing effect of a website. Now we give a method to increase the navigation menu of Typecho. This method can make the menu fixed in the upper right corner.
.css code The following code is added to the theme’s .css file:
#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; }Add to 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>
The link address and content should be modified according to your own needs.
This article is reproduced from: https://yf-ch.com/archives/1927.html
This site is for inclusion only, and the copyright belongs to the original author.