Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="wrapper">
- <ul>
- <li>
- <a class="active" href="#"><span>Link 1</span></a>
- </li>
- <li>
- <a href="#"><span>Link 2</span></a>
- </li>
- <li>
- <a href="#"><span>Link 3</span></a>
- </li>
- <li>
- <a href="#"><span>Linl 4</span></a>
- </li>
- <li>
- <a href="#"><span>Link 5</span></a>
- </li>
- <li>
- <a href="#"><span>Link 6</span></a>
- </li>
- <li>
- <a href="#"><span>Link 7</span></a>
- </li>
- <li>
- <a href="#"><span>Link 8</span></a>
- </li>
- <li>
- <a href="#"><span>Link 9</span></a>
- </li>
- <li>
- <a href="#"><span>Link 10</span></a>
- </li>
- </ul>
- <span class="js-status-menu status-menu"></span>
- </div>
- div {
- max-width: 277px;
- height: 100%;
- background: #333;
- text-align: left;
- padding: 0;
- position: relative;
- }
- ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- ul li a {
- display: block;
- text-decoration: none;
- font-size: 12px;
- line-height: 1.25em;
- color: #fff;
- border-bottom: solid 1px #333D4A;
- padding: 14px 25px;
- position: relative;
- }
- ul li a:hover {
- color: #fff;
- background: #435162;
- }
- .status-menu {
- width: 5px;
- height: 43px;
- background: #4EFFFF;
- position: absolute;
- left: 0;
- top: 0;
- }
- $(document).ready(function() {
- if($('.js-status-menu').length){
- var jsMenuHover = $('.js-status-menu');
- var disclMenu = 0;
- var style = 'easeOutExpo';
- var default_top = Math.round($('ul li a.active').offset().top - $('ul').offset().top) + disclMenu;
- if($('ul li a.active').parents('.submenu').length){
- $('ul li a.active').parents('.submenu').show();
- $('ul li a.active').parents('.submenu').prev('a').addClass('open');
- }
- jsMenuHover.css({top: default_top});
- $('ul li a').hover(function () {
- var topPos = Math.round($(this).offset().top - $('ul').offset().top);
- $('.js-status-menu').stop(false, true).animate({top: topPos + disclMenu},{duration:500, easing: style});
- });
- $('ul').on('mouseleave',function () {
- if ($('ul li a').hasClass('active')){
- var default_top = Math.round($('ul li a.active').offset().top - $('ul').offset().top) + disclMenu;
- }
- jsMenuHover.stop(false, true).animate({top: default_top},{duration:500, easing: style});
- });
- }
- });
Add Comment
Please, Sign In to add comment