css实现自适应响应式左侧悬浮菜单导航条效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现自适应响应式左侧悬浮菜单导航条效果代码，自带自适应，不同的设备显示不同的效果。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
    <style>
        @charset "UTF-8";
	@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
	body {
	font-family:'Open Sans',sans-serif;
	font-size:1em;
	font-weight:300;
	font-style:normal;
	word-spacing:normal;
	letter-spacing:normal;
	text-rendering:optimizeLegibility;
	line-height:1.8em;
	color:#717171
}
h1 {
	font-size:2em;
	font-weight:300;
	line-height:4em;
	text-transform:uppercase;
	color:#BDBDBD
}
h2 {
	font-size:1.4em;
	font-weight:400;
	line-height:1em
}
p {
	font-size:1.16em;
	line-height:4em
}
p svg {
	display:inline-block;
	vertical-align:middle
}
a {
	font-size:1em;
	font-weight:400;
	line-height:100%;
	color:#3A53BD
}
a:hover {
	text-decoration:none
}
a[href$="http://example.com"] {
	font-size:1em;
	font-weight:700;
	letter-spacing:-0.04em;
	text-decoration:none;
	text-transform:uppercase;
	color:#575757;
	margin:1.4em 0 1.4em;
	display:inline
}
.codepen-style {
	padding:2em 0 0 0
}
.codepen-style h1 {
	font-family:'Open Sans',sans-serif;
	font-size:3em;
	font-weight:300;
	color:#000;
	line-height:1.8em;
	text-transform:none
}
.codepen-style h1 span {
	font-style:italic;
	font-weight:700;
	text-transform:none;
	color:red
}
.codepen-style h2 {
	font-weight:300;
	text-transform:none
}
.codepen-style h2 a {
	font-weight:700
}
body {
	background:#f1f1f1;
	padding:1em 8% 10em
}
.navigation {
	height:auto;
	width:100%;
	display:block;
	box-shadow:#D4D4D4 -1px 1px,#D4D4D4 -2px 2px,#D4D4D4 -3px 3px,#D4D4D4 -4px 4px,#D4D4D4 -5px 5px,#D4D4D4 -6px 6px;
	transform:translate3d(4px,0px,0);
	background-color:#D4D4D4
}
.navigation li {
	width:100%
}
.navigation a {
	display:block;
	padding:.5em 0 .5em 1em;
	margin:0;
	line-height:2em;
	font-weight:400;
	color:#333;
	text-transform:uppercase
}
.navigation a:hover {
	background-color:#666;
	color:#333;
	box-shadow:-1px 1px,-2px 2px,-3px 3px,-4px 4px;
	transform:translate3d(4px,-4px,0);
	transition:.15s
}
.navigation a>span:after {
	content:" /";
	padding-left:.2em
}
.navigation li:nth-child(1) a {
	background-color:#00FF96
}
.navigation li:nth-child(2) a {
	background-color:#FF6524
}
.navigation li:nth-child(3) a {
	background-color:#FFA300
}
.navigation li:nth-child(4) a {
	background-color:#FFCD00
}
.navigation li:nth-child(5) a {
	background-color:#F2F600
}
.navigation li:nth-child(1) a:hover,.navigation li:nth-child(2) a:hover,.navigation li:nth-child(3) a:hover,.navigation li:nth-child(4) a:hover,.navigation li:nth-child(5) a:hover {
	background-color:#666
}
.navigation svg {
	width:30px;
	height:1.5em;
	vertical-align:text-top
}
svg {
	opacity:1;
	fill-opacity:1;
	fill-rule:nonzero;
	vertical-align:top;
	fill:#333
}
.navigation a:hover svg {
	fill:#333
}
.navigation span {
	display:inline-block;
	padding-left:.5em
}
@media only screen and (min-width:1024px) {
	body {
	padding:2em 0 0 4em
}
header,article,section,footer {
	margin:0 auto;
	max-width:670px;
	width:auto;
	display:block
}
header {
	padding-top:0
}
.navigation {
	transition-delay:0s;
	transition-duration:.4s;
	transition-property:all;
	transition-timing-function:line;
	box-shadow:0;
	transform:translate3d(0px,0px,0)
}
.navigation a:hover {
	transition-delay:0s;
	transition-duration:.2s;
	transition-property:all;
	transition-timing-function:line;
	box-shadow:#303030 -1px 1px,#333 -2px 2px,#2E2E2E -3px 3px,#2B2B2B -4px 4px,#292929 -5px 5px,#262626 -6px 6px;
	transform:translate3d(6px,0px,0)
}
.navigation {
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	height:100%;
	width:4em;
	background-color:#333
}
.navigation:hover {
	position:fixed;
	width:10em
}
.navigation ul {
	display:block
}
.navigation li {
	display:block
}
.navigation a {
	padding:.8em .6em .8em 1em;
	color:#F1F1F1;
	border-bottom:1px solid transparent;
	border-top:1px solid transparent
}
.navigation li:nth-child(1) a,.navigation li:nth-child(2) a,.navigation li:nth-child(3) a,.navigation li:nth-child(4) a,.navigation li:nth-child(5) a {
	background-color:transparent
}
.navigation a:hover {
	display:inline-block;
	padding:0 0 0 1em;
	margin:0;
	line-height:2em;
	font-weight:400;
	width:6em
}
.navigation:hover a {
	display:inline-block;
	width:9em;
	padding:.8em 0 .8em 1em
}
.navigation span {
	text-indent:-200px
}
.navigation:hover span {
	display:inline-block;
	text-indent:0
}
.active {
	background-color:#F1F1F1
}
.navigation a>span:after {
	color:#666
}
.navigation a:hover>span:after {
	color:#333
}
.navigation svg {
	width:30px;
	height:2em;
	vertical-align:top
}
.navigation svg:hover {
	fill:#333
}
.home {
	fill:#00FF96
}
.about {
	fill:#FF6524
}
.work {
	fill:#FFA300
}
.lab {
	fill:#FFCD00
}
.contact {
	fill:#F2F600
}
.menu {
	left:0;
	position:fixed;
	height:auto;
	width:auto
}
.menu {
	top:0
}
}@media only screen and (min-height:1920px) {
	.navigation:hover {
	width:8.592em
}
.navigation a {
	font-size:.9em;
	padding:.8em .8259em .8em 1em
}
}
    </style>
</head>

<body>

    <nav class="navigation">
        <ul class="menu">
            <li><a class="active" href="#"><svg class="home" width="30px" height="30px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path d="M419.492,275.815v166.213H300.725v-90.33h-89.451v90.33H92.507V275.815H50L256,69.972l206,205.844H419.492 z M394.072,88.472h-47.917v38.311l47.917,48.023V88.472z" /></svg><span title="Home">Home</span></a></li>
            <li><a href="#"><svg class="about" width="30px" height="30px" version="1.1" xmlns="http://www.w3.org/2000/svg" xml.........完整代码请登录后点击上方下载按钮下载查看