How to add the highlighter bar that highlights under the link? - javascript

I want to add a highlight above a link in the status bar (here named progress bar), The highlight should stay above the active link then move above the link that is the mouse is hovering. The fiddle site does this (so do many others, fiddle is just on the top of mind)and the image show an example of what i want to do. Fiddle adds below I would like mine above.
The small blue line under "collaboration":
$(function() {
$("li").on("mouseover mouseleave",
function () {
$("#progressbar").toggleClass("highlight");
});
setInterval("rotateimages()", 1000);
});
function rotateimages() {
var curPhoto = $("#photoShow div.current");
var nextPhoto = curPhoto.next();
if (nextPhoto.length == 0) {
return;
}
curPhoto.removeClass("current").addClass('previous');
nextPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000, function() {
curPhoto.removeClass('previous');
});
}
#logo { float: left; }
#nav {
list-style-type:none;
float:right;
}
li {
display: inline-block;
border-right: thin;
}
#progressbar{
float: right;
background-color: #D2D5D5;
height: 5px;
width: 100%;
}
.highlight {
background-color: #79CDFE;
}
.topnav {
background-color: #FEFEFE;
overflow: hidden;
}
.topnav a {
width:100%;
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#nav a:hover {
background-color: white;
color: #79CDFE;
background-origin: : #79CDFE;
border-top: #79CDFE;
}
.topnav a.active {
background-color: white;
color: #79CDFE;
}
.status-menu {
width: 98px;
height: 5px;
background: #4EFFFF;
position: absolute;
}
body {
padding: 0px;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="topnav">
<div id="progressbar">
<div id="care"></div>
<div id="hospital"></div>
<div id="service"></div>
<div id="about"></div>
<div id="news"></div>
</div>
<img src="src/images/logo.png" id="logo" class="gallery"/>
<ul id="nav">
<li> <a class="active" href="#home">Home</a></li>
<li><a class="" href="#care">Link 1</a></li>
<li><a class="" href="#hospital">Link 2</a></li>
<li><a class="" href="#service">Link 3</a></li>
<li><a class="" href="#about">Link 4</a></li>
<li><a class="" href="#news">Link 5</a></li>
</ul>
</div>
</header>


If you want a highlight bar above the link, I think it would be best to use a ::before pseudo element on the link which you can position anywhere you want. It's currently at the top of the progress bar but it can go higher or lower if needed.
$(function() {
$("li").on("mouseover mouseleave",
function () {
$("#progressbar").toggleClass("highlight");
});
setInterval("rotateimages()", 1000);
});
function rotateimages() {
var curPhoto = $("#photoShow div.current");
var nextPhoto = curPhoto.next();
if (nextPhoto.length == 0) {
return;
}
curPhoto.removeClass("current").addClass('previous');
nextPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000, function() {
curPhoto.removeClass('previous');
});
}
#logo { float: left; }
#nav {
list-style-type:none;
float:right;
}
li {
display: inline-block;
border-right: thin;
}
#progressbar{
float: right;
background-color: #D2D5D5;
height: 5px;
width: 100%;
}
.highlight {
background-color: #79CDFE;
}
.topnav {
background-color: #FEFEFE;
overflow: hidden;
}
.topnav a {
width:100%;
float: left;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
position: relative;
}
.topnav a::before {
background-color: transparent;
content: '';
display: block;
height: 1px;
position: absolute;
top: -21px;
width: 100%;
}
#nav a:hover {
background-color: white;
color: #79CDFE;
background-origin: #79CDFE;
}
#nav a:hover::before {
background-color: #79CDFE;
}
.topnav a.active {
background-color: white;
color: #79CDFE;
}
.topnav a.active::before {
background-color: #79CDFE;
}
.status-menu {
width: 98px;
height: 5px;
background: #4EFFFF;
position: absolute;
}
body {
padding: 0px;
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="topnav">
<div id="progressbar">
<div id="care"></div>
<div id="hospital"></div>
<div id="service"></div>
<div id="about"></div>
<div id="news"></div>
</div>
<img src="src/images/logo.png" id="logo" class="gallery"/>
<ul id="nav">
<li> <a class="active" href="#home">Home</a></li>
<li><a class="" href="#care">Link 1</a></li>
<li><a class="" href="#hospital">Link 2</a></li>
<li><a class="" href="#service">Link 3</a></li>
<li><a class="" href="#about">Link 4</a></li>
<li><a class="" href="#news">Link 5</a></li>
</ul>
</div>
</header>

Related

Scrolling div/section with indicators

I want to create a vertical scrolling div with an active indicators. However I'm having trouble with it event firing on the div targeted. I set it to window.addEventListener it works fine at full height of the window but if I set it to div.addEventListener it's not firing inside of the element at all. I'm Hoping someone has some pointer for this. Here's what I got so far.
section.scroller {
max-width: 900px;
margin: auto;
background: antiquewhite;
scroll-behavior: smooth;
position: relative;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 17px;
// padding: 0 17px;
box-sizing: content-box;
}
.sec {
min-height: 100vh;
// width: 100vw;
display: flex;
align-items: center;
justify-content: center;
scroll-behavior: smooth;
// width: 100%;
&:nth-child(odd) {
background: #ddd;
}
}
.lnbNavbar {
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
border-radius: 15px;
transition: opacity .4s ease .2s;
opacity: 0;
position: relative;
float: right;
transition: .3s all;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
width: 0px;
position: relative;
text-align: right;
.dot {
border: 2px solid#333;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
transition: .2s ease;
span {
display: inline-block;
}
}
}
}
}
.lnbNavbar ul li a:active,
.lnbNavbar ul li a:hover {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.lnbNavbar ul li.active a,
.lnbNavbar ul li:hover a {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.outter {
width: 800px;
height: 500px;
margin: auto;
overflow: hidden;
}
<div class="outter" id="outter">
<section class="scroller" id="scroller">
<nav class="lnbNavbar">
<ul>
<li class="home active">
<a href="#home" class=" home dot">
<span></span>
</a>
</li>
<li class="about">
<a href="#about" class="about dot">
<span></span>
</a>
</li>
<li class="service">
<a href="#service" class="service dot">
<span></span>
</a>
</li>
<li class="project">
<a href="#project" class="project dot">
<span></span>
</a>
</li>
<li class="contact">
<a href="#contact" class="contact dot">
<span></span>
</a>
</li>
</ul>
</nav>
<section class="sec" id="about"><h4>about</h4></section>
<section class="sec" id="service"><h4>service</h4></section>
<section class="sec" id="project"><h4>project</h4></section>
<section class="sec" id="contact"><h4>contact</h4></section>
<section class="sec" id="home"><h4>home</h4></section>
</section>
<script>
const sections = document.querySelectorAll('section');
const navLi = document.querySelectorAll('.lnbNavbar ul li');
const div = document.getElementById("outter")[0];
div.addEventListener('scroll', ()=> {
let current = '';
sections.forEach( section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if(pageYOffset >= (sectionTop - sectionHeight / 4)){
current = section.getAttribute('id');
}
})
console.log(current);
navLi.forEach( li => {
li.classList.remove('active');
if(li.classList.contains(current)){
li.classList.add('active')
}
})
})
</script>
</div>

Submenu levels do not work properly Vanilla JS

I am making a menu with pure Vanilla JS, because I want it to implement it in an Angular 8 project.
It is working good at some point, because it opens the hidden menu very good. The thing is that when I want to open a second level hidden menu , then it closes everything. For example if you click in 'Soluciones' link, then it opens the submenu very good. After that you must be able to click 'Correo y herramientas' in order to show a second level hidden menu, which is: Correo 1, Correo 2, Correo 3 links; but before showing this last links, it closes everything.
I have a codepen link to show this: https://codepen.io/Bungo808/pen/ZEBpmXG
Any advice would be helpfull!!
My HTML
<div class="red">
<nav id="nav" class="sub-menu open">
<ul class="list-unstyled">
<li id="subb">
<a class="link">Quiénes somos</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li>
<a class="link">Sobre eSource</a>
</li>
<li>
<a class="link">Amarello</a>
</li>
</ul>
</li>
<li id="subb">
<a class="link">Soluciones</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li id="subb">
<a class="link">Correo y herramientas</a>
<ul>
<li><a class="link">Correo 1</a></li>
<li><a class="link">Correo 2</a></li>
<li><a class="link">Correo 3</a></li>
</ul>
</li>
<li id="subb">
<a class="link">Infrastructure as a Service</a>
<ul>
<li><a class="link">Infra 1</a></li>
<li><a class="link">Infra 2</a></li>
<li><a class="link">Infra 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="overlay"></div>
</div>
My JS
let list_items = document.querySelectorAll('#subb');
// Show Submenu
for (let i = 0; i < list_items.length; i++) {
list_items[i].addEventListener("click", show);
}
function show() {
this.classList.toggle("myClass");
console.log('I clicked it!')
}
A part of my CSS, which is the responsible to open the hidden menu
.sub-menu {
padding: 0 0 0 2%;
left: 0px;
top: 0;
transition: all 0.3s ease;
height: 100%;
width: 280px;
position: fixed;
margin: 0;
background-color: #f9f9f9;
border-radius: 0;
z-index: 10;
overflow: hidden;
}
.sub-menu > ul {
width: 100%;
height: 100%;
margin-top: 60px;
}
.sub-menu li {
position: relative;
display: block;
list-style: none;
padding: 2px 0 2px 14px;
margin-left: 0;
cursor: pointer;
color: white;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:first-child{
// border: 1px solid red;
}
}
.sub-menu li a {
color: #40465f;
font-size: 16px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul{
display: none;
background: white;
}
#subb.myClass > ul{
display: block;
}
.sub-menu ul ul ul{
display: none;
border: 1px solid red;
}

The click event is propagating over and over again. So eventually the class gets toggled off. To prevent this add .stopPropagation(); to your show() function like this:
function show(e) {
e.stopPropagation();
this.classList.toggle("myClass");
console.log('I clicked it!')
}

How to remove focus on a on focus menu on click

I have a hamburger menu, when I click the button it activates the on target class on shows the menu. While the menu to open I am not sure how to make it if I click on the menu icon again it collapses the menu. Here is the code I got so far.
// my attempt in js to blur navTarget:focus
$("nav a").click(function() {
$("nav a").removeClass("navselected");
$(this).addClass("navselected");
});
$("#menu").click(function() {
$("#navTarget:focus").blur();
});
nav {
flex: 0 0 100%;
border-right: 1px solid #386BA8;
background-color: #386BA8;
}
nav header {
padding: 0rem 1rem;
}
nav a {
display: block;
color: #000;
text-decoration: none;
padding: 1rem;
border-top: 1px solid #386BA8;
}
nav a:first-child {
padding: 0;
border-top: none;
}
.navigation {
background-color: #6699CC;
top: 0rem;
display: none;
}
.hide {
display: none;
}
.bufferspace {
padding: 0;
}
#menu {
background-color: #6699CC;
display: block;
position: fixed;
cursor: pointer;
top: 0;
z-index: 10;
}
#menu i {
font-size: 2rem;
padding: 1rem;
}
#navTarget {
padding-top: 2.8rem;
}
#navTarget:target {
display: block;
}
nav a:first-child:hover {
animation: none;
}
nav a:first-child:hover {
animation: none;
}
.navselected:first-child {
background-color: none;
border-left: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
<a id="menu" href="#navTarget">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title">
<a href="#navbar">
<h1>HTML<br class="hide" /> Documentation</h1>
</a>
</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>
Here is the link to my Codepen

Remove the href from the menu button and :target style from CSS, instead add this style on class change.
$("#menu").on("click", function() {
$("#navTarget").toggleClass("openMenu");
});
$("#menu").on("click", function() {
$("#navTarget").toggleClass("openMenu");
});
$(".nav-link").on("click", function() {
$("#navTarget").removeClass("openMenu");
});
nav {
flex: 0 0 100%;
border-right: 1px solid #386BA8;
background-color: #386BA8;
}
nav header {
padding: 0rem 1rem;
}
nav a {
display: block;
color: #000;
text-decoration: none;
padding: 1rem;
border-top: 1px solid #386BA8;
}
nav a:first-child {
padding: 0;
border-top: none;
}
.navigation {
background-color: #6699CC;
top: 0rem;
display: none;
}
.hide {
display: none;
}
.bufferspace {
padding: 0;
}
#menu {
background-color: #6699CC;
display: block;
position: fixed;
cursor: pointer;
top: 0;
z-index: 10;
}
#menu i {
font-size: 2rem;
padding: 1rem;
}
#navTarget {
padding-top: 2.8rem;
}
#navTarget.openMenu {
display: block;
}
nav a:first-child:hover {
animation: none;
}
nav a:first-child:hover {
animation: none;
}
.navselected:first-child {
background-color: none;
border-left: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
<nav id="navbar">
<a id="menu">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title">
<a href="#navbar">
<h1>HTML<br class="hide" /> Documentation</h1>
</a>
</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>

I believe below solution fixes your problem. I use $("#navTarget").toggleClass("visible"); to toggle CSS class which makes navTarget visible.
$("nav a").click(function() {
$("#navTarget").toggleClass("visible");
});
$("#menu").click(function() {
$("#navTarget:focus").blur();
});
nav {
flex: 0 0 100%;
border-right: 1px solid #386BA8;
background-color: #386BA8;
}
nav header {
padding: 0rem 1rem;
}
nav a {
display: block;
color: #000;
text-decoration: none;
padding: 1rem;
border-top: 1px solid #386BA8;
}
nav a:first-child {
padding: 0;
border-top: none;
}
.navigation {
background-color: #6699CC;
top: 0rem;
display: none;
}
.hide {
display: none;
}
.bufferspace {
padding: 0;
}
#menu {
background-color: #6699CC;
display: block;
position: fixed;
cursor: pointer;
top: 0;
z-index: 10;
}
#menu i {
font-size: 2rem;
padding: 1rem;
}
#navTarget {
padding-top: 2.8rem;
}
.visible {
display: block;
}
nav a:first-child:hover {
animation: none;
}
nav a:first-child:hover {
animation: none;
}
.navselected:first-child {
background-color: none;
border-left: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
<nav id="navbar">
<a id="menu" href="#navTarget">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title">
<a href="#navbar">
<h1>HTML<br class="hide" /> Documentation</h1>
</a>
</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>

Hey try the following code and check the output it will fullfill your requirement. I used toggle() jquery function which toggles the navigation to display:block and display:none;
$("nav a").click(function() {
$("nav a").removeClass("navselected");
$(this).addClass("navselected");
});
$("#menu").click(function() {
// $("#navTarget:focus").blur();
$(".navigation").toggle();
});
nav{
flex:0 0 100%;
border-right:1px solid #386BA8;
background-color:#386BA8;
}
nav header{
padding:0rem 1rem;
}
nav a{
display: block;
color:#000;
text-decoration:none;
padding:1rem;
border-top:1px solid #386BA8;
}
nav a:first-child{
padding:0;
border-top:none;
}
.navigation{
background-color:#6699CC;
top:0rem;
display: none;
}
.hide{display: none;}
.bufferspace{padding: 0;}
#menu{
background-color:#6699CC;
display: block;
position:fixed;
cursor:pointer;
top:0;
z-index: 10;
}
#menu i{
font-size:2rem;
padding:1rem;
}
#navTarget{
padding-top:2.8rem;
}
nav a:first-child:hover {
animation:none;
}
nav a:first-child:hover {
animation:none;
}
.navselected:first-child{
background-color:none;
border-left:none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
<nav id="navbar">
<a id="menu" href="#navTarget">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title"><h1>HTML<br class="hide"/> Documentation</h1></header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>

Mobile Menu Help, Add parent link to dropdown, disable parent link

I've searched for a while for a way to do what I'm trying to accomplish but came up with nothing that could help me or explain it well enough for me to understand. I have this jsfiddle that I'm working on. I'm having some issues getting this to work the way I'm wanting it to. I would like to clone the parent link into the dropdown area and make sure the parent link is disabled (only on mobile) and only displays the dropdown when clicked. I know this can probably be accomplished by using JS since I cannot edit the HTML that is being outputted by the CMS I am working in. I'm sorry, I'm not very keen in JS, still learning. Please tell me if you need any more information. Thank you so much!
HTML
<div class="main-nav">
<ul id="megaMenu" class="menuContainer nav">
<li class="menuItem"><a class="menuLink" href="resources"><span class="menuText">Resources</span></a>
<div class="content">
<div class="subnav" id="drop-resources">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Resource Library
</li>
<li>Legal Resources
</li>
<li>Ask the Experts
</li>
<li>Community
</li>
<li>Find Storage
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Buyer's Guide
</li>
<li>Upcoming Auctions
</li>
<li>Forms Software
</li>
<li>Self Storage News Magazine
</li>
<a href="/resources/community/open-for-business-blog">
<li>Blog</li>
</a>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem activeItem"><a class="menuLink" href="education"><span class="menuText">Education</span></a>
<div class="content">
<div class="subnav" id="drop-education">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Annual Conference
</li>
<li>Executive Retreat
</li>
<li>Luncheons
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Webinars
</li>
<li>Podcasts
</li>
<li><a target="_blank" href="/photos/txssa/sets/">Luncheon Photos</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem calendarnav"><a class="menuLink" href="calendar"><span class="menuText">Calendar</span></a>
<div class="content">
<div class="subnav" id="drop-calendar">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul id="calendarOptions">
<li>All Calendar Items
</li>
<li>Luncheon Calendar
</li>
<li>Deadline Calendar
</li>
<li>Education Calendar
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membership"><a class="menuLink" href="membership"><span class="menuText">Membership</span></a>
<div class="content">
<div class="subnav" id="drop-membership">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Membership Benefits
</li>
<li>Join REDACTED
</li>
<li>Pay My Dues
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem aboutus"><a class="menuLink" href="about-us"><span class="menuText">About Us</span></a>
<div class="content">
<div class="subnav" id="drop-about">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Contact Us
</li>
<li>Board
</li>
<li>Board Nominations
</li>
<li>Committees
</li>
<li>FAQs
</li>
<li>Charitable Fundraising
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membersonly"><a class="menuLink" href="members-only"><span class="menuText">Members Only</span></a>
<div class="content">
<div id="drop-members" class="subnav">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>My Account
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
CSS
body{
background:#112B50;
}
ul{
list-style:none;
}
.main-nav {
clear: both;
margin-top: 20px;
float: left;
width: 100%;
}
#megaMenu {
float: right;
padding-top: 15px;
position:absolute;
}
.menuItem {
float: left;
position: relative;
}
.menuLink {
display: block;
color: #fff;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right 5px;
text-decoration: none;
padding-right: 15px;
margin-right: 22px;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membersonly .menuLink {
margin: 0;
color: #FC0;
}
.menuItem .content {
display: none;
position: absolute;
top: 15px;
padding-top: 20px;
left: 0;
float: left;
max-width: 344px;
z-index: 10;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 200px;
}
.menuItem:nth-of-type(5) .content {
left: -118px;
}
.menuItem:nth-of-type(6) .content {
left: -82px;
}
.menuItem:hover .content,
.menuItem:active .content,
.menuItem:focus .content {
display: block;
}
.calendarnav:hover .content {
display: none;
}
.subnav {
border: 3px solid #476f93;
background-color: #fff;
float: left;
width: 344px;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
width: 200px;
}
.subnav img {
position: absolute;
top: 11px;
left: 30px;
}
.menuItem:nth-child(5) .subnav img {
left: 146px;
}
.menuItem:nth-child(6) .subnav img {
left: 132px;
}
.membership .left, .aboutus .left, .membersonly .left {
width: 180px;
}
/*******************************************
Media Queries
*******************************************/
#media(max-width:974px){
.header-right {
max-width: 100%;
width:100%;
padding: 15px;
box-sizing: border-box;
}
}
#media(max-width:700px){
.sf_cols.utilityLinks, .utilityLinks{
text-align:center;
}
}
#media(max-width:730px){
.main-nav {
margin-top: 0;
}
#megaMenu {
float: right;
padding-top: 15px;
width: 100%;
position: relative;
box-sizing: border-box;
}
.menuItem {
float: none;
position: relative;
width: 100%;
background-color: transparent; /* changes the background-color of main nav */
padding: 15px;
box-sizing: border-box;
}
.menuLink {
display: block;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right center;
text-decoration: none;
padding-right: 0px;
margin-right: 0px;
color: white;
width: 100%;
height: auto;
}
.menuItem .content {
display: none;
position: relative;
top: 0;
padding-top: 20px;
left: 0;
float: none;
max-width: 100%;
z-index: 10;
margin: 0 auto;
text-align: center;
}
.subnav {
border: 0px;
background-color: #fff;
float: none;
width: 100%;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.content .left, .content .right {
float: none;
max-width: 100%;
width:100%;
padding: 0;
box-sizing: border-box;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
max-width: 100%;
width:100%;
text-align: center;
margin: 0 auto;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 100%;
}
.menuItem:nth-of-type(5) .content {
left: 0;
}
.menuItem:nth-of-type(6) .content {
left: 0;
}
.membersonly .menuLink {
margin: 0 auto;
}
.content li {
border: 1px solid #f1f1f1;
}
#header {
max-height: 100%; /*300px*/
margin-bottom: 45px;
overflow: auto; /*hidden*/
float: none;
}
.header-right, #content {
float: left;
max-width: 715px;
width: 100%;
}
.menuItem:nth-child(5) .subnav img {
left: 50%;
}
.menuItem:nth-child(6) .subnav img {
left: 50%;
}
.subnav img {
left: 50%;
}
}
#media (max-width:600px){
.canidates{
width:100%;
margin-bottom: 15px;
}
.sf_colsOut.sf_2cols_1_50,
.sf_colsOut.sf_2cols_2_50{
width:100%;
}
.sf_2cols_2_50 .sf_2cols_2in_50{
margin-left:0 !important;
}
}
JS
//This JS was on the page already, maybe you can utilize it in someway.
$(document).ready(function(){
var allPanels = $('.sflistItemContent').hide();
$('.sflistListItem:first > .sflistItemContent').show();
$('.sflistItemTitle').click(function() {
allPanels.slideUp();
$('.expanded').removeClass('expanded');
$(this).next().slideDown();
$(this).addClass('expanded');
return false;
});
$('.menuItem:nth-child(3n)').addClass('calendarnav');
$('.menuItem:nth-child(4n)').addClass('membership');
$('.menuItem:nth-child(5n)').addClass('aboutus');
$('.menuItem:nth-child(6n)').removeClass('calendarnav').addClass('membersonly');
// Form input hide/display default text on focus/blur
$(".sfsearchTxt").focus(function() {
if(this.value == this.defaultValue) {
this.value = "";
}
}).blur(function() {
if(!this.value.length) {
this.value = this.defaultValue;
}
});
});

Ok, I worked on this for about an hour and a half, and it was quite some work. Basically, what I did was copy the parent links and added it to their respective dropdown lists as the first item and gave them a class of "clone". That way, using css and media queries, those options only appear on a mobile layout and disappear when you resize the window back to full desktop view. And you said it yourself, yes it requires some javascript to create the click events that will make the dropdowns appear when their respective parent link is clicked. To do that I used "event.preventDefault();" which stops the link from going to the page where it's supposed to take you and then immediately use show() to make the dropdown appear (it will also put away the dropdown list if you click it again using hide(); ). Lastly, using your css, I deactivated the hover effects on the dropdown menus, but only on mobile layouts. The desktop layout has remained intact. Here's the code:
$(document).ready(function(){
if ($(".menuItem").css("float") == "left") {
$(".content").css("display", "");
}
var showDropDown = function(id) {
if ($(".menuItem").css("float") == "none") {
event.preventDefault();
var id = "#" + id;
var dropdownSelector = $(id).parent().children(".content");
if (dropdownSelector.css("display") == "none") {
dropdownSelector.show();
}
else {
dropdownSelector.hide();
dropdownSelector.css("display", "");
}
}
};
$("#resources").click(function() {showDropDown($("#resources").attr("id"))});
$("#education").click(function() {showDropDown($("#education").attr("id"))});
$("#calendar").click(function() {showDropDown($("#calendar").attr("id"))});
$("#membership").click(function() {showDropDown($("#membership").attr("id"))});
$("#about-us").click(function() {showDropDown($("#about-us").attr("id"))});
$("#members-only").click(function() {showDropDown($("#members-only").attr("id"))});
});
body{
background:#112B50;
}
ul{
list-style:none;
}
.main-nav {
clear: both;
margin-top: 20px;
float: left;
width: 100%;
}
#megaMenu {
float: right;
padding-top: 15px;
position:absolute;
}
.menuItem {
float: left;
position: relative;
}
.menuLink {
display: block;
color: #fff;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right 5px;
text-decoration: none;
padding-right: 15px;
margin-right: 22px;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membersonly .menuLink {
margin: 0;
color: #FC0;
}
.menuItem .content {
display: none;
position: absolute;
top: 15px;
padding-top: 20px;
left: 0;
float: left;
max-width: 344px;
z-index: 10;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 200px;
}
.menuItem:nth-of-type(5) .content {
left: -118px;
}
.menuItem:nth-of-type(6) .content {
left: -82px;
}
.menuItem:hover .content,
.menuItem:active .content,
.menuItem:focus .content {
display: block;
}
.calendarnav:hover .content {
display: none;
}
.subnav {
border: 3px solid #476f93;
background-color: #fff;
float: left;
width: 344px;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
width: 200px;
}
.subnav img {
position: absolute;
top: 11px;
left: 30px;
}
.menuItem:nth-child(5) .subnav img {
left: 146px;
}
.menuItem:nth-child(6) .subnav img {
left: 132px;
}
.membership .left, .aboutus .left, .membersonly .left {
width: 180px;
}
.clone {
display:none;
}
/*******************************************
Media Queries
*******************************************/
#media(max-width:974px){
.header-right {
max-width: 100%;
width:100%;
padding: 15px;
box-sizing: border-box;
}
}
#media(max-width:700px){
.sf_cols.utilityLinks, .utilityLinks{
text-align:center;
}
}
#media(max-width:730px){
.main-nav {
margin-top: 0;
}
#megaMenu {
float: right;
padding-top: 15px;
width: 100%;
position: relative;
box-sizing: border-box;
}
.menuItem {
float: none;
position: relative;
width: 100%;
background-color: transparent; /* changes the background-color of main nav */
padding: 15px;
box-sizing: border-box;
}
.menuLink {
display: block;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right center;
text-decoration: none;
padding-right: 0px;
margin-right: 0px;
color: white;
width: 100%;
height: auto;
}
.menuItem .content {
display: none;
position: relative;
top: 0;
padding-top: 20px;
left: 0;
float: none;
max-width: 100%;
z-index: 10;
margin: 0 auto;
text-align: center;
}
.subnav {
border: 0px;
background-color: #fff;
float: none;
width: 100%;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.content .left, .content .right {
float: none;
max-width: 100%;
width:100%;
padding: 0;
box-sizing: border-box;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
max-width: 100%;
width:100%;
text-align: center;
margin: 0 auto;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 100%;
}
.menuItem:nth-of-type(5) .content {
left: 0;
}
.menuItem:nth-of-type(6) .content {
left: 0;
}
.membersonly .menuLink {
margin: 0 auto;
}
.content li {
border: 1px solid #f1f1f1;
}
#header {
max-height: 100%; /*300px*/
margin-bottom: 45px;
overflow: auto; /*hidden*/
float: none;
}
.header-right, #content {
float: left;
max-width: 715px;
width: 100%;
}
.menuItem:nth-child(5) .subnav img {
left: 50%;
}
.menuItem:nth-child(6) .subnav img {
left: 50%;
}
.subnav img {
left: 50%;
}
.menuItem:hover .content {
display: none;
}
.calendarnav:hover .content {
display: none;
}
.clone {
display:block;
}
}
#media (max-width:600px){
.canidates{
width:100%;
margin-bottom: 15px;
}
.sf_colsOut.sf_2cols_1_50,
.sf_colsOut.sf_2cols_2_50{
width:100%;
}
.sf_2cols_2_50 .sf_2cols_2in_50{
margin-left:0 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-nav">
<ul id="megaMenu" class="menuContainer nav">
<li class="menuItem"><a id="resources" class="menuLink" href="resources"><span class="menuText">Resources</span></a>
<div class="content">
<div class="subnav" id="drop-resources">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Resources
<li>Resource Library
</li>
<li>Legal Resources
</li>
<li>Ask the Experts
</li>
<li>Community
</li>
<li>Find Storage
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Buyer's Guide
</li>
<li>Upcoming Auctions
</li>
<li>Forms Software
</li>
<li>Self Storage News Magazine
</li>
<a href="/resources/community/open-for-business-blog">
<li>Blog</li>
</a>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem activeItem"><a id="education" class="menuLink" href="education"><span class="menuText">Education</span></a>
<div class="content">
<div class="subnav" id="drop-education">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Education
<li>Annual Conference
</li>
<li>Executive Retreat
</li>
<li>Luncheons
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Webinars
</li>
<li>Podcasts
</li>
<li><a target="_blank" href="/photos/txssa/sets/">Luncheon Photos</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem"><a id="calendar" class="menuLink" href="calendar"><span class="menuText">Calendar</span></a>
<div class="content">
<div class="subnav" id="drop-calendar">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul id="calendarOptions">
<li class="clone">Calendar
<li>All Calendar Items
</li>
<li>Luncheon Calendar
</li>
<li>Deadline Calendar
</li>
<li>Education Calendar
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membership"><a id="membership" class="menuLink" href="membership"><span class="menuText">Membership</span></a>
<div class="content">
<div class="subnav" id="drop-membership">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Membership
<li>Membership Benefits
</li>
<li>Join REDACTED
</li>
<li>Pay My Dues
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem aboutus"><a id="about-us" class="menuLink" href="about-us"><span class="menuText">About Us</span></a>
<div class="content">
<div class="subnav" id="drop-about">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">About Us
<li>Contact Us
</li>
<li>Board
</li>
<li>Board Nominations
</li>
<li>Committees
</li>
<li>FAQs
</li>
<li>Charitable Fundraising
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membersonly"><a id="members-only" class="menuLink" href="members-only"><span class="menuText">Members Only</span></a>
<div class="content">
<div id="drop-members" class="subnav">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Members Only
<li>My Account
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Also here's the jsfiddle where I did my work: http://jsfiddle.net/381nxmuo/

highlight active menu item on Page Scroll?

I want to add a active function to the current menu item on page scroll. It’s a single page with different sections. When click on an item, the active state should switch to the current one.
As you scroll down the page, the active menu item changes. How is this done? Would guys give me a answer base on my demo coding? Thanks.
My demo: http://jsfiddle.net/x2skzp1p/1/
var menuContainer = $('header').height();
function scrollToAnchor(anchorName) {
var aTag = $("div[name='" + anchorName + "']");
$('html,body').animate({
scrollTop: aTag.offset().top - menuContainer
}, 'slow');
console.log(anchorName);
}
.fluid {
clear: both;
margin-left: 0;
width: 100%;
float: left;
display: block;
}
/* Mobile Layout: 480px and below. */
body {
background-color: #EEEEEE;
font-family: "Open Sans", Helvetica, "Heiti TC", "Microsoft JhengHei", "Microsoft Yahei", "PMingLiU", sans-serif;
font-size: 100%;
margin-top: 0px;
}
.gridContainer {
margin-left: auto;
margin-right: auto;
padding-left: 1.1375%;
padding-right: 1.1375%;
clear: none;
float: none;
width: auto;
}
#header {
margin-top: 0;
margin-right: auto;
margin-left: auto;
display: block;
width: 100%;
height: 200px;
max-width: 1000px;
position: fixed;
background-color: #FF6600;
}
/* header - navigation */
#subnav {
height: 100%;
margin-right: auto;
width: 100%;
background-color: #1BBC9B;
font-size: 120%;
}
#navmenu ul {
padding: 0;
margin-top: 4px;
margin-right: auto;
margin-left: 0%;
margin-bottom: 0;
width: 650px;
}
#navmenu li {
display: inline;
float: left;
}
#navmenu a {
color: #294C52;
display: inline-block;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
#navmenu li a {
border-right: 1px solid #294C52;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#navmenu li:last-child a {
border-right: 1px solid #576979;
/* no border on last list item */
}
#navmenu li:first-child a {
background-color: #294C52;
color: #FFFFFF;
}
#navmenu a:hover,
nav a:active {
background-color: #1BBC9B;
color: #FFFFFF;
}
#content {
width: 100%;
max-width: 1000px;
height: 100%;
margin-top: 1px;
}
#section1 {
background-color: #294C52;
width: 100%;
display: block;
padding-top: 5px;
padding-bottom: 5px;
margin-top: 198px;
}
#section2 {
background-color: #EEEEEE;
}
#section3 {
background-color: #EEEEEE;
}
#section4 {
background-color: #EEEEEE;
margin-left: 0;
width: 100%;
float: left;
}
#content-about-org-left {
width: 48.1012%;
background-color: #FFFFFF;
float: left;
clear: none;
}
#content-about-org-centre {
width: 48.1012%;
margin-left: 1.2658%;
clear: none;
background-color: #FFFFFF;
float: right;
}
#content-about-org-right {
background-color: #FFFFFF;
}
#section5 {
background-color: #EEEEEE;
}
/* content - typography */
.content-list {
list-style-type: none;
color: #294C52;
text-indent: -25px;
font-size: 100%;
line-height: 173%;
}
.content-list-bold {
font-weight: bolder;
font-size: 110%;
color: #294C52;
}
.content-title {
background-color: #903233;
color: #FFFFFF;
padding-top: 3px;
}
.content-p-white {
color: #FFFFFF;
padding-left: 10px;
padding-right: 10px;
text-align: justify;
line-height: 25px;
padding-top: 0px;
padding-bottom: 0px;
}
.content-p-black {
color: #294C52;
padding-left: 10px;
padding-right: 10px;
text-align: justify;
line-height: 25px;
font-size: 100%;
}
.content-p-black-b {
color: #294C52;
font-weight: bolder;
padding-left: 10px;
font-size: 110%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gridContainer clearfix">
<header id="header">
<nav id="subnav" class="fluid">
<ul id="navmenu">
<li><a onClick="scrollToAnchor('section1');" title="成立背景">SECTION 1</a>
</li>
<li><a onClick="scrollToAnchor('section2');" title="協會使命">SECTION 2</a>
</li>
<li><a onClick="scrollToAnchor('section3');" title="營運模式">SECTION 3</a>
</li>
<li><a onClick="scrollToAnchor('section4');" title="協會組織">SECTION 4</a>
</li>
<li><a onClick="scrollToAnchor('section5');" title="活動及刊物">SECTION 5</a>
</li>
</ul>
</nav>
</header>
<!--end of header-->
<!--start of content-->
<div class="fluid" id="content">
<div id="section1" class="fluid" name="section1">
<p class="content-p-white">《2013年香港殘疾人士貧窮情況報告》顯示介乎18至64歲適齡工作的殘疾人士的貧窮率為22.4%，遠較相同年齡群的整體貧窮率10.5%為高。再者，按經濟活動身分劃分，近18萬名的殘疾適齡工作人士當中，只有39.1%有從事經濟活動，遠低於整體人口中同年齡層的72.8%。</p>
<p class="content-p-white">於2013年3月初，一群熱心人士包括郭鍵勳博士、謝俊謙教授及伍杏修先生等有意建立一個各方協作平台，改善殘疾人士的就業困難。</p>
<p class="content-p-white">資訊科技易達協會有限公司 Accessible IT Development Association Limited (AIDA) 於2014年11月正式註冊成立。</p>
<!--<div id="secttion1-bg"></div>--></div>
<!--end of section1-->
<div id="section2" class="fluid" name="section2">
<article>
<h2 class="content-title"> SECTION 2</h2>
<p class="content-p-black">資訊科技易達協會是一個社會企業致力提供專業資訊科技服務，同時為嚴重殘疾人士提供培訓及工作機會，讓學員可選擇在家居從事資訊科技相關工作；協會全力推動無障礙軟件開發，協助社會資訊共融。</p>
</article>
</div>
<!--end of section2-->
<div id="section3" class="fluid" name="section3">
<article>
<h2 class="content-title"> SECTION 3</h2>
<figure>
<img src="images/2-about-us_03.jpg" alt="營運模式示意圖" class="alignRight" title="營運模式示意圖" />
</figure>
<p class="content-p-black">全面利用現代通訊科技的便利，解決殘疾人士面對指定工作地點的限制，讓他們可選擇在家居或院舍工作，同時得到必要的護理。AIDA選擇網頁開發作為起步點，由「無障礙學堂」(Barrier-Free School) 及業界專業義工負責培訓學員，讓他們掌握指定技術。</p>
<p class="content-p-black">AIDA會承接工作項目，將項目分拆，然後將組件分配給技術程度不同的學員，並會密切督導整個項目的進行。AIDA已經與本地多間知名網頁開發公司結為合作伙伴，致力確保AIDA的所有服務均符合市場要求。AIDA會以殘疾友善機構的工作項目作為開始，當累積一定成功往績後，會推廣至主流市場。</p>
</article>
</div>
<!--end of section3-->
<div id="section4" class="fluid" name="section4">
<article>
<h2 class="content-title"> SECTION 4</h2>
<div id="content-about-org-left" class="fluid">
<ul class="content-list">
<li class="content-list-bold">名譽贊助人</li>
<li>謝俊謙教授</li>
<li class="content-list-bold">主席</li>
<li>郭鍵勳博士</li>
<li class="content-list-bold">副主席</li>
<li>劉海軍先生</li>
<li class="content-list-bold">義務秘書</li>
<li>伍杏修先生</li>
<li class="content-list-bold">義務司庫</li>
<li>郭皓君女士</li>
<li class="content-list-bold">核數師</li>
<li></li>
<li class="content-list-bold">義務法律顧問</li>
<li>林子絪女士</li>
<li class="content-list-bold">義務總幹事</li>
<li>蘇炳坤先生</li>
<li class="content-list-bold">諮詢委員及指導</li>
<li></li>
</ul>
</div>
<div id="content-about-org-centre" class="fluid">
<ul class="content-list">
<li class="content-list-bold">董事</li>
<li>張健輝先生</li>
<li>郭鍵勳博士</li>
<li>郭皓君女士</li>
<li>劉海軍先生</li>
<li>羅偉祥先生</li>
<li>伍杏修先生</li>
<li>吳家榮博士</li>
<li>蘇炳坤先生</li>
<li>謝俊謙教授</li>
<li>黃婉冰女士</li>
<li>游寶榮先生</li>
</ul>
</div>
<div id="content-about-org-right" class="fluid">
<ul class="content-list">
<li class="content-list-bold">工作團隊</li>
<li>王乃東 王迪清 江啟暉 利詠然 李俊輝</li>
<li>李豪飛 冼永健 何浚彥 施嶸傑 翁文菁</li>
<li>茹文祥 郭寧 章世恒 曾志豪 曾鈴茵</li>
<li>黃新陽 蔡冀逵 鄭建慧 盧兆豐</li>
</ul>
<p>
<img src="images/2-about-us_06.jpg" alt="工作團隊成員相片" title="工作團隊成員相片" />
</p>
</div>
</article>
</div>
<!--end of section4-->
<div id="section5" class="fluid" name="section5">
<article>
<h2 class="content-title"> SECTION 5</h2>
<ul class="content-list">
<li class="content-list-bold">新春團拜</li>
<li>日期︰2015年3月14日(星期六)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰下午4:00- 5:30</li>
</ul>
<hr>
<ul class="content-list">
<li class="content-list-bold">第一次周年大會</li>
<li>日期︰2015年3月14日(星期六)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰下午3:30- 4:00</li>
</ul>
<hr>
<ul class="content-list">
<li class="content-list-bold">協會發展成長分享會</li>
<li>日期︰2015年2月3日(星期二)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰上午11:00- 下午4:00</li>
<li>內容：</li>
<li>1. Delifrance午膳</li>
<li>2. 匯報協會最新發展，就大家感興趣的事務進行商討</li>
<li>3. IT人Ben Wong 個人經歷分享</li>
<li>4. 參觀香港大學校園或自由活動</li>
</ul>
<hr>
<ul class="content-list">
<li class="content-list-bold">協會發展成長分享會</li>
<li>日期︰2015年2月3日(星期二)</li>
<li>地點︰金鐘添馬公園添馬茶座愛烘焙餐廳</li>
<li>時間︰上午11:00- 下午4:00</li>
<li>內容：</li>
<li>1. Delifrance午膳</li>
<li>2. 匯報協會最新發展，就大家感興趣的事務進行商討</li>
<li>3. IT人Ben Wong 個人經歷分享</li>
<li>4. 參觀香港大學校園或自由活動</li>
</ul>
<hr>
</article>
</div>
<!--end of section5-->
</div>
<!--end of content-->
</div>
<!--end of gridContainer-->

$(document).ready( function (){
var topMenu = $("#navmenu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
// Set/remove active class
menuItems.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
});
<header id="header">
<nav id="subnav" class="fluid">
<ul id="navmenu">
<li>SECTION 1</li>
<li>SECTION 2</li>
<li>SECTION 3</li>
<li>SECTION 4</li>
<li>SECTION 5</li>
</ul>
</nav>
</header>
and add this style
#navmenu li a .active {
background-color: #294C52;
color: #FFFFFF;
}

You can use onscroll event to set active div and an active class to set it:
$(function () {
$("body").onscroll(function () {
$("#navmenu li").removeClass("active");
if ($("body").scrollTop() > $("#section5").offset().top)
$("#navmenu li").eq(4).addClass("active");
else if ($("body").scrollTop() > $("#section4").offset().top)
$("#navmenu li").eq(3).addClass("active");
else if ($("body").scrollTop() > $("#section3").offset().top)
$("#navmenu li").eq(2).addClass("active");
else if ($("body").scrollTop() > $("#section2").offset().top)
$("#navmenu li").eq(1).addClass("active");
else
$("#navmenu li").eq(0).addClass("active");
});
});

Categories

Resources