html+css写出响应式侧边导航栏

html部分：先写用div画好六个导航的卡片，再利用css添加响应效果

`<div class='card-holder'>`
 `<div class='card-wrapper'>`
 `<a href='#'>`
 `<div class='card bg-01'>`
 `<span class='card-content'>item #1</span>`
 `</div>`
 `</a>`
 `</div>`
 `<div class='card-wrapper'>`
 `<a href='#'>`
 `<div class='card bg-02'>`
 `<span class='card-content'>long menu item #2</span>`
 `</div>`
 `</a>`
 `</div>`
 `<div class='card-wrapper'>`
 `<a href='#'>`
 `<div class='card bg-03'>`
 `<span class='card-content'>menu item #3</span>`
 `</div>`
 `</a>`
 `</div>`
 `<div class='card-wrapper'>`
 `<a href='#'>`
 `<div class='card bg-04'>`
 `<span class='card-content'>item #4</span>`
 `</div>`
 `</a>`
 `</div>`
 `<div class='card-wrapper'>`
 `<a href='#'>`
 `<div class='card bg-05'>`
 `<span class='card-content'>menu item #5</span>`
 `</div>`
 `</a>`
 `</div>`
 `<div class='card-wrapper'>`
 `<a href='#'>`
 `<div class='card bg-06'>`
 `<span class='card-content'>long menu item #1</span>`
 `</div>`
 `</a>`
 `</div>`
`</div>`

css部分：通过hover选择器和transition属性实现导航响应式操作，即可实现如图效果

`a:link,`
`a:hover,`
`a:visited,`
`a:active {`
 `color: #fff;`
 `text-decoration: none;`
`}`
`body {`
 `height: 100%;`
 `width: 100%;`
 `margin: 0;`
 `padding: 0;`
 `background: #fff;`
`}`
`.card-holder {` 
 `position: fixed;`
 `width: 0px;`
 `overflow: visible;`
`}`
`.card-wrapper {`
 `display: inline-block;`
 `float: right;`
 `clear: both;`
`}`
`.card {`
 `position: relative;`
 `left: 32px;`
 `padding: 16px 32px 16px 64px;`
 `margin: 8px;` 
 `background: #fff;`
 `transition: all 0.3s ease-in-out 0.1s;`
`}`
`//添加导航的响应式效果`
`.card:hover {`
 `position: relative;`
 `left: 100%;`
 `margin-left: -32px;`
 `transition: all 0.3s ease-in-out;`
`}`
`.card-content {`
 `display: inline-block;`
 `color: #fff;`
 `font-family: 'Droid Sans', sans-serif;`
 `font-size: 16px;`
 `font-weight: bold;`
 `white-space: nowrap;`
`}`
`.bg-01 { background: #539770; }`
`.bg-02 { background: #4B7D74; }`
`.bg-03 { background: #8DC2BC; }`
`.bg-04 { background: #EDD6B4; }`
`.bg-05 { background: #BE7467; }`
`.bg-06 { background: #E2AE63; }`

然后就能实现我们这个实用又美观的侧边导航栏啦