menu sidebar vertical with active class css

Menu Sidebar With Active Class

Menu Sidebar With Active Class | Menu lateral o vertical con Bootstrap

By Piyush


Subscribe for more Code

Recibe las Actualizaciones de HTML y CSS


DEMO
HTML

<div id="accordian">
<ul class="show-dropdown main-navbar">
<div class="selector-active"><div class="top"></div><div class="bottom"></div></div>
<li>
<a href="javascript:void(0);"><i class="fa fa-tachometer"></i>Dashboard</a>
</li>
<li class="active">
<a href="javascript:void(0);"><i class="fa fa-address-book"></i>Address Book</a>
</li>
<li>
<a href="javascript:void(0);"><i class="fa fa-clone"></i>Components</a>
</li>
<li>
<a href="javascript:void(0);"><i class="fa fa-calendar"></i>Calendar</a>
</li>
<li>
<a href="javascript:void(0);"><i class="fa fa-chart-bar"></i>Charts</a>
</li>
<li>
<a href="javascript:void(0);"><i class="fa fa-copy"></i>Documents</a>
</li>
<li>
<a href="javascript:void(0);"><i class="fa fa-bookmark"></i>Bookmarks</a>
</li>
<li>
<a href="javascript:void(0);"><i class="fa fa-envelope"></i>Mail</a>
</li>
<li>
<a href="javascript:void(0);"><i class="fa fa-heart"></i>Favorite</a>
</li>
</ul>
</div>

CSS

*{margin:0;padding:0}
i{margin-right:10px}
h2{margin:0}
h6{margin:0;color:#777}
#accordian{background:#5161ce;width:250px;padding:10px 0 10px 10px;float:left;height:100vh;overflow-x:hidden;position:relative}
.main-navbar{position:relative}
#accordian li{list-style-type:none}
#accordian ul li a{color:rgba(255,255,255,.5);text-decoration:none;font-size:15px;line-height:45px;display:block;padding:0 20px;transition-duration:.6s;transition-timing-function:cubic-bezier(0.68,-.55,.265,1.55);position:relative}
#accordian>ul>li.active>a{color:#5161ce;background-color:transparent;transition:all .7s}
#accordian a:not(:only-child):after{content:"\f105";position:absolute;right:20px;top:10%;font-size:14px;font-family:"Font Awesome 5 Free";display:inline-block;padding-right:3px;vertical-align:middle;font-weight:900;transition:.5s}
#accordian .active>a:not(:only-child):after{transform:rotate(90deg)}
.selector-active{width:100%;display:inline-block;position:absolute;height:37px;top:0;left:0;transition-duration:.6s;transition-timing-function:cubic-bezier(0.68,-.55,.265,1.55);background-color:#fff;border-top-left-radius:50px;border-bottom-left-radius:50px}
.selector-active .bottom,.selector-active .top{position:absolute;width:25px;height:25px;background-color:#fff;right:0}
.selector-active .top{top:-25px}
.selector-active .bottom{bottom:-25px}
.selector-active .bottom:before,.selector-active .top:before{content:'';position:absolute;width:50px;height:50px;border-radius:50%;background-color:#5161ce}
.selector-active .top:before{left:-25px;top:-25px}
.selector-active .bottom:before{bottom:-25px;left:-25px}

Font Awesome CDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


JQUERY

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>


JS

// ---------vertical-menu with-inner-menu-active-animation-----------
var tabsVerticalInner = $('#accordian');
var selectorVerticalInner = $('#accordian').find('li').length;
var activeItemVerticalInner = tabsVerticalInner.find('.active');
var activeWidthVerticalHeight = activeItemVerticalInner.innerHeight();
var activeWidthVerticalWidth = activeItemVerticalInner.innerWidth();
var itemPosVerticalTop = activeItemVerticalInner.position();
var itemPosVerticalLeft = activeItemVerticalInner.position();
$(".selector-active").css({
  "top":itemPosVerticalTop.top + "px", 
  "left":itemPosVerticalLeft.left + "px",
  "height": activeWidthVerticalHeight + "px",
  "width": activeWidthVerticalWidth + "px"
});
$("#accordian").on("click","li",function(e){
  $('#accordian ul li').removeClass("active");
  $(this).addClass('active');
  var activeWidthVerticalHeight = $(this).innerHeight();
  var activeWidthVerticalWidth = $(this).innerWidth();
  var itemPosVerticalTop = $(this).position();
  var itemPosVerticalLeft = $(this).position();
  $(".selector-active").css({
    "top":itemPosVerticalTop.top + "px", 
    "left":itemPosVerticalLeft.left + "px",
    "height": activeWidthVerticalHeight + "px",
    "width": activeWidthVerticalWidth + "px"
  });
});
¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D

Recibe las últimas actualizaciones