Menu Lateral
Menu lateral
Menu Lateral sem Ícones
- HTML
- CSS
- JS
<nav class="side-menu">
<ul>
<li><a href="#">LINK 1</a></li>
<li><a href="javascript:void(0);">LINK 2<i class="icone-more"> </i></a>
<ul class="sub-menu">
<li><a href="#">- Link 3.1</a></li>
<li><a href="#">- Link 3.2</a></li>
<li><a href="#">- Link 3.3</a></li>
<li><a href="#">- Link 3.4</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">LINK 3<i class="icone-more"> </i></a>
<ul class="sub-menu">
<li><a href="#">- Link 3.1</a></li>
<li><a href="#">- Link 3.2</a></li>
<li><a href="#">- Link 3.3</a></li>
<li><a href="#">- Link 3.4</a></li>
</ul>
</li>
<li><a href="#">LINK 4</a></li>
<li><a href="#">LINK 5</a></li>
</ul>
</nav>
nav.side-menu{
max-width: 321px;
}
nav.side-menu > ul > li{
padding: 6px 0px;
border-bottom: 1px solid rgba(42, 42, 42,0.4);
}
nav.side-menu > ul > li:last-child{
border-bottom: none;
}
nav.side-menu > ul > li > a,
nav.side-menu > ul > li{
font-size: 14px;
font-family: "latobold";
color: #2A2A2A;
}
nav.side-menu > ul > li:hover > a,
nav.side-menu > ul > li.active > a{
color: #fff;
background: #2980b9;
}
nav.side-menu > ul > li.active i.drop-icon{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(-90deg) !important;
display: inline-block;
}
nav.side-menu > ul > li > a{
padding: 10px 10px;
display: block;
}
nav.side-menu > ul > li .sub-menu{
display: none;
}
nav.side-menu > ul > li .sub-menu li{
padding: 6px 10px;
line-height: 16px;
}
nav.side-menu > ul > li .sub-menu li:hover{
background: #D0D2D3;
}
nav.side-menu > ul > li .sub-menu li a{
font-size: 14px;
font-family: "latoregular";
color: #808184;
display: block;
}
nav.side-menu > ul > li .sub-menu li:hover a{
color: #2980B9;
}
nav.side-menu > ul > li i{
font-size: 6px;
margin-left: 5px;
}
$(document).on("click", ".side-menu > ul > li", function(e){
if($(this).find('.sub-menu').length>0){
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('active');
$(this).find('.sub-menu').stop().slideToggle();
}
});
Menu Lateral com Ícones
- HTML
- CSS
- JS
<nav class="side-menu menu-icon">
<ul>
<li><a href="#"><i class="icon-mouse"> </i>LINK 1</a></li>
<li><a href="javascript:void(0);"><i class="icon-mouse"> </i>LINK 2<i class="icone-more drop-icon"> </i></a>
<ul class="sub-menu">
<li><a href="#">- Link 3.1</a></li>
<li><a href="#">- Link 3.2</a></li>
<li><a href="#">- Link 3.3</a></li>
<li><a href="#">- Link 3.4</a></li>
</ul>
</li>
<li><a href="javascript:void(0);"><i class="icon-mouse"> </i>LINK 3<i class="icone-more drop-icon"> </i></a>
<ul class="sub-menu">
<li><a href="#">- Link 3.1</a></li>
<li><a href="#">- Link 3.2</a></li>
<li><a href="#">- Link 3.3</a></li>
<li><a href="#">- Link 3.4</a></li>
</ul>
</li>
<li><a href="#"><i class="icon-mouse"> </i>LINK 4</a></li>
<li><a href="#"><i class="icon-mouse"> </i>LINK 5</a></li>
</ul>
</nav>
nav.side-menu{
max-width: 321px;
}
nav.side-menu > ul > li{
padding: 6px 0px;
border-bottom: 1px solid rgba(42, 42, 42,0.4);
}
nav.side-menu > ul > li:last-child{
border-bottom: none;
}
nav.side-menu > ul > li > a,
nav.side-menu > ul > li{
font-size: 14px;
font-family: "latobold";
color: #2A2A2A;
}
nav.side-menu > ul > li:hover > a,
nav.side-menu > ul > li.active > a{
color: #fff;
background: #2980b9;
}
nav.side-menu > ul > li.active i.drop-icon{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(-90deg) !important;
display: inline-block;
}
nav.side-menu > ul > li > a{
padding: 10px 10px;
display: block;
}
nav.side-menu > ul > li .sub-menu{
display: none;
}
nav.side-menu > ul > li .sub-menu li{
padding: 6px 10px;
line-height: 16px;
}
nav.side-menu > ul > li .sub-menu li:hover{
background: #D0D2D3;
}
nav.side-menu > ul > li .sub-menu li a{
font-size: 14px;
font-family: "latoregular";
color: #808184;
display: block;
}
nav.side-menu > ul > li .sub-menu li:hover a{
color: #2980B9;
}
nav.side-menu > ul > li i{
font-size: 6px;
margin-left: 5px;
}
nav.side-menu.menu-icon > ul > li i:first-child{
font-size: 20px;
}
$(document).on("click", ".side-menu > ul > li", function(e){
if($(this).find('.sub-menu').length>0){
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('active');
$(this).find('.sub-menu').stop().slideToggle();
}
});
Este website utiliza cookies. Ao continuar a navegação está a aceitar a sua utilização.
Caso pretenda saber mais, consulte a nossa política de privacidade.