这是简单的左侧导航固定网页布局模板。它同样具有响应式的特点,缩放你的浏览器就可看到效果。
插件中使用的字体图标是IcoMoon
HTML
<ul class="cbp-vimenu"> <li><a href="#" class="icon-logo">Logo</a></li> <li><a href="#" class="icon-archive">Archive</a></li> <li><a href="#" class="icon-search">Search</a></li> <li class="cbp-vicurrent"><a href="#" class="icon-pencil">Pencil</a></li> <li><a href="#" class="icon-location">Location</a></li> <li><a href="#" class="icon-images">Images</a></li> <li><a href="#" class="icon-download">Download</a></li> </ul>
CSS:
@font-face { font-family: 'ecoico'; src:url('../fonts/ecoico.eot'); src:url('../fonts/ecoico.eot?#iefix') format('embedded-opentype'), url('../fonts/ecoico.woff') format('woff'), url('../fonts/ecoico.ttf') format('truetype'), url('../fonts/ecoico.svg#ecoico') format('svg'); font-weight: normal; font-style: normal; } .cbp-vimenu { position: fixed; overflow: hidden; top: 0; left: 0; height: 100%; list-style-type: none; margin: 0; padding: 0; background: #f7f7f7; } .cbp-vimenu li a { display: block; text-indent: -500em; height: 5em; width: 5em; line-height: 5em; text-align: center; color: #999; position: relative; border-bottom: 1px solid rgba(0,0,0,0.05); -webkit-transition: background 0.1s ease-in-out; -moz-transition: background 0.1s ease-in-out; transition: background 0.1s ease-in-out; } .cbp-vimenu li a:hover, .cbp-vimenu li:first-child a{ background: #47a3da; color: #fff; } /* class for current item */ .cbp-vimenu li.cbp-vicurrent a { background: #fff; color: #47a3da; } .cbp-vimenu li a:before { font-family: 'ecoico'; speak: none; font-style: normal; font-weight: normal; text-indent: 0em; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 1.4em; -webkit-font-smoothing: antialiased; } .cbp-vimenu li a.icon-logo:before { content: "C"; font-weight: 700; font-size: 300%; font-family: 'Lato', Calibri, Arial, sans-serif; } .icon-search:before { content: "\e004"; } .icon-archive:before { content: "\e005"; } .icon-download:before { content: "\e006"; } .icon-location:before { content: "\e007"; } .icon-images:before { content: "\e009"; } .icon-pencil:before { content: "\e008"; } /* Example for media query (depends on total height of menu) */ @media screen and (max-height: 34.9375em) { .cbp-vimenu { font-size: 70%; } }