How do I fade in/out a jQuery menu with sub menus? - javascript

I am trying to make a menu that has many links and each link has its own sublist, this is what I am using
$(document).ready(function() {
$(".users").bind("click", function() {
$('#menu').fadeOut();
$('#sub_menu').fadeIn();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<a href="#">
<li>users <br /></a>
</li>
<a href="#">
<li>product <br /></a>
</li>
<a href="#">
<li>movies <br /></a>
</li>
<a href="#">
<li>clips <br /></a>
</li>
<a href="#">
<li>teaser <br /></a>
</li>
<a href="#">
<li>trailer <br /></a>
</li>
<a href="#">
<li>HDMovie <br /></a>
</li>
</div>
This is only for the users link to show its sublist. If i want to do the same with product, movies, and clips links do I have to copy and paste the function? Can anyone here give me a example of a function so i don't have to copy paste?
Thanks ;)

Honestly, I would use the Superfish plugin and not reinvent the wheel. Combine it with hoverIntent and it should be able to do everything you need.

Thanks fo replie guys, i have used this function it is working it fades out my menu and also fadesIn the sub menu but the same sub menu for every link i want sub menu2 to fadeIn when i click the next link..
Here is the link what i am doing http://umarstudio.com/test/html/screen_2b.htm
I just need the submenus to fade In for every link.. Thanks ;)

Try something like this. Also, make sure your properly ending your nested tags
<body>
<ul id="products" class="menu">
<li>users
<ul class="sub_menu'>
<li>user 1</li>
<li>user 1</li>
<li>user 1</li>
</ul>
</li>
<li>product
<ul class="sub_menu'>
<li>product 1</li>
<li>product 1</li>
<li>product 1</li>
</ul>
</li>
<li>movies</li>
<li>clips</li>
<li>teaser</li>
<li>trailer</li>
<li>HDMovie</li>
</ul>
</body>
the script
$(document).ready(function(){
$(".menu > li > a").bind("click", function(){
$('.sub_menu').fadeOut();
$(this).parent().find('.sub_menu').fadeIn();
}
})

Related

Hover delay for parent of Dropdown jQuery

I am trying to create a dropdown menu. This code for it is:
<script type="text/javascript">
$(document).ready(function(e) {
$('.has-sub').hover(function() {
$(this).toggleClass("tap", 350, "easeOutSine");
});
});
</script>
<li class="has-sub">
<a href="briefing.html">
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>
What I trying to do is to create a hover delay for parent of the Dropdown. You would need to hover over "Flight Briefing" for 2 seconds for the Dropdown menu to appear.
I have tried some other solutions that were provided with different questions, but they did not work.
Your .hover() function is a little wrong - you need a mouseenter and mouseleave function - I have set a timer of 2000 ms (2s) by using setTimeout() to give the 2 sec delay (although in my opinion thats a really long time to hover on an element beforehte effect occurs) and have the mouseout hide the ul directly. I am showing the ul buy habing the .has-sub ul have a display:none and then by adding the .tap class- display:block.
$(document).ready(function(){
$('.has-sub').hover(
function(){setTimeout(function(){$('.has-sub').addClass("tap")},2000)},
function(){$(this).removeClass("tap"); clearTimeout()}
);
});
.has-sub ul{display:none}
.tap ul{display:block}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
<a href="briefing.html">
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>
Here you go. If you need anything else, let me know.
$('.link').mouseenter(function(){
int = setTimeout(() => {
$('.dropdown').fadeIn();
}, 2000);
}).mouseleave(function(){
clearTimeout(int);
});
.dropdown {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="has-sub">
<a href="briefing.html" class='link'>
<img src=images/plane.png id=menu-icons>Flight Briefing<span class="sb-arrow"></span>
</a>
<ul class='dropdown'>
<li>
<a href="flightlog.html">
<img src="images/share.png" id="menu-icons">Flight Log</a>
</li>
<li>
<a href="loadsheet.html">
<img src="images/weight.png" id="menu-icons">Loadsheet</a>
</li>
<li>
<a href="#">
<img src="images/compass.png" id="menu-icons">Alternates</a>
</li>
<li>
<a href="#">
<img src="images/listing-option.png" id="menu-icons">Operational Flightplan</a>
</li>
</ul>
</li>

How to click a JS link with Selenium in C#

I am new to Selenium and trying to build a project with it. I need to learn how to click a JS link. There are many items listed by pages. Pagination is done by JS, unfortunately. here is an example...
<ul class="pagination museo-700">
<li class="first hidden disabled">
First
</li>
<li class="prev disabled">
<a class="arrow" href="#">
<img src="/areas/site/Content/images/page/pagination-prev-arrow.png">
</a>
</li>
<li class="page active">
1
</li>
<li class="page">
2
</li>
<li class="page">
3
</li>
<li class="page">
4
</li>
<li class="page">
5
</li>
<li class="next">
<a class="arrow" href="#">
<img src="/areas/site/Content/images/page/pagination-next-arrow.png">
</a>
</li>
<li class="last hidden">
Last
</li>
</ul>
I would like to click pages 1., 2., 3. ,4. and 5. pages above. Please give me a clue
You could first locate the pager with a CSS selector and then each link by link text:
driver.FindElement(By.CssSelector("ul.pagination"))
.FindElement(By.LinkText("1")).Click();
You could also use an XPath:
driver.FindElement(By.XPath("//a[#href='#'][text()='1']")).Click();
code not tested but I feel like they should work
.page > a:contains("1")
.page > a:contains("2")
.page > a:contains("3")
.page > a:contains("4")
.page > a:contains("5")
or
//li[contains(#class, 'page')]/a[text()='1']

multiple nested Dropdown in materialize. popup in left or side of UL

i have materialize which looks like this....
<ul id="dropDownFacultyList" class="dropdown-content" >
<li>Wart</li>
<li>Tart</li>
<li>Bart</li>
<li>Cart</li>
<li>Dart</li>
<li ><a href="#" >Fart</a></li>
<li><a class="dropdown-button" href="#" data-activates="dropDownGoaList">
Goa Campus</a>
<ul style="overflow: visible;" id="dropDownGoaList" class="dropdown-content sub-menu" style="left:0px">
<li>Deal</li>
<li>Meal</li>
<li>Kill</li>
<li>Bill</li>
<li>Sill</li>
<li ><a href="#" >Neal</a></li>
</ul>
</li>
</ul>
the sub menu works but popups in down the gutter
use top and bottom attribute if you are using absolute position to drop down

How do I use a "document.location.href" & in the same element have a button that doesn't activate it

(I'm working on a mobile responsive website)
This is the list:
html:
<li url="http://google.com" class="mainli">NFL
<img src="strokesmenu.png" class="sub-menu" />
<ul class="sports2">
<li>Superbowl </li>
</ul>
</li>
<li url="http://google.com" class="mainli">MLB Baseball
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>Playoff </li>
</ul>
</li>
<li class="mainli"> NBA
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>Finals Playoff </li>
</ul>
</li>
<li class="mainli"> College Basketball
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>March Madness </li>
</ul>
</li>
<li > Boxing </li>
<li> College Football </li>
<li class="mainli"> Golf
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>British Open</li>
<li>Masters</li>
<li>PGA Championship</li>
<li>US Open</li>
</ul>
</li>
<li class="mainli"> NHL
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>Stanley Cup </li>
</ul>
</li>
<li> MMA </li>
<li> UFC </li>
<li> Soccer </li>
<li> Tennis </li>
<li class="mainli"> Horse Racing
<img src="strokesmenu.jpg" class="sub-menu" />
<ul class="sports2">
<li>Belmont Stakes</li>
<li>Kentucky Derby</li>
<li>Preakness Stakes</li>
</ul>
</li>
<li> Other Sports </li>
</ul>
</div>
and these few onClick jQuery lines:
//first
$('.sub-menu').click(function(){
//$('.sports2').slideToggle("slow");
$(this).parent().find('.sports2').slideToggle("slow");
})
//second
$("li").click(function(){
document.location.href = $(this).attr('url');
});
"NfL" is a link by itself - but if you press the #sub-menu button you have more categories with links. works for all the <li> in my html.
If I comment the second jQuery part - it opens the second list (the sub categories .sports2). but the links don't work.
If I comment the first jQuery code - I get the links working perfectly, but the submenus don't open.
How do I blend both without getting things mixed?
I tried uncommenting both of them - I get the links working fine, but when I click the #submenu button it expands for a second and immediately redirects to the link of the <li url="...">
try to avoid links on different levels.
(wich level will be triggered? li-toplevel or li-lowest level?)
Instaid of trigger your link event on ALL li also your toplayer, try using it on a li with a class reference like you did for '.sub-menu'
When you click on a link or .sub-menu inside of <li> tag you're also clicking the li itself (have a look at example http://jsfiddle.net/op02x1qn/ and try clicking a link)
So one of the options is to get click event of exactly the item you want clicked. You can wrap your text inside of li like this (and style it css to be full width of parent element etc.):
<li class="mainli">
<span class="mainli-text" data-url="http://google.com">NFL</span>
<img src="strokesmenu.png" class="sub-menu" />
<ul class="sports2">
<li>Superbowl </li>
</ul>
</li>
And JS:
$('.mainli-text').on('click',function(e){
document.location.href = $(this).data('url');
});
So now when you click on something other than that new span.mainli-text inside of parent li it will have it's own click event.

add/remove active class for ul list with jquery?

I'm trying to remove and set an active class for a list item every time it's clicked. It's currently removing the selected active class but isn't setting it. Any idea what I'm missing?
HTML
<ul class="nav nav-list">
<li class='nav-header'>Test</li>
<li class="active">Page 1</li>
<li>Page 2</li>
<li><a href="page3.php">Page 3</li>
</ul>
jquery:
$('.nav-list').click(function() {
//console.log("Clicked");
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
this will point to the <ul> selected by .nav-list. You can use delegation instead!
$('.nav-list').on('click', 'li', function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
you can use siblings and removeClass method
$('.nav-link li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});
Try this,
$('.nav-list li').click(function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
In your context $(this) will points to the UL element not the Li. Hence you are not getting the expected results.
I used this:
$('.nav-list li.active').removeClass('active');
$(this).parent().addClass('active');
Since the active class is in the <li> element and what is clicked is the <a> element, the first line removes .active from all <li> and the second one (again, $(this) represents <a> which is the clicked element) adds .active to the direct parent, which is <li>.
In my case I have div element with same class. Now I added the active class on it using jquery check the code.
div element
<div class="previewBox" id="first_div">
...
</div>
<div class="previewBox" id="second_div">
...
</div>
<div class="previewBox" id="third_div">
...
</div>
jquery code
$(".previewBox").click(function () {
$(".previewBox.active").removeClass('active')
$(this).addClass('active')
});
css
.active {
background-color:#e9f1f5;
border-left:4px solid #024a81;
}
Demo
click_this
$(document).ready(function(){
$('.cliked').click(function() {
$(".cliked").removeClass("liactive");
$(this).addClass("liactive");
});
});
.liactive {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul
className="sidebar-nav position-fixed "
style="height:450px;overflow:scroll"
>
<li>
<a className="cliked liactive" href="#">
check Kyc Status
</a>
</li>
<li>
<a className="cliked" href="#">
My Investments
</a>
</li>
<li>
<a className="cliked" href="#">
My SIP
</a>
</li>
<li>
<a className="cliked" href="#">
My Tax Savers Fund
</a>
</li>
<li>
<a className="cliked" href="#">
Transaction History
</a>
</li>
<li>
<a className="cliked" href="#">
Invest Now
</a>
</li>
<li>
<a className="cliked" href="#">
My Profile
</a>
</li>
<li>
<a className="cliked" href="#">
FAQ`s
</a>
</li>
<li>
<a className="cliked" href="#">
Suggestion Portfolio
</a>
</li>
<li>
<a className="cliked" href="#">
Bluk Lumpsum / Bulk SIP
</a>
</li>
</ul>;

Categories