CSS3--隐藏悬浮左侧导航栏

专业建站：莜霓网络

用CSS3做的一个竖式导航栏。

只要是相对定位position: relative;和固定position: fixed;的运用

还有就是终于用的不是overflow:hidden;了，而是overflow: visible;成就这一效果

再者，就是稍加个box-shadow阴影和transition过渡一下就好看点了。

<!DOCTYPE html>

<html >

<head>

<title>Document</title>

body{

margin: 0; padding: 0;

width: 100%; height: 100%;

}

.main {

position: fixed;

width: 0px;

overflow: visible;

}

.nav{

display: inline-block;

float: right;

clear: both;

}

.a{

position: relative;

left: 30px;

padding: 10px 30px 10px 60px;

margin: 10px;

background: #8DC2BC;

x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);

box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);

transition: all 0.3s ease-in-out 0.1s;

-o-transition: all 0.3s ease-in-out 0.1s;

-ms-transition: all 0.3s ease-in-out 0.1s;

-moz-transition: all 0.3s ease-in-out 0.1s;

-webkit-transition: all 0.3s ease-in-out 0.1s;

}

.a:hover{

position: relative;

left: 100%;

margin-left: -32px;

background-color: rgba(27, 79, 147,0.5);

box-shadow: 0 -8px 8px -8px rgba(0, 0, 0, 0.5),

0 8px 8px -8px rgba(0, 0, 0, 0.5);

transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

}

.span{

display: inline-block;

color: #fff;

font-family: 'Droid Sans', sans-serif;

font-size: 16px;

font-weight: bold;

white-space: nowrap;

}

a:hover #bg1{ background: #539770; }

a:hover #bg2{ background: #4B7D74; }

a:hover #bg3{ background: #8DC2BC; }

a:hover #bg4{ background: #EDD6B4; }

a:hover #bg5{ background: #BE7467; }

a:hover #bg6{ background: #E2AE63; }

</style>

</head>

<body>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</body>

</html>

CSS3--隐藏悬浮左侧导航栏

继续阅读

准确理解CSS clear:left/right的含义及实际用途

css中元素不可见的几种办法

垂直外边距合并--CSS的Margin属性:详解margin属性

5个典型的JavaScript面试题

Linux下用C编写WebSocet服务以响应HTML5的WebSocket请求

原生js - 图片放大镜效果

内核控制Meta标签：让360浏览器默认使用极速模式打开网页