CODEWITHSUNDEEP
jqueryhtmldrop-down-menu
user3584923
user3584923

Reputation: 33

jquery dropdown with separate container

I have a structure like this:

<div class="menu">
    <ul>
        <li><a href="/dropdown1">item1</a></li>
        <li><a href="/dropdown1">item2</a></li>
        <li><a href="/dropdown1">item3</a></li>
    </ul>
</div>
<div class="submenu">
    <div class="dropdown1">content1</div>
    <div class="dropdown2">content2</div>
    <div class="dropdown3">content3</div>
</div>

Submenu content is invisible, css:

.submenu div{display:none;}

With jquery I want to when hover on item (.menu ul li a) 1. take attribute href without '/' and show same name div from .submenu. 2. add class 'active' to item (.menu ul li a)

And hide this div if mouse out from this container or menu item and remove class 'active' (like classic dropdown menu)

This fiddle http://jsfiddle.net/jzj5wub6/

Upvotes: 0

Views: 1105

Answers (3)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

Here you are a solution http://jsfiddle.net/jzj5wub6/4/

$('.menu a').on({
    mouseenter: function () {
        var link = $(this).attr('href').substring(1);
        $(this).addClass('active');
        $('.submenu').find('.' + link).show();
    },
    mouseleave: function () {
        var link = $(this).attr('href').substring(1);
        $(this).removeClass('active');
        $('.submenu div').hide();
    },
    click: function (e) {
        e.preventDefault();
    }
});

$('.submenu div').on({
    mouseenter: function () {
        var link = $(this).attr('class');
        $('.menu a[href="/'+link+'"]').addClass('active');
        $(this).show();
    },
    mouseleave: function () {        
        $('.menu a').removeClass('active');
        $('.submenu div').hide();
    }
});

Upvotes: 1

Vitorino fernandes
Vitorino fernandes

Reputation: 15981

you can also make it this way

Js Fiddle

$('.menu a').hover(function () {
    var a = $(this).attr('href').slice(1) // taking the href value and removing /
    $('.submenu div').removeClass('active');
    $('.submenu .' + a).addClass('active')
})

$('.menu a').on('mouseleave', function(){
  $('.submenu div' ).removeClass('active');
})

Edit

JS Fiddle

$('.menu a').hover(function () {
    var a = $(this).attr('href').slice(1)
    $('.submenu div').removeClass('active');
    $('.submenu .' + a).addClass('active')
})

$('.submenu div').on('mouseleave', function () {
    $('.submenu div').removeClass('active');
})

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

Try

jQuery(function ($) {
    $('.menu a').click(function(){
        e.preventDefault();
    })
    $('.menu li').hover(function () {
        var $target = $('.'+$(this).find('a').attr('href').substring(1), '.submenu');
        clearTimeout($target.data('hoverTimer'));
        $target.stop(true, true).slideDown(500);
    }, function () {
        var $target = $('.'+$(this).find('a').attr('href').substring(1), '.submenu');
        var timer = setTimeout(function () {
            $target.stop(true, true).slideUp();
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('.submenu > div').hover(function () {
        clearTimeout($(this).data('hoverTimer'));
    }, function () {
        $(this).stop(true, true).slideUp();
    });
});
.menu ul {
    display:block;
    width:100%;
    height:30px;
    list-style:none;
}
.menu li {
    float:left
}
.menu a {
    background:gray;
    padding:5px;
    margin-right:1px
}
.submenu div {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menu">
    <ul>
        <li>
            <a href="/dropdown1">item1</a>
        </li>
        <li>
            <a href="/dropdown2">item2</a>
        </li>
        <li>
            <a href="/dropdown3">item3</a>
        </li>
    </ul>
</div>
<div class="submenu">
    <div class="dropdown1">content1</div>
    <div class="dropdown2">content2</div>
    <div class="dropdown3">content3</div>
</div>

Upvotes: 1

Related Questions