Navigation

(1) Horizontal

 
HTML Code:

<nav class="dsure-nav">
    <ul class="nav">
        
        <li class="item"><a href="#" >Menu</a></li>
        <li class="item"><a href="#">Menu</a></li>
        <li class="item"><a href="#">Menu</a></li>
        <li class="item navSelected"><a href="#">Level menu</a> 
            <ul class="sub">
                <li class="sub-item"><a href="#">Menu</a></li>
                <li class="sub-item"><a href="#">Menu</a></li>
                <li class="sub-item"><a href="#">Menu text</a></li>
                <li class="sub-item"><a href="#">Menu text effects</a></li>
            </ul>
        </li>
        
        <li class="item"><a href="#">Hierarchical  menu</a> </li>
        <li class="item"><a href="#">Hierarchical  menu</a></li>
        
    </ul>
</nav>
            

(2) Vertical

 
HTML Code:

<nav class="dsure-nav dsure-nav-vertical" style="width:200px">
    <ul class="nav">
        
        <li class="item"><a href="#" >Menu</a></li>
        <li class="item"><a href="#">Menu</a></li>
        <li class="item"><a href="#">Menu</a></li>
        <li class="item navSelected"><a href="#">Level menu</a> 
            <ul class="sub">
                <li class="sub-item"><a href="#">Menu</a></li>
                <li class="sub-item"><a href="#">Menu</a></li>
                <li class="sub-item"><a href="#">Menu text</a></li>
                <li class="sub-item"><a href="#">Menu text effects</a></li>
            </ul>
        </li>
        
        <li class="item"><a href="#">Hierarchical  menu</a> </li>
        <li class="item"><a href="#">Hierarchical  menu</a></li>
        
    </ul>
</nav>
            

(3) Custom Stylesheets

 
CSS Code:      
.dsure-nav ul.nav li.item{
	
}
.dsure-nav ul.nav li.item a {
	padding:.4em .6em;/*This is the minimum value.*/
}
.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;/*This is the minimum value.*/
	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) Breadcrumbs

 
HTML Code:      

<div class="dsure-title-nav dsure-no-hover dsure-bg-silver dsure-radius-small dsure-b-shadow f-i10">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="dsure-title-nav dsure-no-hover dsure-bg-black dsure-radius-big noborder f-c-white f-i20">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="dsure-title-nav dsure-no-hover dsure-bg-blue f-i15 f20 f-c-white">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>

<div class="dsure-title-nav dsure-no-hover dsure-bg-silver dsure-b-shadow2 f-i10 f-f-yahei ma20">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>        

<div class="dsure-title-nav dsure-no-hover dsure-bg-silver f-i20 pa-t20 pa-b20">
   Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>