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