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:
Related
I want to be able to have a centralized menu like CSS files where you change it at the source and all the files change but for lists. I'm trying to add a new link to the menu without having to go to each file on the website to add to the copy and pasted list that we have.
<nav id="menu">
<div class="inner">
<h2>Menu</h2>
<ul class="links">
<li>Home</li>
<li>Sponsors</li>
<ul class="links">
<li>Sponsor Application</li>
</ul>
<li>Media</li>
<ul class="links">
<li>2019 Season</li>
<li>2018 Season</li>
<li>2017 Season</li>
<li>View More Seasons</li>
</ul>
</div>
</nav>
being able to add a html to the list and it changes for every part you go to.
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.
I am using js mmenu on the shopify site. I run into issue which I cant figure out.
When there is a dropdown menu, parent link becomes not clickable and has #mm-0 at the end of it. I need to keep it as is and link to its own page.
You can see code below. Right now Links "Products" and "About" go to https://www.irestorelaser.com/products/irestore-laser-hair-growth-system#mm-0 . Any help would be great!
<div id="nav" >
<ul>
<li >How it works</li>
<li class="Selected">Products
<ul>
<li class="Selected">Laser Helmet</li>
<li >All Products</li>
</ul>
</li>
<li >About
<ul>
<li >Warranty</li>
</ul>
</li>
</ul>
</div>
Can someone please point me to where I can go to find info on how to create a mobile menu (drop list) for the code bellow? All the tutorials that I have found has been on switching pages, nothing for filters such as bellow. I am using the isotop plugin to navigate through my site.
<!-- SMOOTH MENU DIV -->
<div id="nav-button"> </div>
<nav id="smooth-menu" role="navigation" class="main-nav-links responsive-nav">
<ul id="filters" data-option-key="filter">
<li>Home</li>
<li>About Danielle</li>
<li id="one">My Work
<ul class="second-level">
<li>Kids and Family</li>
<li>Babies</li>
<li class="last">Seniors</li>
</ul>
</li>
<li id="two">Info
<ul class="second-level">
<li>Session Fees</li>
<li>Finished Art</li>
<li class="last">About Your Session</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<!-- end nav -->
I ended up using an alternative solution. I went with a different menu.
I've done a search both on here and via Google, I've tried all the codes that they have given me, and no success on any of them. I've got no idea at all why they don't work.
Basically when you scroll the page and reach the anchor link "about" I want "about" to be highlighted until you get to "events", etc.
<div id="menu-wrapper">
<div id="menu">
<ul>
<li class="logo"><img src="/images/ccky_logo.png" height="60"/></li>
<li>Home</li>
<li>About</li>
<li>Events</li>
<li>Team</li>
<li>Location</li>
<li>Contact</li>
</ul>
</div>
<!-- end #menu -->
</div>
Thanks!
You can use bootstrap's Scrollspy to achieve this effect: http://twitter.github.io/bootstrap/javascript.html#scrollspy
After you implemented the JavaScript plugin simply call it with $('#menu').scrollspy().
In your HTML, just add the data parameters bootstrap instructs you to use.