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

最新推荐文章于 2023-12-15 16:31:28 发布

bingqingsuimeng

最新推荐文章于 2023-12-15 16:31:28 发布

阅读量1.6w

点赞数 1

分类专栏： linux应用程序之-web前端（html js css）

linux应用程序之-web前端（html js css）专栏收录该内容

73 篇文章 0 订阅

订阅专栏

专业建站：莜霓网络

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

只要是相对定位position: relative;和固定position: fixed;的运用
还有就是终于用的不是overflow:hidden;了，而是overflow: visible;成就这一效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
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>
<div class="main">
<div class="nav">
<div class="a">
<a href="#">
<span class="span" id="bg1">item #1</span>
</a>
</div>
</div>
<div class="nav">
<div class="a">
<a href="#">
<span class="span" id="bg2">item #2</span>
</a>
</div>
</div>
<div class="nav">
<div class="a">
<a href="#">
<span class="span" id="bg3">item #3</span>
</a>
</div>
</div>
<div class="nav">
<div class="a">
<a href="#">
<span class="span" id="bg4">item #4</span>
</a>
</div>
</div>
<div class="nav">
<div class="a">
<a href="#">
<span class="span" id="bg5">item #5</span>
</a>
</div>
</div>
<div class="nav">
<div class="a">
<a href="#">
<span class="span" id="bg6">item #6</span>
</a>
</div>
</div>
</div>
</body>
</html>