I'm using an Accordion menu instead of an Off-canvas solution below the medium breakpoint, as described in the Foundation Docs here, but I'm struggling to have the menu auto-closed after a link within the menu is clicked. I searched for a solution and have seen this question around but did not find an answer that worked for me. But i came across this example, and upon examination i thought simply substituting .off-canvas with the class used by the vertical menu would do the trick, but that's not the case.
$(document).foundation();
$('.vertical a').on('click', function() {
$('.vertical').foundation('close');
});
My menu markup:
<nav class="vertical menu" id="mobile-menu" role="navigation">
<ul id="menu-main-1" class="vertical menu" data-accordion-menu="8k34n8-accordion-menu" role="tablist" aria-multiselectable="true">
<li class="menu-item" role="menuitem"><a>Link 1</a></li>
<li class="menu-item" role="menuitem"><a>Link 2</a></li>
<li class="menu-item" role="menuitem"><a>Link 3</a></li>
</ul>
</nav>
I'm new to this so please excuse if the answer is obvious. I hope for someone to point me in the right direction here so i learn something.
Related
I'm using this little jQuery-Plugin in order to enable a smooth scroll to a specific place on the page and also to mark the currently active menu item, so when you scroll down, you see where you are in the menu.
Now I do basically have the exact same code (at least I can't find the difference) as on the GitHub page, but its not working, although on the original template (which I'm using) it's working, so the plugin itself is working fine it seems, but I just can't seem to find the problem.
Basically I have my menu:
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="navbar-nav mr-auto w-100 justify-content-end clearfix">
<li class="nav-item active"><a class="nav-link" href="#sliders"> Home </a></li>
<li class="nav-item"><a class="nav-link" href="#feature"> Features </a></li>
<li class="nav-item"><a class="nav-link" href="#pricing"> Kosten </a></li>
<li class="nav-item"><a class="nav-link" href="#contact"> Kontakt </a></li>
</ul>
</div>
and then I have the different sections/divs, just like so:
<div id="sliders">
<div class="full-width">
<!-- light slider -->
<div id="light-slider" class="carousel slide"><div id="carousel-area">//some content</div></div>
</div>
</div>
Now the really weird thing is, that scrolling through the navbar works fine, so if I click on contact, for example, it scrolls to the right place.
But when I scroll myself, then wrong items are marked, it's always one behind, so if I'm on top, then "Features" is marked, if I've actually scrolled to the features, then the costs are marked, and so on...
You can see this in action here.
Please ignore any faults on not appearing icons, typos or whatever, I'm just testing or just started to develop.
On there, you can perfectly check the behavior and also check the ids of the sections/divs, which seem to perfectly fit through (otherwise, the scrolling through navbar shouldn't work).
Anybody can tell about the problem? I don't get it...
I have a script that makes active menu item with moving line, but this is one-page and I want that during scroll active menu change. I tried diffrent scripts here but it doesn't work.
Here is the HTML code:
<div class="nav-container">
<ul class="menu">
<li><a class="active" href="#home">Home</a></li>
<li>Skup</li>
<li>Sprzedaż</li>
<li>Serwis</li>
<li>Kontakt</li>
<div id="line"></div>
</ul>
JS(on fiddle because stack wants more details) :
https://jsfiddle.net/6y6qj02y/
You are looking for the Scrollspy.
This is how you can do it:
I've seen several posts similar to this, but none of the solutions worked. I have a drop-down menu on my navigation. The nav looks like this
<ul>
<li role="presentation" class="dropdown">
Insurance <span class="caret"></span>
<ul class="dropdown-menu">
<li>Insurance</li>
<li>Home</li>
<li>Boat</li>
<li>Health</li>
</ul>
</li>
<li class="navdivider"></li>
<li role="presentation">
Customer Service
</li>
<li class="navdivider"></li>
<li role="presentation">
Claims
</li>
</ul>
When I click on the drop-down menu it shows up fine. When I click out of it or click the 'Insurance' link on the navigation the option on the navigation disappears. I get
<li role="presentation" class="dropdown" style="display: none;">
<a href="insurance.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
I've seen this same error posted elsewhere and I'm aware that it is a conflict with jquery & bootstrap, but I can't seem to fix it using the suggested fixes. I am not trained in javascript, so I'm unsure if I implemented incorrectly. Thank you.
I'm using Bootstrap 3.3.4
I've following HTML code.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
<ul id="projects-menu" class="dropdown-menu">
<li>List</li>
<li>Add new project</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Now using jQuery I'm hiding the sub-menus coming under main-menu 'Projects' as follows :
$(document).ready(function() {
$("ul#projects-menu").children().hide();
});
The menu gets hide but a small white background appears beneath the menu which I don't want. For better understanding of my issue please refer below image. In this image you can see the white background appearing beneath the 'Projects' menu.
Can someone please help me in this regard?
Thanks.
Try the following:
$(document).ready(function() {
$("ul#projects-menu").hide();
});
hide the meniu not the li's
$('#projects-menu > li > a').on('click', function() {
$(this).children('#projects-menu').hide();
});
also you can like this
$(this).find("#projects-menu > li").hide();
I've been trying for hours to get this working. Looked at several examples on starkoverflow. But I can't solve it. Some suggested that this should be added:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
But I have no idea where to add it. I tried adding it to bootstrap.js but it didn't work. I'm a novice, trying to put up a first website by learning to piece together one. This is the website that I'm editing: fotroviciliji.si. The bootstrap menu that appears on smaller devices won't close after a link has been clicked. I've looked at examples, even at those here that should be working, but don't. It stil doesn't close after clicking on a link in the menu. A user posted this fiddle of it supposedly working but when I try in Chrome, it just doesn't. The menu does not collapse after something has been selected. What am I doing wrong? This fiddle works but I'm too stupid to apply it to my website.
Please help!
It may not have worked because you included it in bootstrap.js but not in bootstrap.min.js which seems to take over on small screen sizes like mobile phones. Include your code at the bottom of the bootstrap.js and bootstrap.min.js files and the navbar should collapse after clicking/pressing a link to an internal anchor (whether you perform the action on a phone (bootstrap.min.js) or reduced window size on a tablet/desktop (bootstrap.js).
+function ($) {
'use strict';
$(document).on('click', 'navbar-collapse.in', function (e) {
if ($(e.target).is('a')) {
$(this).collapse('toggle');
}
});
}(jQuery);
The above code worked for me. I retrieved lines 2-7 from another forum and I can't remember where. The premise, as far as I understand from searching the net, is that the internal links don't refresh the page (in a one page website, for example) and the navbar will only collapse when it arrives at a new page. The above javascript code was created to fix the issue.
I've honesly been trying for a couple of hours. This is what works for me now, I added:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="scroll hidden" href="#home" data-toggle="collapse" data-target=".navbar-collapse"></a></li>
<li class="dropdown">
PONUDBA<i class="fa fa-caret-down"></i>
<ul class="dropdown-menu">
<li><a class="scroll" href="#ponudba" data-toggle="collapse" data-target=".navbar-collapse">Čili omake</a></li>
<li><a class="scroll" href="#paste" data-toggle="collapse" data-target=".navbar-collapse">Čili paste</a></li>
<li><a class="scroll" href="#vlozeni" data-toggle="collapse" data-target=".navbar-collapse">Vloženi čiliji</a></li>
<li><a class="scroll" href="#ostalo" data-toggle="collapse" data-target=".navbar-collapse">Ostalo</a></li>
</ul>
</li>
<li><a class="scroll" href="#cenik" data-toggle="collapse" data-target=".navbar-collapse">CENIK</a></li>
<li><a class="scroll" href="#mesta" data-toggle="collapse" data-target=".navbar-collapse">PRODAJNA MESTA</a></li>
<li><a class="scroll" href="#kontakt" data-toggle="collapse" data-target=".navbar-collapse">KONTAKT</a></li>
<!-- <li><a class="scroll" href="#obrazec">OBRAZEC</a></li> -->
</ul>
</div><!--/.nav-collapse -->
To each menu item. The menu now colapses back on it's own after something is selected.