При клике на пункт меню открывается подменю. Так же при клике на пункт меню передвигается синий блок. Сейчас некорректно определяется положение этого синего блока. Помогите исправить.
codepen.io/yurcha/pen/oLKOvv<div>
<i></i>
<ul class="sec_1">
<b class="cat_collection">Мягкая мебель</b>
<li class="card el_4">
<a class="card" href="#">Чайник "Репка"</a>
</li>
<li class="card el_5">
<a class="card" href="#">Монализа</a>
</li>
<li class="card el_9">
<a class="card" href="#">Изабелла</a>
</li>
<li class="card el_10">
<a class="card" href="#">Аладдин</a>
</li>
<li class="card el_11">
<a class="card" href="#">Джоконда</a>
</li>
<li class="card el_12">
<a class="card" href="#">Флора</a>
</li>
<li class="card el_13">
<a class="card" href="#">Престиж</a>
</li>
<li class="card el_14">
<a class="card" href="#">Лаура</a>
</li>
</ul>
<ul class="sec_2">
<b class="cat_collection">Мягкая мебель</b>
<li class="card el_4">
<a class="card" href="#">Чайник "Репка"</a>
</li>
<li class="card el_5">
<a class="card" href="#">Монализа</a>
</li>
<li class="card el_9">
<a class="card" href="#">Изабелла</a>
</li>
<li class="card el_10">
<a class="card" href="#">Аладдин</a>
</li>
<li class="card el_11">
<a class="card" href="#">Джоконда</a>
</li>
</ul>
<ul class="sec_3">
<b class="cat_collection">Мягкая мебель</b>
<li class="card el_4">
<a class="card" href="#">Чайник "Репка"</a>
</li>
<li class="card el_5">
<a class="card" href="#">Монализа</a>
</li>
</ul>
<ul class="sec_4">
<b class="cat_collection">Мягкая мебель</b>
<li class="card el_4">
<a class="card" href="#">Чайник "Репка"</a>
</li>
<li class="card el_5">
<a class="card" href="#">Монализа</a>
</li>
<li class="card el_9">
<a class="card" href="#">Изабелла</a>
</li>
<li class="card el_10">
<a class="card" href="#">Аладдин</a>
</li>
</li>
</ul>
<ul class="sec_5">
<b class="cat_collection">Мягкая мебель</b>
<li class="card el_4">
<a class="card" href="#">Чайник "Репка"</a>
</li>
<li class="card el_5">
<a class="card" href="#">Монализа</a>
</li>
<li class="card el_9">
<a class="card" href="#">Изабелла</a>
</li>
<li class="card el_10">
<a class="card" href="#">Аладдин</a>
</li>
<li class="card el_11">
<a class="card" href="#">Джоконда</a>
</li>
<li class="card el_12">
<a class="card" href="#">Флора</a>
</li>
</ul>
</div>
$(function() {
$('div>ul>b').click(
function () {
if ($(this).parent().height() == 25) {
$('div>ul').css('height', 25);
var _ul = $(this).parent(),
_div = _ul.parent();
var _elem = _ul.children(".card"),
_height = 35 * _elem.children().length;
_ul.css('height', _height);
var _top = $(this).position().top -1;
_div.children('i').css('top', _top);
}
});
});
* {
box-sizing: border-box;
}
body {
background: #000;
font-size: 16px;
font-weight: lighter;
line-height: 35px;
}
div {
position: relative;
}
div > ul {
height: 25px;
overflow: hidden;
-webkit-transition: height 0.5s linear;
-o-transition: height 0.5s linear;
transition: height 0.5s linear;
}
div {
position: relative;
}
div > i {
position: absolute;
width: 21px;
height: 21px;
border-radius: 50%;
background-color: #fff;
top: 7px;
left: 0;
z-index: 1;
border: 8px solid #003aff;
-webkit-transition: top 0.5s linear;
-o-transition: top 0.5s linear;
transition: top 0.5s linear;
}
div:after {
content: "";
position: absolute;
width: 2px;
height: 100%;
top: 8px;
left: 10px;
background-color: #fff;
}
b.cat_collection {
font-size: 17px;
font-weight: normal;
color: white;
}
li.card {
list-style-type: none;
padding-left: 20px;
}
a.card {
font-family: 'Ubuntu', sans-serif;
text-decoration: none;
color: #b9b9b9;
font-size: 15px;
font-style: italic;
}
Простой
