I have a mobile menu that has some anchored links that scroll to a certain section of the page when clicked. The problem with this is when I click one of these links, due to the fact that a new page is not loading, the menu remains open.
I wish to implement a solution whereby if one of these links are clicked, the menu closes by default. I have tried to hide the menu on click using JS but I think my logic may be wrong. Any help would be great.
Here is the code for my menu.
<div id="my-id" class="uk-offcanvas custom_canvas">
<div class="uk-offcanvas-bar">
<div class="uk-panel">
<a class="btn btn primary remove_image-div" onclick="UIkit.offcanvas.hide([force = false]);">
<img src="img/remove_icon.png" class="remove_image" alt="remove">
</a>
<ul class="mm-list mm-panel mm-opened mm-subopened" id="mm-0">
<li class="offcanvas_li">
<a class="offcanvas_open" title="Samples" href="index.html#sample-section">Samples</a>
</li>
<li class="offcanvas_li">
Packages
</li>
<li class="offcanvas_li">
About
</li>
<li class="offcanvas_li">
Contact
</li>
<li class="offcanvas_li">
Blog
</li>
<li class="offcanvas_li">
<a class="offcanvas_open" title="We Love" href="we_love.html">We Love</a>
</li>
</ul>
</div>
</div>
</div>
I'm not familiar with UIkit.offcanvas plugin but with a little sense I can answer you that you can add them (the links) all the attribute onclick="UIkit.offcanvas.hide([force = false]);"
A better (generic) solution is to "listen" to their click event, then, run offcanvas command.
Something like:
$('.offcanvas_li a').click(function() {
UIkit.offcanvas.hide([force = false]);
});
This works
<script>
function myFunction() {
UIkit.offcanvas.hide([force = false])
}</script>
<button onclick="myFunction()">Close Panel</button>
Related
I have 3 lists of a clickable links, so when you click one you go to that section and the line too.
so this is my code :
<div className="description-container">
<div className="nav-tab">
<ul className="description-tab">
<li>
<a href="/" className="active">
Class Description
</a>
</li>
<li>
Testimony
</li>
<li>
FAQ
</li>
</ul>
</div>
</div>
How it looks like is
How I want is when I clicked Testimony, the line goes there and our page got scrolled into Testimony Section.
How to improve this code so I can get that feature with React?
I have a navigation menu which is almost perfect.
On Mobile:
When I open the hamburger menu, it will take up 3/4 of the screen size. I am okay with that. When I click on one of the links in the navbar I am taken to the correct section but the Menu remains open.
I prefer having the menu close as soon I click on one of the links rather than me having to press the Hamburger to close the menu.
HTML:
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Education
</li>
<li>
Experience
</li>
<li>
Testimonials
</li>
<li>
Skills
</li>
<li>
Contact
</li>
</ul>
</div>
you can add click listener on all of <a>'s and then close the bar in listener function
best way to do this is to give same class to all of them and add listener to them with for loop
or you can use jquery so you wont need for loop
$('.nav a').on('click', function(){
$('.navbar-toggle').click();
});
Use this code, it will call click event for navbar-toggle class when you will click on navigation bar items. Which will close the navigation bar as you wanted.
If you go to this dev site (it's a Joomla site using bootstrap) and view on 1023px wide screen or smaller (or any smartphone), there is a hamburger menu. If you click it, it drops down a menu and if you click "Learn More", it jumps to a form (because it's really just an anchor). However, the dropdown menu stays open (because it's not going to a new page I guess).
Is there an easy way to add some code that basically says "any dropdown menu click should CLOSE the dropdown menu"?
Here is the code for the menu when it's expanded (first nav tag is probably all that's important)...
<nav class="t3-navbar-collapse navbar-collapse collapse in"><ul class="nav navbar-nav level0">
<li>
Home
</li>
<li class="dropdown">
Features <b class="caret"></b>
<ul class="level1 dropdown-menu"><li>
Scheduling & Routing
</li><li>
Billing & Invoicing
</li><li>
Mobile Workforce
</li><li>
Office Staff Persona
</li><li>
Owner Persona
</li><li>
Field Worker Persona
</li></ul></li>
<li class="dropdown">
Industries <b class="caret"></b>
<ul class="level1 dropdown-menu"><li>
Cleaning
</li><li>
Lawn
</li><li>
Pest
</li><li>
HVAC
</li></ul></li>
<li>
Pricing
</li>
<li class="active dropdown">
About <b class="caret"></b>
<ul class="level1 dropdown-menu"><li class="current active">
Resources
</li><li>
Support
</li><li>
Security
</li></ul></li>
<li class="">
Learn More
</li>
<li>
Contact
</li>
<li>
Log In
</li>
</ul></nav>
And then when it collapses again, the classes in the nav tag look like this...
<nav class="t3-navbar-collapse navbar-collapse collapse" style="height: 1px;">
So it looks like that class of "in" needs to go away. Therefore, I am trying this jquery, but it isn't working. Shouldn't this work?
jQuery(function($) {
$("li a").click(function() {
$("nav.t3-navbar-collapse").removeClass( "in" );
});
});
Sorry for the bad luck on the first question, I actually just did this recently so I have a snippet on hand for you.
Basically what you want to tell the code to do is close the nav when you click an anchor, so you target the a and use a slideUp property.
$(document).ready(function(){
$("a").click(function(){
$("Your_Nav_ID").slideUp('slow');
});
});
I got a menu that opens correctly and close correctly when you touch the menu on a iPad. thats fine, but i also want to close the menu, when you touch outside the menu. it works when you touch a picture and a link, but it doesnt work when you touch anywhere else.
here its my code:
HTML :
<nav onclick="" class="acconicon">
<nav class="accon">
<figure class="acmlogo"></figure>
<h5 class="acconh5">Hovedmenu</h5>
<ul class="sbm3">
<li class="acfront">Forside </li>
<li class="acnews">Nyheder </li>
<li class="acartists">Artister</li>
<li class="acreleases">Udgivelser</li>
<li class="aclive">Live</li>
<li class="acvideo">Videoer </li>
<li class="accomp">Konkurrencer</li>
<li class="acremix">Remix</li>
</ul>
</nav>
</nav>
Script:
$('html').click(function() {
$('.accon').hide();
});
$('.acconicon').click(function(event){
event.stopPropagation();
});
$('.acconicon').click(function(event){
$('.accon').toggle();
});
I think you just need to use not selector of JQuery. I created a simple code that you should try.
$('*:not(.acconh5,sbm3,sbm3 > a)').click(function() {
$('.accon').hide();
});
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help