I have a problem with my menu in mobile mode. onClick it fadesOut. I want to keep this setting, however, I want it to do nothing, when one clicks on the dropdown part of the menu.
here is link: http://jsfiddle.net/zLLzrs6b/3/
appreciate your help!
also my html:
<nav id="nav-wrap">
<a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
<a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>
<ul id="nav" class="nav">
<li><a class="smoothscroll mobile" href="#about">about</a></li>
<li><a class="smoothscroll mobile" href="#documents">blog</a></li>
<li class="nav-item">dropdown
<ul class="langop">
<li>otion 1</li>
<li>otion 2</li>
</ul>
</li>
</ul>
</nav>
css:
.langop
{
display:none;
position: relative;
width:auto;
}
.nav-item:hover .langop {
display: block;
}
java:
var toggle_button = $("<a>", {
id: "toggle-btn",
html : "Menu",
title: "Menu",
href : "#" }
);
var nav_wrap = $('nav#nav-wrap')
var nav = $("ul#nav");
nav_wrap.find('a.mobile-btn').remove();
nav_wrap.prepend(toggle_button);
toggle_button.on("click", function(e) {
e.preventDefault();
nav.slideToggle("fast");
});
if (toggle_button.is(':visible')) nav.addClass('mobile');
$(window).resize(function(){
if (toggle_button.is(':visible')) nav.addClass('mobile');
else nav.removeClass('mobile');
});
$('ul#nav li a').on("click", function(){
if (nav.hasClass('mobile')) nav.fadeOut('fast');
});
You have several issues here, but the important ones are:
There is no "nav" variable being set. I think you are confusing the $() selector with this "nav" variable.
There is no "mobile" class on your anchor elements.
You can avoid the if clause by simply specifying the anchor class right in the selector: $(a.mobile) You can see a working version of it here: http://jsfiddle.net/zLLzrs6b/ I've added the "mobile" classes to your anchors and cleaned up the jQuery.
Related
I have three same items in the DOM. Exactly what I mean is a wobbling line <span class="caret"></span>
<ul>
<li class="nav-item-1">
ITEM 1
<span class="caret"></span>
</li>
</ul>
<ul>
<li class="nav-item-2">
ITEM 2
<span class="caret"></span>
</li>
</ul>
<ul>
<li class="nav-item-3">
ITEM 3
<span class="caret"></span>
</li>
</ul>
Scenario:
I click on the first <span class="caret"></span> gets the class "open", and the rest still has only "caret". I click on the second <span class="caret"></span> gets the class "open", and in the first the class "open" is removed. Is it possible? I wrote something like this:
$(".caret").click(function () {
$(this).data('clicked', true);
if ($('.caret').data('clicked')) {
$(".caret").toggleClass('opened');
}
});
It works, but all "caret" classes get toggleClass('opened') and I just want it to get the one you click on...
You were on the right track by using $(this) but then reverted back to using $('.caret'). Do this:
$(".caret").click(function () {
$(this).toggleClass('opened');
});
Askers request to close all other .caret classes:
$(".caret").click(function () {
$(".caret").removeClass('opened');
$(this).addClass('opened');
});
Your HTML is invalid so it is going to produce wrong HTML Markup in the browser. Not knowing how you actually want it to look, I can not offer a solution on fixing it. Once you get it fixed, The basic code should be
$('.caret').on('click', function () {
$('.caret.opened') // all the open carets
.not(this) // removed the one that was clicked
.removeClass('opened'); // remove the class
$(this)
.toggleClass('opened'); // toggle the one that was clicked
//.addClass('opened'); // if you want it always open
});
if one always has to be opened
$('.caret').on('click', function () {
$('.caret.opened') // all the open carets
.removeClass('opened'); // remove the class
$(this)
.addClass('opened'); // set clicked to open
});
I have a feeling you might have meant this
having a span in a UL is invalid HTML
$(".nav-item a").on("click",function(e) {
e.preventDefault();
$(".caret").removeClass('opened');
$(this).next(".caret").addClass('opened'); // could toggle if needed
});
.caret::after { content: "🡁" }
.opened::after { content: "🠿" }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="nav-item" id="nav-1">ITEM<span class="caret"></span></li>
</ul>
<ul>
<li class="nav-item" id="nav-2">ITEM<span class="caret"></span></li>
</ul>
<ul>
<li class="nav-item" id="nav-3">ITEM<span class="caret"></span></li>
</ul>
jQuery is not needed for this unless you're already using it in other places in your project.
const navItems = [...document.querySelectorAll("[class^=nav-item-")];
navItems.forEach(item => {
item.addEventListener("click", () => {
const opened = document.querySelector(".opened");
if (opened) {
opened.classList.remove("opened");
}
item.parentElement.querySelector(".caret").classList.add("opened");
});
});
/* demo only */
.caret.opened:after {
content: "opened";
}
<ul>
<li class="nav-item-1">
ITEM
</li>
<span class="caret"></span>
</ul>
<ul>
<li class="nav-item-2">
ITEM
</li>
<span class="caret"></span>
</ul>
<ul>
<li class="nav-item-3">
ITEM
</li>
<span class="caret"></span>
</ul>
The HTML needs correction. Something like below is syntactically more correct.
Let's add up CSS to show what caret looks like.
And then, in JavaScript, handle the toggle.
$("ul").click(function (e) {
var caret = $(this).find('.caret');
$('.caret').data('clicked', false);
$('.caret').removeClass('opened');
caret.data('clicked', true);
caret.toggleClass('opened');
});
.caret {
background-color: red;
border: 1px solid blue;
width: 10px;
height: 10px;
display: none;
}
.opened {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="nav-item-1">
ITEM
<span class="caret"></span>
</li>
</ul>
<ul>
<li class="nav-item-2">
ITEM
<span class="caret"></span>
</li>
</ul>
<ul>
<li class="nav-item-3">
ITEM
<span class="caret"></span>
</li>
</ul>
Please correct your HTML tag
missed anchor closing tag
add .nav class on each li
$(".nav").on('click', function() {
if ($(this).next('.caret').hasClass('clicked opened')) {
$('.caret').removeClass('clicked opened');
} else {
$('.caret').removeClass('clicked opened');
$(this).next('.caret').addClass('clicked opened');
}
});
https://jsfiddle.net/n56b84t9/1/
I have a side collapsible panel , on clicking the arrow icon the sub contents are hidden , and once hidden on clicking the arrow the sub contents are shown.
There is a jquery code for the slide down and slide up function , is there a way by default the sub contents are hidden and onclicking the arrow the sub content are shown or hidden accordingly?
The code is as
jQuery(function($) {
$('.active span.clickable').on("click", function(e) {
if ($(this).hasClass('panel-collapsed')) {
// expand the panel
$(this).parents('.active').find('.collapsein').slideDown();
$(this).removeClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
} else {
// collapse the panel
$(this).parents('.active').find('.collapsein').slideUp();
$(this).addClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active">
Main Data<span class="pull-right clickable "><i class="glyphicon glyphicon-chevron-down"></i></span>
<ul class="collapsein ">
<li><label>Sub Data1</label></li>
<li><label>Sub Data2</label></li>
<li><label>Sub Data3</label></li>
</ul>
</li>
You need to add css if you want sub-menu by default hidden. Please follow the below code, it will done your job::
HTML
<li class="active">
Main Data<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span>
<ul class="collapsein ">
<li><label>Sub Data1</label></li>
<li><label>Sub Data2</label></li>
<li><label>Sub Data3</label></li>
</ul>
</li>
CSS
.collapsein{
display: none;
}
JQUERY
jQuery(function ($) {
$('.active a.clickable').on("click", function (e) {
if ($(this).hasClass('panel-collapsed')) {
// expand the panel
$(this).parents('.active').find('.collapsein').slideDown();
$(this).removeClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
else {
// collapse the panel
$(this).parents('.active').find('.collapsein').slideUp();
$(this).addClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
});
Working JSFiddle:: https://jsfiddle.net/80fpe9d9/
If you want your list to appear hidden by default it is only a simple adjustment. You would first set the css for it to display: none.
CSS
.collapsein {
display: none;
}
And also add the class panel-collapsed to your clickable span
HTML
Main Data<span class="pull-right clickable panel-collapsed"><i class="glyphicon glyphicon-chevron-down"></i></span>
Working JSBin
Moved down arrow left for clarity.
Thanks for the answers!!!!
Had to add the css code for it to work properly
.collapsein{
display: none;
}
Use this Script code with Jquery
<script>
$(function(){
$("#accordian h3").click(function(){
$("#accordian ul ul").slideUp();
if ($(this).next().is(":hidden")){
$(this).next().slideDown();
}
});
});
</script>
call the accordian id in html like below:
<div id="accordian">
<ul>
<li>
<h3><span class="icon-dashboard"></span>Dashboard</h3>
<ul>
<li>Sub menu1 </li>
<li>Sub menu2 </li>
<li>Sub menu3 </li>
<li>Sub menu4 </li>
</ul>
</li>
</div>
Here is the Reference and Demo
<nav>
<ul>
<li><a id ="current" href="Default.aspx">A</a></li>
<li>B</li>
<li> C</li>
<li> D</li>
<li> E</li>
<li> F</li>
</ul>
</nav>
I have menu tab like this a link I want to change the id="current" to the tab im in. for example if user clicks and he is on page C the id=current must be in C.
Thanks all
Very crazy idea to change ID.
If it is not really needed (probably 100% of cases), I suggest to use another property to select current element. For example class, or even custom data- in html5.
Take a look here: http://www.w3schools.com/tags/att_global_data.asp
You're better off using a class for this, but this should do what you want:
<script>
$( "a" ).click(function() {
$('#current').attr('id',''); // clear old current
$( this ).attr('id', 'current'); // set new current
});
</script>
I can see you are using asp, so you can just use some logic to check the current url and assign id or class to the link.
Another way would be to use jquery to do this dynamically. Although asp is the best way to do it in your case.
//HTML
<nav>
<ul>
<li><a id ="A" href="Default.aspx">A</a></li>
<li><a id ="B" href="suppliers.aspx">B</a></li>
<li><a id ="C" href="ServiceLocation.aspx"> C</a></li>
<li><a id ="D" href="Default3.aspx"> D</a></li>
<li><a id ="E" href="jobs.html"> E</a></li>
<li><a id ="F" href="contactus.aspx"> F</a></li>
</ul>
</nav>
//jquery
$('nav ul li a').removeClass('current');
if (window.location.href.indexOf("Default.aspx") > -1) {
$('nav ul a#A').addClass('current');
}elseif (window.location.href.indexOf("suppliers.aspx") > -1) {
$('nav ul a#B').addClass('current');
}
//Css
Just copy the same styling form #current to .current
As others have said you should probably use a class rather than an id, unless you have a very good reason for it.
Here is the code for changing the id
$( "li > a" ).click(function() {
$('#current').removeAttr( 'id','current');
$( this ).attr('id', 'current');
});
or the class instead..
$( "li > a" ).click(function() {
$('.current').removeAttr( 'class','current');
$( this ).attr('class', 'current');
});
And here is your modified jsfiddle http://jsfiddle.net/39rc2Le5/2/
Update
If you use the class instead you will have something like this...
<nav>
<ul>
<li><a class="current" href="#">A</a>
</li>
<li><a class="" href="#3">B</a>
</li>
<li><a class="" href="#"> C</a>
</li>
<li><a class="" href="#"> D</a>
</li>
<li><a class="" href="#"> E</a>
</li>
<li><a class="" href="#"> F</a>
</li>
</ul>
</nav>
Then your tabs which are currently styled by a#current properties would be styled by a.current properties. So change your css selector like this.
nav ul li a.current {
background-color: #F9F9F9;
border-style: solid;
border-color: #ee1d78;
border-top: 15px;
border-left: none;
border-right: none;
}
I have an MVC app, where in the _Layout.cshtml file I have something like this:
<div class="collapse navbar-collapse">
<ul class="nav pull-right navbar-nav">
<li id="home" class="active"><a id="homeLink" href='#Url.Action("Index", "Home")'>Home</a></li>
<li id="about"><a id="aboutLink" href='#Url.Action("About", "Home")'>About Us</a></li>
<li><a href='#Url.Action("Services", "Home")'>Services</a></li>
<li><a href=''>Blog</a></li>
<li><a href='#Url.Action("Contact", "Home")'>Contact</a></li>
</ul>
</div>
So the point is that when the website starts, the first link is set to active, then after each link click I want to set that one's class to active. I guess I need to write some jQuery code, but I cannot seem to figure out the answer.
UPDATE:
<ul class="nav pull-right navbar-nav">
<li id="Home" class="active"><a href='#Url.Action("Index", "Home")'>Home</a></li>
<li id="About"><a href='#Url.Action("About", "Home")'>About Us</a></li>
<li id="Services"><a href='#Url.Action("Services", "Home")'>Services</a></li>
<li id="Blog"><a href=''>Blog</a></li>
<li id="Contact"><a href='#Url.Action("Contact", "Home")'>Contact</a></li>
</ul>
main.js
$(function () {
$('a').click(function () {
$(this).closest('ul').find('li').removeClass('active');
$('#' + '#ViewBag.Title').addClass('active');
});
});
Example views:
#{
ViewBag.Title = "Services";
}
#{
ViewBag.Title = "Contact";
}
The following script will add the active class
$('a').click(function(e) {
// uncomment the following line to prove it
// e.preventDefault();
$(this).closest('ul').find('li').removeClass('active');
$(this).closest('li').addClass('active');
})
however, since your clicking on a link you don't even see it because you immediately redirect to another page using the same layout where the active class applied to the first li element (the new view has no knowledge of what you did on this page).
Since you seem to be wanting to highlight the li element relating to the current page, one option would be to give your li elements an id attribute matching the ViewBag.Title property and use that to apply the class.
<div class="collapse navbar-collapse">
<ul class="nav pull-right navbar-nav">
<li id="home">#Html.ActionLink("Home", "Index", "Home")</li>
<li id="about">#Html.ActionLink("About Us", "About", "Home")</li>
<li id="services">#Html.ActionLink("Services", "Services", "Home")</li>
....
</ul>
</div>
and the script
$('#' + '#ViewBag.Title').addClass('active');
Then in the Index.cshtml view,
#{
ViewBag.Title = "Home"; // or "About" for About.cshtml, "Services" for Services.cshtl etc.
Layout = "~/Views/Shared_Layout.cshtml";
}
Assuming you aren't doing anything to alter the way the links fire (loading content with ajax), you can compare the href of the links to the current url to figure out which one should be active.
$('.navbar-nav ul').children().each(function() {
var link = $(this).find('a'); // or var link = $(this).children('a');
if (link.attr('href') == location.href) {
$(link).addClass('active');
return false;
}
});
All you'll need is to make sure the link href is formatted the same way it will appear in the url (relative vs absolute).
I've found an issue I just can't seem to solve.
I've got a navigation, 5 links in total. One of the links has a dropdown menu when you hover over it showing 3 more links.
Fine when a mouse is involved. But when you start using touch devices, the parent link consumes all gestures and taps, and the viewer is shown the dropdown for a fraction of a second before being taken to the parent's link page.
I'm wondering if there's a way of making it so the first touch of the parent link shows the dropdown menu, then a second touch would go to that link. touching anything else would just hide the dropdown.
<ul id="main-menu">
<li>Link</li>
<li>Link</li>
<li>Link
<ul class="sub-menu">
<li>Sub Link</li>
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
</ul>
Anyone have any ideas? jQuery would be ideal
Something like this perhaps? You may want to customize the behavior of the dropdown, but this shows the basic logic of handling the click events and preventing default behaviour (i.e. following links) if the menu isn't open:
$(function() {
$('#main-menu a').click(function(e) {
var listItem = $(this).closest('li');
if (!listItem.is('.open')) {
// Opening drop-down logic here. e.g. adding 'open' class to <li>
e.preventDefault();
listItem.addClass('open');
}
// Otherwise the default behaviour of the event (clicking the link) will be unaffected
});
});
i have done complete bins for above issue also placed demo link here.
Demo: http://codebins.com/bin/4ldqp72
HTML
<ul id="main-menu">
<li>
<a href="#">
Link
</a>
</li>
<li>
<a href="#">
Link
</a>
</li>
<li>
<a href="#">
Link
</a>
<ul class="sub-menu">
<li>
<a href="#">
Sub Link
</a>
</li>
<li>
<a href="#">
Sub Link
</a>
</li>
<li>
<a href="#">
Sub Link
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Link
</a>
</li>
<li>
<a href="#">
Link
</a>
</li>
</ul>
JQuery
$(function() {
$('ul a').click(function(e) {
$('#main-menu li').removeClass('open');
e.preventDefault();
$(this).closest('li').addClass("open");
var pos = $(this).closest('li.open').offset();
$(this).closest('li.open').find("ul.sub-menu").css('top', pos.top + 'px');
});
});
CSS
#main-menu{
list-style:none;
margin:2px;
padding:2px;
}
li{
border:1px solid #333;
background:#ebcdff;
text-align:center;
width:100px;
}
li:hover{
background:#abcdfd;
}
li:hover a{
color:#ff3322;
}
li a{
text-decoration:none;
color:#2466ff;
}
li.open {
background:#abcdfd;
}
li.open a{
text-decoration:none;
color:#ff3322;
}
ul.sub-menu{
list-style:none;
display:none;
}
li.open > ul{
position:absolute;
left:70px;
display:block;
}
Demo: http://codebins.com/bin/4ldqp72