当前位置：首页 > 网站模板 > 后台模板

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

分类：后台模板日期：2024-05-14 点击(0) 评论(0)

简介

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

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

##### HTML
```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%;
  }
 
}
```

web299.com

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

简介

设计团队博客css网站模板

无人机数码商店网站模板

移动版猎豹安全浏览器官网html5动画引导页

微信小程序的手势密码

白色简约布局html5模板

响应式商品展示和商品信息比较网格布局界面