Top

导航菜单

导航支持响应式切换，您可以调整窗口大小查看效果

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

(1) 横向导航

 
HTML代码:

<nav class="dsure-nav">
    <ul class="nav">
        
        <li class="item"><a href="#" >菜单</a></li>
        <li class="item"><a href="#">菜单</a></li>
        <li class="item"><a href="#">菜单</a></li>
        <li class="item navSelected"><a href="#">多级菜单</a> 
            <ul class="sub">
                <li class="sub-item"><a href="#">二级菜单</a></li>
                <li class="sub-item"><a href="#">二级菜单</a></li>
                <li class="sub-item"><a href="#">二级菜单文字数量</a></li>
                <li class="sub-item"><a href="#">二级菜单文字数量改变</a></li>
            </ul>
        </li>
        
        <li class="item"><a href="#">一级菜单</a> </li>
        <li class="item"><a href="#">一级菜单</a></li>
        
    </ul>
</nav>

(2) 纵向导航

 
HTML代码:

<nav class="dsure-nav dsure-nav-vertical" style="width:200px">
    <ul class="nav">
        
        <li class="item"><a href="#" >菜单</a></li>
        <li class="item"><a href="#">菜单</a></li>
        <li class="item"><a href="#">菜单</a></li>
        <li class="item navSelected"><a href="#">多级菜单</a> 
            <ul class="sub">
                <li class="sub-item"><a href="#">二级菜单</a></li>
                <li class="sub-item"><a href="#">二级菜单</a></li>
                <li class="sub-item"><a href="#">二级菜单文字数量</a></li>
                <li class="sub-item"><a href="#">二级菜单文字数量改变</a></li>
            </ul>
        </li>
        
        <li class="item"><a href="#">一级菜单</a> </li>
        <li class="item"><a href="#">一级菜单</a></li>
        
    </ul>
</nav>

(3) 自定义导航样式

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

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

/*Sub navigation*/
.dsure-nav ul.nav ul {
	position:absolute;
	z-index:105;
	display:none;
	border:1px solid #EAEAEA;
}
.dsure-nav ul.nav ul li.sub-item a {
	padding:.4em .6em;/*注意,此样式元素的padding值不能小于给定的默认值，否则会出现间距bug*/
	text-align:left;
	border:none;
	font-weight:normal;
}
.dsure-nav ul.nav ul li.sub-item a:hover {
	
}

.dsure-nav.dsure-nav-vertical ul.nav ul{ 
    margin-left:100%; 
    top:0;
}


@media only screen and (min-width: 480px) and (max-width: 767px){
	

    /*------Init width:470px------*/
    
    /*navigation*/
    .dsure-nav ul.nav li.item a {
        background:#272727; 
        color:#9D9D9D; 
        border-bottom:1px solid #484848;
    }
    .dsure-nav ul.nav li.item a:hover,
    .dsure-nav ul.nav li.item.navSelected a,
    .dsure-nav ul.nav li.item.navSelected ul a:hover{
        background:#272727; 
        color:#fff; 
    }
    .dsure-nav ul.nav li.item a{
        color:#9D9D9D
    }

	
}



@media only screen and (max-width: 479px){
	
    /*------Init width:320px------*/
    
    /*navigation*/
    .dsure-nav ul.nav li.item a {
        background:#272727; 
        color:#9D9D9D; 
        border-bottom:1px solid #484848;
    }
    .dsure-nav ul.nav li.item a:hover,
    .dsure-nav ul.nav li.item.navSelected a,
    .dsure-nav ul.nav li.item.navSelected ul a:hover{
        background:#272727; 
        color:#fff; 
    }
    .dsure-nav ul.nav li.item a{
        color:#9D9D9D
    }
    
	
}

(4) 面包屑导航 — 自定义效果，请叠加或改变“通用样式”

银白色背景,有淡淡阴影,文字缩进10像素
黑色背景,文字缩进20像素,大圆角,无边框,白色文字
蓝色背景,文字缩进15像素,20像素字体大小,白色文字
银白色背景,有淡淡内阴影,文字缩进10像素,雅黑字体,四周外边距为20像素
银白色背景,文字缩进20像素,上下内边距为20像素 
 
HTML代码:      

<div class="dsure-title-nav dsure-no-hover dsure-bg-silver dsure-radius-small dsure-b-shadow f-i10">
    银白色背景,有淡淡阴影,文字缩进10像素
</div>

<div class="dsure-title-nav dsure-no-hover dsure-bg-black dsure-radius-big noborder f-c-white f-i20">
   黑色背景,文字缩进20像素,大圆角,无边框,白色文字
</div>

<div class="dsure-title-nav dsure-no-hover dsure-bg-blue f-i15 f20 f-c-white">
   蓝色背景,文字缩进15像素,20像素字体大小,白色文字
</div>

<div class="dsure-title-nav dsure-no-hover dsure-bg-silver dsure-b-shadow2 f-i10 f-f-yahei ma20">
   银白色背景,有淡淡内阴影,文字缩进10像素,雅黑字体,四周外边距为20像素
</div>        

<div class="dsure-title-nav dsure-no-hover dsure-bg-silver f-i20 pa-t20 pa-b20">
   银白色背景,文字缩进20像素,上下内边距为20像素
</div>