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

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

代码语言：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 {
	ba.........完整代码请登录后点击上方下载按钮下载查看