css实现横向手风琴悬浮折叠菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现横向手风琴悬浮折叠菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* Updated version - 24th Nov 2014 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /* Variables */ body { background: #f77462; font-family: Lato, sans-serif; } @font-face { font-family: 'Genericons'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot"); src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot") format("truetype"); font-weight: normal; font-style: normal; } [class*="genericon"] { display: inline-block; width: 16px; height: 16px; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1; font-family: 'Genericons'; text-decoration: inherit; font-weight: normal; font-style: normal; vertical-align: top; } /* IE7 */ [class*="genericon"] { *overflow: auto; *zoom: 1; *display: inline; } .container { margin: 100px auto; } .accordion { background: #5ab2ca; width: 100%; min-width: 950px; display: block; list-style-type: none; overflow: hidden; height: 200px; font-size: 0; } .tabs { display: inline-block; background-color: #6dc5dd; border-right: #5ab2ca 1px solid; width: 80px; height: 200px; overflow: hidden; position: relative; margin: 0; font-size: 16px; -moz-transition: all 0.4s ease-in-out 0.1s; -o-transition: all 0.4s ease-in-out 0.1s; -webkit-transition: all 0.4s ease-in-out; -webkit-transition-delay: 0.1s; transition: all 0.4s ease-in-out 0.1s; } .tabs:hover { width: 450px; } .tabs:hover .social-links a:before { margin-left: -100px; } .tabs:hover .social-links a:after { margin-left: -5px; } .tabs .paragraph { position: relative; width: 360px; margin-left: 80px; padding: 50px 0 0 10px; height: 200px; background: #fff; } .tabs .paragraph h1 { font-size: 2.5em; margin-bottom: 10px; } .tabs .paragraph p { font-size: 0.88em; line-height: 1.5em; padding-right: 30px; } .social-links { display: block; } .social-links a { display: block; text-indent: -9999px; font-size: 0; line-height: 0; } .social-links a:before, .social-links a:after { -moz-transition: all 0.4s ease-in-out 0.1s; -o-transition: all 0.4s ease-in-out 0.1s; -webkit-transition: all 0.4s ease-in-out; -webkit-transition-delay: 0.1s; transition: all 0.4s ease-in-out 0.1s; width: 80px; height: 200px; position: absolute; text-indent: 0; padding-top: 90px; padding-left: 25px; display: block; font: normal 30px Genericons; color: #fff; } .social-links a:after { font-size: 48px; padding-left: 20px; padding-top: 80px; margin-left: 85px; } .twitter-icon a:before, .twitter-icon a:after { content: '\f202'; } .twitter-icon a:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdhZGNmOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzRiYzlmNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #7adcf9), color-stop(100%, #4bc9f5)); background-image: -moz-linear-gradient(#7adcf9, #4bc9f5); background-image: -webkit-linear-gradient(#7adcf9, #4bc9f5); background-image: linear-gradient(#7adcf9, #4bc9f5); } .facebook-icon a:before, .facebook-icon a:after { content: '\f204'; } .facebook-icon a:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU0OGFiZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI5NWI5ZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #548abf), color-stop(100%, #295b9e)); background-image: -moz-linear-gradient(#548abf, #295b9e); background-image: -webkit-linear-gradient(#548abf, #295b9e); background-image: linear-gradient(#548abf, #295b9e); } .linkedin-icon a:before, .linkedin-icon a:after { content: '\f208'; } .linkedin-icon a:after { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwYTljZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwODNiNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #00a9cd), color-stop(100%, #0083b4)); background-image: -moz-linear-gradient(#00a9cd, #0083b4); background-image: -webkit-linear-gradient(#00a9cd, #0083b4); background-image: linear-gradient(#00a9cd, #0083b4); } .insta-icon a:before, .insta-icon a:after { c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0