jquery fast hover issue - javascript

I have a sidebar that have an issue. the issue is that
when i hover mouse over the sidebar slowly it work correctly, but when i move the mouse fast on it, it will mess. how can i fix it?
this is my HTML:
<div class="sidebar">
<ul class="insidenav">
<li class="purple">
<span>ابر پژوهیار</span>
<ul style="display: none;" class="insidenavsubmenu">
<li>کتابخانه من</li>
<li><a target="_blank" href="">اطلاعات کاربر</a></li>
<li>مشخصات کاربر</li>
<li>اطلاعات حساب</li>
<li><a target="_blank" href="">تغیر کلمه عبور</a></li>
<li>خروج</li>
</ul>
</li>
<li class="green">
<a href="" class="link green">
<span>فراداده‌های موضوعی</span>
</a>
</li>
<li class="blue">
<a href="" class="link blue">
<span>استناددهی آنلاین</span>
</a>
</li>
<li class="darkorange">
<a class="link darkorange"><span>دانشنامه استناددهی</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>همزمان‌سازی</li>
<li>شیوه نگارش مقاله</li>
<li>شیوه نگارش پایان نامه</li>
<li>استناددهی</li>
<li>بیشتر بدانیم...</li>
<li>مثال های استناددهی</li>
</ul>
</li>
<li class="orange">
<span>خرید آنلاین</span>
<ul style="display: none;" class="insidenavsubmenu">
<li><a target="_blank" href="">خرید و دریافت پستی</a></li>
<li>خرید و دریافت آنلاین</li>
<li><a target="_blank" href="">خرید «پژوهیار» از دیجی‌کالا</a></li>
</ul>
</li>
<li class="red">
<a class="link red"><span>کارگاه‌های آموزشی</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>کارگاه‌های آموزشی برگزار شده</li>
<li>شرایط کارگاه‌های آموزشی</li>
<li>
<a>ثبت نام</a>
<ul class="dubinsidenavsubmenu">
<li>فرم ثبت نام تربیت مدرس</li>
<li>فرم ثبت نام کارگاه سازمانی</li>
<li>فرم ثبت نام کارگاه عمومی</li>
</ul>
</li>
</ul>
</li>
<li class="lightgreen">
<a class="link lightgreen"><span>شبکه مدرسان</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>استان‌های فعال</li>
<li>رزومه مدرسان</li>
<li>شرایط جذب مدرس</li>
</ul>
</li>
<li class="darkbrown">
<a class="link darkbrown"><span>سفارشی‌سازی</span></a>
<ul class="insidenavsubmenu">
<li>درج شیوه‌نامه در نرم‌افزار</li>
<li>
<a href="">
حمایت از وبگاه‌ها
</a>
</li>
<li>
<a href="">
درج کتابخانه موضوعی
</a>
</li>
</ul>
</li>
</ul>
</div>
and this is my js:
jQuery(window).load(function() {
$('ul.insidenav > li').hover(function () {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').slideDown('1000');
$(this).addClass('arrow-down');
}
},function() {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').slideUp();
$(this).removeClass('arrow-down');
}
});
});
jQuery(window).load(function() {
$('ul.insidenavsubmenu > li').hover(function() {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').slideDown('1000');
$(this).addClass('arrow-down');
}
},function () {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').slideUp();
$(this).removeClass('arrow-down');
}
});
});
this is my css:
.sidebar {
width: 18.75em;
height: 200px;
padding: 1.875em 0 1.375em 0;
float: right;
display: table;
}
.sidebar ul.insidenav {margin-bottom: 5px;display: inline;}
.sidebar ul.insidenav li.purple {background-color: #9b59b6;}
.sidebar ul.insidenav li.green {background-color: #6fba45;}
.sidebar ul.insidenav li.blue {background-color: #38afe2;}
.sidebar ul.insidenav li.darkorange {background-color: #e8a061;}
.sidebar ul.insidenav li.orange {background-color: #f1c40f;}
.sidebar ul.insidenav li.red {background-color: #e65947;}
.sidebar ul.insidenav li.lightgreen {background-color: #1ac98f;}
.sidebar ul.insidenav li.darkbrown {background-color: #a07e95;}
.sidebar ul.insidenav li.other1 {background-color: #3E5F8A;}
.sidebar ul.insidenav li.other2 {background-color: #3E5F8A;}
.sidebar ul.insidenav li.other3 {background-color: #3E5F8A;}
.sidebar ul.insidenav li ul.insidenavsubmenu{
color: #fff;
display: none;
margin-right: 65px;
padding-bottom: 5px;
}
.sidebar ul.insidenav li ul.insidenavsubmenu li a{color: #fff;cursor: pointer;font: 8pt IRANSans;}
.sidebar ul.insidenav li ul.insidenavsubmenu li ul.dubinsidenavsubmenu{
color: #fff;
display: none;
margin-right: 15px;
padding-bottom: 5px;
}
.sidebar ul.insidenav li ul.insidenavsubmenu li ul.dubinsidenavsubmenu li a{color: #fff;}


Here is the example that working properly.
jQuery(window).load(function() {
$('ul.insidenav > li').hover(function(e) {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').stop(true).slideDown('1000');
$(this).addClass('arrow-down');
}
}, function() {
if ($(this).find('ul.insidenavsubmenu').length > 0) {
$(this).find('ul.insidenavsubmenu').stop(true).slideUp();
$(this).removeClass('arrow-down');
}
});
});
jQuery(window).load(function() {
$('ul.insidenavsubmenu > li').hover(function(e) {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').stop(true).slideDown('1000');
$(this).addClass('arrow-down');
}
}, function() {
if ($(this).find('ul.dubinsidenavsubmenu').length > 0) {
$(this).find('ul.dubinsidenavsubmenu').stop(true).slideUp();
$(this).removeClass('arrow-down');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebar">
<ul class="insidenav">
<li class="purple">
<span>ابر پژوهیار</span>
<ul style="display: none;" class="insidenavsubmenu">
<li>کتابخانه من
</li>
<li><a target="_blank" href="">اطلاعات کاربر</a>
</li>
<li>مشخصات کاربر
</li>
<li>اطلاعات حساب
</li>
<li><a target="_blank" href="">تغیر کلمه عبور</a>
</li>
<li>خروج
</li>
</ul>
</li>
<li class="green">
<a href="" class="link green">
<span>فراداده‌های موضوعی</span>
</a>
</li>
<li class="blue">
<a href="" class="link blue">
<span>استناددهی آنلاین</span>
</a>
</li>
<li class="darkorange">
<a class="link darkorange"><span>دانشنامه استناددهی</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>همزمان‌سازی
</li>
<li>شیوه نگارش مقاله
</li>
<li>شیوه نگارش پایان نامه
</li>
<li>استناددهی
</li>
<li>بیشتر بدانیم...
</li>
<li>مثال های استناددهی
</li>
</ul>
</li>
<li class="orange">
<span>خرید آنلاین</span>
<ul style="display: none;" class="insidenavsubmenu">
<li><a target="_blank" href="">خرید و دریافت پستی</a>
</li>
<li>خرید و دریافت آنلاین
</li>
<li><a target="_blank" href="">خرید «پژوهیار» از دیجی‌کالا</a>
</li>
</ul>
</li>
<li class="red">
<a class="link red"><span>کارگاه‌های آموزشی</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>کارگاه‌های آموزشی برگزار شده
</li>
<li>شرایط کارگاه‌های آموزشی
</li>
<li>
<a>ثبت نام</a>
<ul class="dubinsidenavsubmenu">
<li>فرم ثبت نام تربیت مدرس
</li>
<li>فرم ثبت نام کارگاه سازمانی
</li>
<li>فرم ثبت نام کارگاه عمومی
</li>
</ul>
</li>
</ul>
</li>
<li class="lightgreen">
<a class="link lightgreen"><span>شبکه مدرسان</span></a>
<ul style="display: none;" class="insidenavsubmenu">
<li>استان‌های فعال
</li>
<li>رزومه مدرسان
</li>
<li>شرایط جذب مدرس
</li>
</ul>
</li>
<li class="darkbrown">
<a class="link darkbrown"><span>سفارشی‌سازی</span></a>
<ul class="insidenavsubmenu">
<li>درج شیوه‌نامه در نرم‌افزار
</li>
<li>
<a href="">
حمایت از وبگاه‌ها
</a>
</li>
<li>
<a href="">
درج کتابخانه موضوعی
</a>
</li>
</ul>
</li>
</ul>
</div>


You should change slideDown duration 1000 and this will down immediately.
$(this).find('ul.dubinsidenavsubmenu').slideDown({duration:10});
You can also take help from this question.

Related

add background color for active clicked item in nav css

I try all solutions but still this not work for me.
.nav-home > a:active {
background: #4a90e2;
}
.nav-navigation > a:active {
color: #fff !important;
background: #4a90e2;
}
<aside class="main-sidebar" style="background-color: #FFF;">
<section class="sidebar sidebar-scrollbar">
<ul class="sidebar-menu" data-widget="tree">
<li class="header">Navigation</li>
<li class="nav-home">
<a href="#">
<i class="fa fa-home"></i> <span>Home</span>
</a>
</li>
</ul>
</section>
</aside>
In above example this working only during click nav then you see blue background, but I need display always blue color when this tab is clicked.

You should use JavaScript to save the state of the currently clicked tab:
document.querySelector('.nav-home > a').addEventListener('click', () => {
document.querySelector('.nav-home > a').style.backgroundColor = '#4a90e2';
})
.nav-home > a:active {
background: #4a90e2;
}
.nav-navigation > a:active {
color: #fff !important;
background: #4a90e2;
}
<aside class="main-sidebar" style="background-color: #FFF;">
<section class="sidebar sidebar-scrollbar">
<ul class="sidebar-menu" data-widget="tree">
<li class="header">Navigation</li>
<li class="nav-home">
<a href="#">
<i class="fa fa-home"></i> <span>Home</span>
</a>
</li>
</ul>
</section>
</aside>

I assume that you want to change active tab background, so you can add class active to current clicked tab and remove from others
here is what I did :
const handleActiveTab = (element)=>{
Array.from(document.querySelectorAll('a')).forEach((el) => el.classList.remove('active'));
element.classList.add('active')
}
.nav-home > a:active {
background: #4a90e2;
}
.nav-navigation > a:active {
color: #fff !important;
background: #4a90e2;
}
.active{
background-color:#4a90e2 !important;
}
<aside class="main-sidebar" style="background-color: #FFF;">
<section class="sidebar sidebar-scrollbar">
<ul class="sidebar-menu" data-widget="tree">
<li class="header">Navigation</li>
<li class="nav-home">
<a href="#" onclick="handleActiveTab(this)">
<i class="fa fa-home"></i> <span>Home</span>
</a>
<br/>
<a href="#" onclick="handleActiveTab(this)">
<i class="fa fa-home"></i> <span>about-us</span>
</a>
<br/>
<a href="#" onclick="handleActiveTab(this)">
<i class="fa fa-home"></i> <span>contact-us</span>
</a>
</li>
</ul>
</section>
</aside>

How to open a new text area in a div on clicking a link

I want to to add a text area with a button everytime the Add Card link is clicked on the popover.
I am new to Java Script. I do not know how to add a text area everytime an Add card is clicked.
[Here is how my page looks like]
[This is what i want]
Here is the Code:
JavaScript:
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'right',
html: true,
content: function()
{
return $('#popover-content').html();
}
});
});
$('.popover-dismiss').popover({
trigger: 'focus'
})
</script>
CSS:
.pop-over-list li>a {
display: block;
font-weight: 700;
padding-top:6px;
position: relative;
margin: 0 -10px;
text-decoration: none;
}
.popover-content li>a:hover{
background-color: #298fca;
}
.parent2
{
display: flex;
justify-content: space-between;
}
Html Code:
<div class= "flex-container">
<div class ="parent2">
<span><b >Stuff To Try (this is a list)</b></span>
<span>
<i class ="fa fa-ellipsis-h" title ="List Actions" tabindex="0" data-
trigger ="focus" data-toggle="popover" ></i>
</span>
<div id="popover-content" style="display:none;">
<ul style ="margin:0; padding:0; list-style: none;" class ="pop-over-list" >
<li >
<a href="#">
<b style ="color: #444444">Add Card...</b>
</a>
</li>
<li>
<a href="#">
<b style ="color: #444444">Copy List...</b>
</a>
</li>
<li>
<a href="#"><b style ="color: #444444">
Move List...</b></a>
</li>
<li>
<b style ="color: #444444">Suscribe...</b>
</li>
<ul>
<hr>
<ul style ="margin:0; padding:0; list-style: none;" class ="pop-over-
list">
<li>
<a href="#">
<b style ="color: #444444">Move All Cards In This List...</b>
</a>
</li>
<li>
<a href="#"><b style ="color: #444444">
Archive All Cards in this List...</b></a>
</li>
</ul>
<hr>
<ul style ="margin-top:0px; padding:0; list-style: none;" class ="pop-
over-list">
<li><a href="#">
<b style ="color: #444444">Sort By Date Created (Newest First)...</b>
</a>
</li>
<li><a href="#"><b style ="color: #444444">
Sort By Date Created (Oldest First)...</b>
</a>
</li>
</ul>
<hr>
<ul style ="margin-top:2px; padding:0; list-style: none;" class ="pop-
over-list">
<li><a href="#" > <b style ="color: #444444">Archive This List...</b>
</a>
</li>
</ul>
</div>
</div>

Bootstrap Nestable List-Group - JQuery Sortable

Hi can anyone help me with JQuery Sortable? I need to make this list sortable. I cannot get it to work right been able to drag the parent that is inside another parent. Do I have to make the handle the prev() element?
Here is the HTML
<ul class="list-group list-group-root well">
<li href="#item-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1
</li>
<ul class="list-group collapse" id="item-1">
<li href="#item-1-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
</li>
<ul class="list-group collapse" id="item-1-1">
<li href="#" class="list-group-item">Item 1.1.1</li>
<li href="#" class="list-group-item">Item 1.1.2</li>
<li href="#" class="list-group-item">Item 1.1.3</li>
</ul>
<li href="#item-1-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
</li>
<ul class="list-group collapse" id="item-1-2">
<li href="#" class="list-group-item">Item 1.2.1</li>
<li href="#" class="list-group-item">Item 1.2.2</li>
<li href="#" class="list-group-item">Item 1.2.3</li>
</ul>
<li href="#item-1-3" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
</li>
<ul class="list-group collapse" id="item-1-3">
<li href="#" class="list-group-item">Item 1.3.1</li>
<li href="#" class="list-group-item">Item 1.3.2</li>
<li href="#" class="list-group-item">Item 1.3.3</li>
</ul>
</ul>
</ul>
The CSS..
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}
.list-group.list-group-root > .list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
padding-left: 30px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
padding-left: 45px;
}
.list-group-item .glyphicon {
margin-right: 5px;
}
https://jsfiddle.net/Lh2rzts6/

Answer update
From comment:
how do I make the children move with the parent if the parent is dragged?
You can use the sortstop event in order to move the children with the parent.
Old answer
I may suggest you to use html5sortable.
Add to each ul element the classes: sortable & js-connected and call sortable.
$('.list-group-item').on('click', function () {
$('.glyphicon', this)
.toggleClass('glyphicon-chevron-right')
.toggleClass('glyphicon-chevron-down');
});
//
// add the classes sortable & js-connected to each ul
//
$('.list-group').addClass('sortable js-connected');
//
// activate html5sortable
//
sortable('.sortable', {
connectWith: 'js-connected',
forcePlaceholderSize: true
});
//
// on sortstop handle the parents node....
//
document.querySelectorAll('.sortable').forEach(function (ele, idx) {
ele.addEventListener('sortstop', function (e) {
if(e.detail.item.querySelector('i') != null) { // if parent element (i.e.: UL) ....
$(e.detail.item).append($(e.detail.item.getAttribute('href')));
}
});
});
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}
.list-group.list-group-root > .list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
padding-left: 30px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
padding-left: 45px;
}
.list-group-item .glyphicon {
margin-right: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/lukasoppermann/html5sortable/master/dist/html.sortable.min.js"></script>
<ul class="list-group list-group-root well">
<li href="#item-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1
</li>
<ul class="list-group collapse" id="item-1">
<li href="#item-1-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
</li>
<ul class="list-group collapse" id="item-1-1">
<li href="#" class="list-group-item">Item 1.1.1</li>
<li href="#" class="list-group-item">Item 1.1.2</li>
<li href="#" class="list-group-item">Item 1.1.3</li>
</ul>
<li href="#item-1-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
</li>
<ul class="list-group collapse" id="item-1-2">
<li href="#" class="list-group-item">Item 1.2.1</li>
<li href="#" class="list-group-item">Item 1.2.2</li>
<li href="#" class="list-group-item">Item 1.2.3</li>
</ul>
<li href="#item-1-3" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
</li>
<ul class="list-group collapse" id="item-1-3">
<li href="#" class="list-group-item">Item 1.3.1</li>
<li href="#" class="list-group-item">Item 1.3.2</li>
<li href="#" class="list-group-item">Item 1.3.3</li>
</ul>
</ul>
</ul>

Sub menu on hover over navbar link in bootstrap

I want to to implement a feature in my bootstrap project like whenever someone will hover over my one of navbar links, it will display a detailed menu vertically like a menu in image below
I know how to make dropdown on hover over navbar link, but how can i populate this type of sub menu on hover.
Is already there any tutorial or example exists then do share with me.
If not then share idea!
Thanks!
Html
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

I have tried this, You can use below code :
HTML :
<nav class="navbar navbar-default navbar-static">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Sword of Truth</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Panda</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-6">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
CSS :
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body{
font-family: 'Lato', sans-serif;
font-weight:300;
}
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight:300;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
Fiddle is here Click here

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: #ff3546;
padding: 5px 60px 5px 5px;
line-height: 30px;
}
.carousel-control {
width: 30px;
height: 30px;
top: -35px;
}
.left.carousel-control {
right: 30px;
left: inherit;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
font-size: 12px;
background-color: #fff;
line-height: 30px;
text-shadow: none;
color: #333;
border: 1px solid #ddd;
}
</style>
<div class="container">
Toggle navigation
My Store
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
Men <span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Men Collection</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1">
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2">
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3">
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li>View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li>Auto Carousel</li>
<li>Carousel Control</li>
<li>Left & Right Navigation</li>
<li>Four Columns Grid</li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li>Glyphicon</li>
<li>Google Fonts</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li>Navbar Inverse</li>
<li>Pull Right Elements</li>
<li>Coloured Headers</li>
<li>Primary Buttons & Default</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li>Easy to Customize</li>
<li>Calls to action</li>
<li>Custom Fonts</li>
<li>Slide down on Hover</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
Women <span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li>Auto Carousel</li>
<li>Carousel Control</li>
<li>Left & Right Navigation</li>
<li>Four Columns Grid</li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li>Glyphicon</li>
<li>Google Fonts</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li>Navbar Inverse</li>
<li>Pull Right Elements</li>
<li>Coloured Headers</li>
<li>Primary Buttons & Default</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li>Easy to Customize</li>
<li>Calls to action</li>
<li>Custom Fonts</li>
<li>Slide down on Hover</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Women Collection</li>
<div id="womenCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1">
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2">
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3">
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#womenCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#womenCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li>View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></li>
</ul>
</li>
</ul>
</li>
<li>Store locator</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
My account <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>My cart (0) items</li>
</ul>
</div><!-- /.nav-collapse -->
<script>
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});
</script>
for more visite enter link description here

This may be an option, you just need to adjust the margin and padding to your needs.
Hope it helps. ;)
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.dropdown-menu-fixed {
margin: 0;
padding: 0;
height: auto;
background-color: #fff;
}
.dropdown-menu-fixed > ul {
position: relative;
margin: 1rem 0 0;
padding: 0 0 1rem 0;
min-height: 1px;
float: none;
width: 100%;
}
.dropdown-menu-fixed > ul li {
padding: 3px 20px;
}
.dropdown-menu-fixed a {
display: block;
text-decoration: none;
}
.dropdown-header {
font-weight: bold;
font-size: 13px;
}
#media (min-width: 768px) {
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.dropdown-menu-fixed {
position: fixed;
top: 50px;
width: 100%;
background-color: #fff;
}
.dropdown-menu-fixed > ul {
position: relative;
margin: 1rem 0 0;
padding: 0 0 1rem 60px;
min-height: 1px;
float: left;
width: 33.33333333%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Personal
<span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-fixed">
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

try this, it should work for desktop as well as mobile views:
$(document).ready(function(){
$(".dropdown").hover(
function () {
if (!$($(this).parents()[3]).find('.navbar-toggle').is(":visible")) {
$(this).find('.dropdown-toggle').trigger('click');
}
},
function () {
if (!$($(this).parents()[3]).find('.navbar-toggle').is(":visible")) {
$(this).find('.dropdown-toggle').trigger('click');
}
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

expand list when mouse hover on list - css list tree view

I am trying to build CSS basic list tree structure (UL-Li...) of multiple levels. I have managed up-to point where mouse hover on level 1 li, it shows its child ul-li and move back to its original position when mouse hover out. However it remove active class when level 1 even it has child elements so my question is how I bound to check if mouse is on $this child element and not hover out to level 2 and so on...
$(document).ready(function() {
$('.Nav_tree_wrapper ul li').each(function() {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
$(".Nav_tree_wrapper ul li.parent > a").hover(
function() {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
}, function() {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
}
);
});
.Nav_tree_wrapper ul {
list-style: none outside none;
padding: 20px;
}
.Nav_tree_wrapper ul li ul {
display: none;
margin: 0 0 0 12px;
overflow: hidden;
padding: 0 0 0 25px;
}
.Nav_tree_wrapper ul li a {
display: block;
padding: 15px 10px 15px 15px;
line-height: 22px;
position: relative;
border-bottom: 1px groove #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Nav_tree_wrapper">
<ul id="treeview" class="nav">
<li>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/SystemAdministration/Admin_Home">System Administration</a>
</li>
<li class="parent">
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/SystemCore/SystemCoreHome">System Core</a>
<ul style="display: none;">
<li>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c2/a2">f2</a>
</li>
<li class="parent">
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c2/a2">f3</a>
<ul>
<li>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c4/a4">f4</a>
</li>
<li>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c5/a5">f5</a>
</li>
<li>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c6/a6">f6</a>
</li>
</ul>
</li>
<li class="parent">
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c7/a7">f7</a>
<ul>
<li class="parent">
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c8/a8">f8</a>
<ul>
<li class="parent">
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c10/a10">f10</a>
<ul>
<li>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c11/a11">f11</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c9/a9">f9</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="parent">
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/MyControllerA/MyActionA">MyFunctionA</a>
<ul style="display: none;">
<li class="parent">
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c12/a12">f12</a>
<ul style="display: none;">
<li>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c13/a13">f13</a>
</li>
<li>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c14%20/a14">f14</a>
</li>
</ul>
</li>
<li>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/c16/a16">f16</a>
</li>
</ul>
</li>
<li>
<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#MainContent" href="/CourseManagement/CoursesHome">Course Management</a>
</li>
</ul>

You were almost there with your code. You just have to watch for the li.parent instead of the li.parent > a. So your javascript code could look like this:
$(document).ready(function() {
$('.Nav_tree_wrapper ul li').each(function() {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
$(".Nav_tree_wrapper ul li.parent").hover(
function() {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
}, function() {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
}
);
});
And the JS-Fiddle to test it: http://jsfiddle.net/as9fxkLf/1/
But there is a small problem...
If you've tried the JS-Fiddle, you will instantly see the issue. With multiple sub-levels that open and close only on hover, it becomes very nervous very quickly. You might want to arrange the first (or the second) level of the navigation horizontally instead, so you don't accidentally trigger the hover event too quickly.
Alternatively you could use the jQuery hover intent plugin. It delays the beginning of the hover by a hundred milliseconds:
http://cherne.net/brian/resources/jquery.hoverIntent.html

Categories