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

html-css011

如何用css实现类似简书的纵向导航竖排导航,第1张

<body>

<nav>

<div>

<a href="#">点</a>

<a href="#">滴</a>

<a href="#">一</a>

<a href="#">生</a>

</div>

</nav>

<body>

<style>

body {

margin: 0/*一定的初始化是必要的*/

}

nav {

position: fixed/*因为是一个全页面的竖排导航，所以必须设置为固定定位*/

/*同时因为固定定位是把标签从文档中直接拿出来，所以布局其他元素时要用margin留出外边距，

必要时可以设置导航栏为固定宽度保证不会出现白边*/

background-color: #2f2f2f

height: 100%/*让导航栏与页面同高*/

top: 0left: 0/*设置了固定定位后这两个属性才起作用*/

}

nav a { /*设置每个a标记的display属性为block，这样方便控制每个a标记的样式*/

font-weight: bold

font-size: 18px

color: #ffffff

display: block

padding: 15px

text-decoration: none

}

nav div a:first-child { /*通过伪类来控制活动页面的a标记的样式，作为静态页面每个页面都要写不同的css控制样式，

所以使用不方便的话可以使用class来控制样式*/

box-shadow: -1px 0.5px 4px 1px #777 inset

background-color: #e58c7c

}

nav div a:hover {

background-color: #e58c7c

}

nav div a:active {

box-shadow: -1px 0.5px 4px 1px #777 inset

background-color: #e58c7c

}

</style>

#navmenu2{

width:150px

text-align:center

float:left

}

#navmenu2 ul{

padding:0px

margin:0px

list-style:none

}

#navmenu2 li{

margin:0px

}

#navmenu2 a{

display:block

text-decoration:none

width:120px

border:1px

border-right:10px

border-left:20px

border-color:#60C

border-style:solid

background-color:#00F

color:#FFF

padding:7px 0px 7px 0px

}

#navmenu2 a:hover {

background-color:#000

color:#09F

border-left-color:#09f

border-right-color:#09f

border-top-color:#60c

border-bottom-color:#60c

}

这是我拿网络上的一个纯CSS菜单样式修改的竖排样式，你可以拿去参考和再次修改。

希望能帮到你。

下面是效果图，左侧是未展开的，右侧是展开的效果。