Top

分类导航

×
目录导航 横向 纵向 自定义

所有分类导航元素都可以使用左侧导航的所有class类进行细节样式的调整

(1) 横向分类导航

 
HTML代码:

<div class="dsure-class-nav noWrap">
  <ul>
      <li><a href="#">分类名称</a></li>
      <li class="selected"><a href="#">分类名称</a></li>
      <li><a href="#">分类</a></li>
      <li><a href="#">项目类型</a></li>
      <li><a href="#">项目分类名称</a></li>
      <li><a href="#">分类名称</a></li>
      <li><a class="selected" href="#">分类名称</a></li>
      <li><a href="#">分类</a></li>
      <li><a href="#">项目类型</a></li>
      <li><a href="#">项目分类名称</a></li>
      <li><a href="#">分类名称</a></li>
      <li><a href="#">分类名称</a></li>
      <li><a href="#">分类</a></li>
      <li><a href="#">项目类型</a></li>
      <li><a href="#">项目分类名称</a></li>
      <li><a href="#">分类名称</a></li>
      <li><a href="#">分类名称</a></li>
      <li><a href="#">分类</a></li>
      <li><a href="#">项目类型</a></li>
      <li><a href="#">项目分类名称</a></li>
  </ul>
</div>

(2) 纵向分类导航

 
HTML代码:

<div class="dsure-class-nav dsure-class-nav-vertical">
  <ul>
      <li><a href="#">分类名称</a></li>
      <li class="selected"><a href="#">分类名称</a></li>
      <li><a href="#">分类</a></li>
      <li><a href="#">项目类型</a></li>
      <li><a href="#">项目分类名称</a></li>
      <li><a href="#">分类名称</a></li>
      <li><a class="selected" href="#">分类名称</a></li>
      <li><a href="#">分类</a></li>
  </ul>
</div>

(3) 自定义分类导航样式

如果您想要自定义导航，请自己将以下的代码拷贝到新的样式文件中，修改{ ... }内的内容，增加或者修改现有的样式,不要删除原有的代码 

 
CSS代码:      

.dsure-class-nav ul li{
	/*您可以在此处添加li的间距、高度限制样式*/
}
.dsure-class-nav ul li a {
	padding:.4em .6em;/*注意,此样式元素的padding值不能小于给定的默认值，否则会出现间距bug*/
}
.dsure-class-nav ul li a:hover,
.dsure-class-nav ul li.selected a,
.dsure-class-nav ul li a.selected {
	background:#EAEAEA;
	text-decoration:none
}