如何用css实现类似简书的纵向导航/竖排导航

作为一个专注阅读的网站，它的导航也一定是全局的，固定的，也是简洁的。事实上几家阅读网站豆瓣阅读，多看，简书都是这样做的，刚好实现起来也不算复杂，以下是我想到的实现方法。

首先是html的结构：

 1 <body>
 2 <nav>
 3     <div>
 4     <a href="#">点</a>
 5     <a href="#">滴</a>
 6     <a href="#">一</a>
 7     <a href="#">生</a>
 8     </div>
 9 </nav>
10 <body>

然后是css的样式:

 1 <style>
 2     body {
 3         margin: 0; /*一定的初始化是必要的*/
 4     }
 5     nav {
 6         position: fixed; /*因为是一个全页面的竖排导航，所以必须设置为固定定位*/
 7         /*同时因为固定定位是把标签从文档中直接拿出来，所以布局其他元素时要用margin留出外边距，
 8           必要时可以设置导航栏为固定宽度保证不会出现白边*/
 9         background-color: #2f2f2f;
10         height: 100%; /*让导航栏与页面同高*/
11         top: 0; left: 0; /*设置了固定定位后这两个属性才起作用*/
12     }
13         nav a { /*设置每个a标记的display属性为block，这样方便控制每个a标记的样式*/
14             font-weight: bold;
15             font-size: 18px;
16             color: #ffffff;
17             display: block;
18             padding: 15px;
19             text-decoration: none;
20         }
21         nav div a:first-child { /*通过伪类来控制活动页面的a标记的样式，作为静态页面每个页面都要写不同的css控制样式，
22         所以使用不方便的话可以使用class来控制样式*/
23             box-shadow: -1px 0.5px 4px 1px #777 inset;
24             background-color: #e58c7c;
25         }
26         nav div a:hover {
27                 background-color: #e58c7c;
28         }
29         nav div a:active {
30             box-shadow: -1px 0.5px 4px 1px #777 inset;
31             background-color: #e58c7c;
32         }
33 </style>

实现后是这个效果：

转载于:https://www.cnblogs.com/bear-lab/p/how-to-write-a-vertical-nav.html

如何用css实现类似简书的纵向导航/竖排导航相关推荐

网页设计-[CSS+DIV设计实例：超酷的竖排导航栏 ]
HTML: 以下为引用的内容: <div id="navcontainer"> <ul id="navlist"> <li id= ...
div css导航栏设计,CSS+DIV设计实例：超酷的竖排导航栏
HTML: 以下为引用的内容: Item one Subitem one Subitem two Subitem three Subitem four Item two Item three Item ...
Android实现沉浸式状态栏（透明状态栏）（QQ和简书样式）
本文内容大多参考网络上的Android实现沉浸式状态栏教程,由于看了太多类似文章,固在此不再一一列举出处.本文仅为我自己梳理思路和供各位看到本文的朋友参考(百度:Android沉浸式状态栏,第一页内容 ...
仿简书，知乎pc官网顶部导航栏上下滚动效果
描述:简书,知乎顶部导航栏,当鼠标上下滚动时切换不同导航栏,非常符合用户习惯. 怎么实现的呢首先看一下实现的效果先上代码 <!DOCTYPE html> <html lang=& ...
如何用css实现左右翻页效果图,如何利用CSS3实现3D翻书效果
这篇文章主要介绍了CSS3实现3D翻书效果,基于CSS3新属性Animation及transform实现类似翻书效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先上效果图:(样式有点丑,可以忽 ...
android仿简书编辑器,类似zine，简书的app移动编辑器-Light Seven
原标题:类似zine,简书的app移动编辑器-Light Seven 无论你是否从事文字编辑工作,我相信每个人都会接触到文字编辑.既然接触到文字编辑,顺理成章的就会接触到文字编辑的应用和软件. 在生活 ...
简书python_如何用python刷简书文章的浏览量
作者:bigtrace 大家在简书上发表文章,最喜欢关心今天又多了多少访问量和赞.当然不只是简书,大部分的博客网站或者音乐社交如QQ空间,网易云音乐,都会去记录文章或者音乐的浏览或收听次数.可是你知道 ...
hapi mysql项目实战路由初始化_用hapi.js mysql和nuxt.js(vue ssr)开发仿简书的博客项目...
前言: 预览: 开始: npm i 把mysql配置好 npm run server or npm run dev 实现功能: 用户: 登录.注册.用户资料修改,详情页面,类似于简书的文章数量.总字数 ...
知乎ajax采集,胖鼠采集WordPress插件教程-WP自动采集和发布简书,微信公众号,知乎等任意网站...
WordPress本来是一个博客,但是由于功能强大.用户众多,发展到现在Wordpress已经成为了一个CMS平台了,甚至有一些企业建站都用了Wordpress,真的是无处不在.Wordpress用于 ...

如何用css实现类似简书的纵向导航/竖排导航

如何用css实现类似简书的纵向导航/竖排导航相关推荐

最新文章

热门文章