HTML:
<ul class="current">
<li>
<a href="#nogo"><b>Products</b>
<div class="select_sub show">
<ul class="sub">
<li class="sub_show">Add product</li>
</ul>
</div>
</a>
</li>
</ul>
<ul class="select">
<li>
<a href="#nogo"><b>Item</b>
<div class="select_sub">
<ul class="sub">
<li>Add Item</li>
</ul>
</div>
</a>
</li>
</ul>
jQuery:
$("ul").click(function (e) {
e.preventDefault(); // if iI comment that line a href link work but navigation not work
var $this = $(this);
var $siblings = $(this).siblings();
$this.addClass("current").removeClass("select");
$this.find('.select_sub').addClass('show');
$siblings.removeClass("current").addClass('select');
$siblings.find('.select_sub').addClass('show');
});
If I click on the Add product link, there is redirection on this url product/product.php
Thanks
My guess is that, when you say e.preventDefault(), you are actually telling to prevent ul default, which is nothing. Try to call preventDefault() directly on the link.
Related
I am unable to target an element with an id, whenever there is a click event. It's a pretty simple solution, no idea why this isn't working out. Please help me with it.
$('ul.main-menu li').click(function(e) {
e.preventDefault();
if ($(this).siblings('li').find('a').has('#has-sub-menu')) {
alert('sub-menu')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
<li class="main-menu-item">
Home
</li>
<li class="main-menu-item">
<a id="has-sub-menu" href="#">Company</a>
</li>
</ul>
so the li is not the click event, the A is.
I've also made it a class of submenu. not an ID.
<ul class="main-menu">
<li class="main-menu-item">
Home
</li>
<li class="main-menu-item">
<a class="has-sub-menu" href="#">Company</a>
</li>
</ul>
<script >
$('ul.main-menu li a').click(function(e) {
e.preventDefault();
if ($(this).hasClass('has-sub-menu')) {
alert('sub-menu')
}
});
</script>
You can directly add the click event on the a with the id:
$('#has-sub-menu').click(function(e) {
e.preventDefault();
alert('sub-menu');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
<li class="main-menu-item">
Home
</li>
<li class="main-menu-item">
<a id="has-sub-menu" href="#">Company</a>
</li>
</ul>
I have my index calls from other HTML pages using the library CSI.js
my index:
<div class="col-6 col-md-2" id="nav">
<div data-include="./views/menu/sticky-menu.html"></div> <!-- menu -->
</div>
in menu page:
<div class="sticky-menu" id="sticky-menu">
<div class="sticky-menu-header">
<img class="logo" src="./img/logo-branco.svg" />
</div>
<ul>
<li class="active"><i class="fa fa-home"></i>Home </li>
<li><i class="fa fa-glass"></i>Eventos </li>
<li><i class="fa fa-file-image-o"></i>Alertas <span class="sticky-menu-label">4 </span></li>
<li><i class="fa fa-cog"></i>Indicadores
<ul class="submenu">
<li>Teste</li>
<li>Teste </li>
<li>
Teste
<ul class="submenu">
<li>Teste </li>
</ul>
</li>
<li>Consulting </li>
</ul>
</li>
<li>
<i class="fa fa-suitcase"></i>Grafana
<ul class="submenu">
<li>Item 0 </li>
<li>Item 1 <span class="sticky-menu-label">10 </span></li>
</ul>
</li>
</ul>
</div>
submenu have dropdown animation with jquery:
jQuery(document).ready(function() {
jQuery("#sticky-menu").jqueryAccordionMenu();
});
On the menu page (sticky-menu.html) it works fine, like this:
https://i.stack.imgur.com/oAPds.png
Notice that the + sign appears when clicked:
https://i.stack.imgur.com/9OJIu.png
However, not index.html, menu (jquery) does not work:
https://i.stack.imgur.com/tvBRR.png
When I enter the code in the console:
jQuery(document).ready(function() {
jQuery("#sticky-menu").jqueryAccordionMenu();
});
it works: https://i.stack.imgur.com/YZe8y.png
I've included the js code on both pages, I think it's silly, but I really can not. Thank you for your help.
EDIT:
I noticed that my sticky-menu.html is wearing after the script. How to solve?
https://i.stack.imgur.com/j1Pzu.png
EDIT 2 :
I solved with requireJS.
You could run some code as follows
function waitForElement(id, callback){
var checkForElement = setInterval(function(){
if(document.getElementById(id)){
clearInterval(checkForElement);
callback();
}
}, 100);
}
waitForElement("idOfElementToWaitFor", function(){
alert("element is loaded.. do stuff");
});
Where your id for your element would be #sticky-menu and your callback function would be jQuery("#sticky-menu").jqueryAccordionMenu();
I have this side menu, each item with sub-items, that when clicked go to another page.
When I press the sub-item News of MAIN and I load another page, the menu collapses like in the first photo. Is there any way to keep the menu open when navigating to other pages. This below is my HTML code. I've been stuck for two days with this problem. I've tried options from similar questions here but no luck. I'm fairly new to front-end development, so any help would be appreciated.
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <i class="menu-icon fa fa-home"></i>Home </li>
<h3 class="menu-title">L&D</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-calendar"></i>MAIN
<ul id="navigation" class="sub-menu children dropdown-menu">
<li>News</li>
<li>Sport</li>
<li>Lifestyle</li>
<li>Economy</li>
<li>Politics</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-bolt"></i>ABOUT
<ul class="sub-menu children dropdown-menu">
<li>Authors</li>
<li>History</li>
<li>Trivia</li>
</ul>
</li>
</ul>
</div>
var url = location.href;
$('.sub-menu').each(function() {
var $dropdownmenu = $(this);
$(this).find('li').each(function() {
if( $(this).find('a').attr('href')== url ) {
console.log( $dropdownmenu ); // this is your dropdown menu which you want to display
console.log($($dropdownmenu).parents('li')); // this is the parent list item of the dropdown menu. Add collapse class or whatever that collapses its child list
}
});
});
This code will help
*Modified
Maybe you can save the "status" of menu on a cookie or on session, like a snapshot and read it when you are loading the page.
Using javascript find the anchor that's URL matches the current URL and then toggle it's parent's visibility.
Obviously, you will need to tweak for your specific needs.
$(document).ready(function(){
//var current_url = window.location.href;
var current_url = "news";
$(".sub-menu").find("a[href='" + current_url + "']").closest("ul").addClass("show");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main-menu" class="main-menu collapse navbar-collapse">
<ul class="nav navbar-nav">
<li> <i class="menu-icon fa fa-home"></i>Home </li>
<h3 class="menu-title">L&D</h3><!-- /.menu-title -->
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-calendar"></i>MAIN
<ul id="navigation" class="sub-menu children dropdown-menu">
<li>News</li>
<li>Sport</li>
<li>Lifestyle</li>
<li>Economy</li>
<li>Politics</li>
</ul>
</li>
<li class="menu-item-has-children dropdown">
<i class="menu-icon fa fa-bolt"></i>ABOUT
<ul class="sub-menu children dropdown-menu">
<li>Authors</li>
<li>History</li>
<li>Trivia</li>
</ul>
</li>
</ul>
</div>
When each main list item is expanded, it has a show class added. You could check what URL the user is going to, and if it's under that submenu, pass that into the list items classlist via your templating engine. It would look something like
<li class="menu-item-has-children dropdown {% if showClass %}show{% endif %}">
And resolve to
<li class="menu-item-has-children dropdown show">
Thus being expanded on the next page.
Edit: The same class needs to be added to the <ul> element below the parent <li>, i.e.
<li class="menu-item-has-children dropdown {% if showClass %}show{% endif %}">
...
<ul id="navigation" class="sub-menu children dropdown-menu {% if showClass %}show{% endif %}">
This if the same column on the elements that we click
<li class="root-level">
<a href="#" class="levelentry">
MAN
<div class="level">
Back
</div>
</a>
</li>
<li class="root-level">
<a href="#" class="levelentry">
WOMAN
<div class="level">
Back
</div>
</a>
</li>
$(document).on('click', '.levelentry', function() {
$('.level', this).addClass('active');
});
But how if like this. Because the level is not within levelentry. But still one room at a root-level
<ul class="nav">
<li class="root-level">
MAN
<div class="level">
Back
</div>
</li>
<li class="root-level">
WOMAN
<span class="dont"></span>
<div class="level">
Back
</div>
</li>
<li class="root-level"> ............ (etc)
</li>
</ul>
How to use element $(this)? Is there any way other than using $(this).next()?
If i using
$(document).on('click', '.levelentry', function() {
$('.level').addClass('active');
});
So, all level to be active
Use .closest() to target root-level element then use .find() to level element
$(document).on('click', '.levelentry', function(e) {
e.preventDefault();
$(this).closest('.root-level').find('.level').addClass('active');
});
$(document).on('click', '.levelentry', function(e) {
e.preventDefault();
$(this).closest('.root-level').find('.level').addClass('active');
});
.active{background-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li class="root-level">
MAN
<div class="level">
Back
</div>
</li>
<li class="root-level">
WOMAN
<span class="dont"></span>
<div class="level">
Back
</div>
</li>
<li class="root-level"> ............ (etc)
</li>
</ul>
You can use siblings() on $(this). DEMO
$(document).on('click', '.levelentry', function() {
$(this).siblings('.level').addClass('active');
});
If you want to select only first .level you can add :first DEMO to siblings('.level:first')
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();
}
})