Jquery Dropdown With Separate Container

June 16, 2024 Post a Comment

I have a structure like this:

item1
).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(); }); });
```
.menuul {
    display:block;
    width:100%;
    height:30px;
    list-style:none;
}
.menuli {
    float:left
}
.menua {
    background:gray;
    padding:5px;
    margin-right:1px
}
.submenudiv {
    display:none;
}
```
```
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="menu"><ul><li><ahref="/dropdown1">item1</a></li><li><ahref="/dropdown2">item2</a></li><li><ahref="/dropdown3">item3</a></li></ul></div><divclass="submenu"><divclass="dropdown1">content1</div><divclass="dropdown2">content2</div><divclass="dropdown3">content3</div></div>
```

Solution 2:

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();
    }
});

Solution 3:

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');
})

Html5 Playground

Jquery Dropdown With Separate Container

Solution 2:

Solution 3:

Post a Comment for "Jquery Dropdown With Separate Container"