html 左侧导航 模板,css3左侧导航固定页面无限滚动布局模板

这是简单的左侧导航固定网页布局模板。它同样具有响应式的特点,缩放你的浏览器就可看到效果。

插件中使用的字体图标是IcoMoon

HTML

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%;

}

}

201603282312454295.jpg

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值