We Keep Coding

Active Scrolling On single page Website Not working

im trying to find solutions but i cant.
my scrolling spy is not working
this is the navigation html.
<nav class="menu">
<ul>
<li><a class = "active" href="#" data-scroll = "home">Home</a></li>
<li>About</li>
<li>Our Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</nav>
My nav CSS JUST INCASE because i think there is a problem with the CSS but on thewebsite it appears just fine and the hover and active effects are working but not the on-scroll.
.menu{
z-index: 100;
position: fixed;
top: 0;
left: 25%;
width: 50%;
overflow: hidden;
background-color: transparent;
/* padding: 20px 0; */
}
.menu ul{
margin: 5px;
padding: 0;
text-align: center;
}
.menu ul li{
list-style: none;
margin:0 20px ;
display: inline;
}
.menu ul li a {
color: black;
font-size: 1em;
line-height: 1em;
text-transform: uppercase;
text-decoration: none;
padding: 3px 8px;
transition: 0.5s;
}
.menu ul li a.active{
border-bottom: 1px solid black;
border-top: 1px solid black;
color: #FFC300 ;
}
.menu ul li:hover{
border-bottom: 1px solid black;
}
/* On scroll */
.menu.scroll{
background: yellow;
}
And mY jquery/javascript. I am new to working with Jquery so i'm not too sure if this code is correct and most of the code online is not working for me.
$('nav a').on('click', function() {
var scrollAnchor = $(this).attr('data-scroll'),
scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;
$('body,html').animate({
scrollTop: scrollPoint
}, 500);
return false;
})
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 100) {
$('nav').addClass('fixed');
$('.content section').each(function(i) {
if ($(this).position().top <= windscroll - 20) {
$('.menu ul li a.active').removeClass('active');
$('.menu ul li a ').eq(i).addClass('active');
}
});
} else {
$('nav').removeClass('fixed');
$('.menu ul li a.active').removeClass('active');
$('.menu ul li a.first').addClass('active');
}
}).scroll();
Anyone with some good advice or a tutorial i can refer to?

responsive navigation hide move items to dropdown when space runs out in plain javascript

I have a navigation of lets say 7 items, and when resolution gets smaller items drop in a new line. I need to make that when an item doesn't fit on a navigation anymore it should put a "MORE" dropdown button on the right side of nav. and put that item that doesn't fit in a dropdown.
I need in plain javascript not in jquery.
$(document).ready(function() {
function calcWidth() {
var navwidth = 0;
var morewidth = $('#main .more').outerWidth(true);
$('#main > li:not(.more)').each(function() {
navwidth += $(this).outerWidth( true );
});
var availablespace = $('#Mainbar').width() - morewidth;
if (navwidth > availablespace) {
var lastItem = $('#main > li:not(.more)').last();
lastItem.attr('data-width', lastItem.outerWidth(true));
lastItem.prependTo($('#main .more ul'));
calcWidth();
} else {
var firstMoreElement = $('#main li.more li').first();
if (navwidth + firstMoreElement.data('width') < availablespace) {
firstMoreElement.insertBefore($('#main .more'));
}
}
if ($('.more li').length > 0) {
$('.more').css('display','block');
} else {
$('.more').css('display','none');
}
}
$(window).on('resize load',function(){
calcWidth();
});
});
#nav-main {
*zoom: 1;
}
#nav-main:before,
#nav-main:after {
display: table;
content: "";
}
#nav-main:after {
clear: both;
}
#Mainbar {
clear: both;
position: relative;
width: 100%;
}
#Mainbar > ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
z-index: 5;
}
#Mainbar > ul > li {
background: none;
float: left;
font-size: 14px;
margin-bottom: 0;
padding-left: 0;
position: relative;
text-transform: uppercase;
}
#Mainbar > ul > li.hidden {
display: none;
}
#Mainbar > ul > li:hover {
background: #f00;
}
#Mainbar > ul > li:hover ul {
display: block;
}
#Mainbar a {
display: block;
opacity: 0.75;
padding: 15px;
}
#Mainbar a:hover {
opacity: 1;
}
#Mainbar ul ul {
display: none;
list-style: none;
margin: 0;
padding: 15px 0 0;
position: absolute;
top: 100%;
right: 0;
}
#Mainbar ul ul a {
margin-bottom: 15px;
padding: 0 15px;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<nav id="Mainbar">
<ul id="main">
<li class="selected">Home</li>
<li>home</li>
<li>about</li>
<li>contact</li>
<li>product</li>
<li>FAQ's</li>
<li class="more hidden" data-width="80">
More
<ul></ul>
</li>
</ul>
</nav>

jQuery dropdown menu with css

I've made a bit lists and I think I'm lost with them when it comes to jQuery and making my menu to toggle on click event.
Here is what I have: http://jsfiddle.net/3rc63e3L/
The problem is in menu. When mouse is hovering the element, It is showing and when I click it - It hides. But when i'm deleting from CSS
ol > li:hover > ul
{
display: block;
}
It won't even work while clicking on Menu2 tab. The idea is to delete this "hover" thing on menu2 and make it work only for "click". How can i fix it?

You’re trying to toggle the list elements instead of the list itself. Just use the following JavaScript:
$('ol li.submenuone').click(function() {
$('ol li.submenuone ul').toggle();
});
And remove your CSS from above.
Demo: JSFiddle

use jquery instead of css..
$('ol > li.submenuone').click(function() {
$('ol > li.submenuone ul').slideToggle();
});

Use jQuery, initially subMenu should be hidden. Then sho/hide, toggle using jQuery. Changed the css as well.
$('ol li.submenuone').click(function() {
//alert("hello");
$('ol li.submenuone ul').toggle();
});
.nav
{
width: 100%;
padding: 10px 0;
background-color: red;
text-align: center;
box-shadow: 0px -1px 40px black;
position: relative;
z-index: 9999;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
letter-spacing: 1px;
}
ol a
{
color: white;
text-decoration: none;
display: block;
}
ol > li
{
float: left;
width: 170px;
height: 40px;
border-right: 1px dashed #800517;
transition-property: background;
transition-duration: .4s;
}
ol > li:first-child
{
border-left: 1px dashed #800517;
}
ol > li:hover
{
background-color: #800517;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
width: 100px;
display: none;
}
ol > li> ul
{
display: none;
}
ol > li > ul > li
{
padding: 2px;
background-color: red;
position: relative;
z-index: 9999;
border-top: 1px dashed #800517;
}
ol > li > ul > li:first-child
{
border-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav">
<ol>
<li>menu1</li>
<li class="submenuone">menu2
<ul>
<li class="submenutwo">sub1</li>
<ul>
<li class="submenuthree">sub1</li>
<li class="submenuthree">sub2</li>
<li class="submenuthree">sub3</li>
</ul>
<li class="submenutwo">sub2</li>
<li class="submenutwo">sub3</li>
</ul>
</li>
<li>menu3</li>
</ol>
</div>

How can I make this menu pure CSS? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
How can I make this pure CSS (no javascript)?
Here's a fiddle: http://jsfiddle.net/q646Ljg6/4/
HTML:
<div id="navigation" class="navigation">
<div id="dropmenu" class="dropmenu">
<login>
<ul>
<li> </span>
</li>
<li> Dropdown C
<ul>
<li><a href="#" >Option 1</a>
</li>
<li><a href="#" >Option 2</a>
</li>
<li><a href="#" >Option 3</a>
</li>
</ul>
</li>
</ul>
</login>
<ul>
<li> Home
</li>
<li> <a href="javascript:void(0);" >Dropdown A</a>
<div class="sub-menu">
<div class="sub-menu-inner">
<div>
<ul>
<li><a href="#" >Dropdown A - 1</a>
</li>
<li><a href="#" >Dropdown A - 2</a>
</li>
</ul>
</div>
</div>
<!-- /sub-menu-inner -->
</div>
<!-- /sub-menu -->
</li>
<li> <a href="javascript:void(0);" >Dropdown B</a>
<div class="sub-menu">
<div class="sub-menu-inner">
<div>
<ul>
<li> <a href="#" >Dropdown B - 1</a>
<ul>
<li><a href="#" >Dropdown B - 1 - 1</a>
</li>
</ul>
</li>
<li><a href="#" >Dropdown B - 2</a>
<ul>
<li><a href="#" >Dropdown B - 2 - 1</a>
</li>
<li><a href="#" >Dropdown B - 2 - 2</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sub-menu-inner -->
</div>
<!-- /sub-menu -->
</li>
<li style="float:none;overflow:hidden;">
<div class="dark width-max"> <span>
<input id="quick-search" data-load="content" data-url="/quicksearch" class="search" type="text" placeholder="Quick Search" maxlength="50" autocomplete="off">
<div id="search-results" class="search-results"></div>
</span>
</div>
</li>
</ul>
</div>
</div>
<div>
content content content content content content content content content content content content content content content content content content content content content content content content </div>
Javascript:
var currentTop = -1;
var currentSub = -1;
var currentProfile = -1;
//var topMenu = '';
//var subMenu = '';
var lastToggled = '';
function InitNav() {
//$body.on('click', '#dropmenu > ul > li > a', ToggleTop);
$('#dropmenu > ul > li > a', 'body').mouseenter(ToggleTop);
$('#dropmenu', 'body').mouseleave(ToggleTop);
$body.on('click', '#dropmenu > ul > li ul > li > a', ToggleSub);
$('#dropmenu login a', 'body').mouseenter(ToggleProfileIn).mouseleave(ToggleProfileOut);
$body.on('click', '#dropmenu login a', ToggleProfile);
}
function ToggleTop(e) {
var $listItems = $('#dropmenu > ul > li');
if (currentProfile !== -1) { // reset profile if needed
lastToggled.removeClass('toggled');
}
if (currentTop !== -1) { // reset top menu
$listItems.eq(currentTop).removeClass('toggled');
}
var $currentTarg = $(e.currentTarget);
var $item = $currentTarg.parent('li');
var index = $item.index();
if (currentTop === index) { // reset
$item.removeClass('toggled');
currentTop = -1;
} else { // set
$item.addClass('toggled');
currentTop = index;
}
return false;
}
function ToggleSub(e) {
var $listItems = $('#dropmenu .sub-menu-inner > div > ul > li');
if (currentSub !== -1) { // reset
$listItems.removeClass('selected');
}
var $currentTarg = $(e.currentTarget);
var $item = $currentTarg.closest('#dropmenu .sub-menu-inner > div > ul > li');
var index = $item.index();
// set
$item.addClass('selected');
currentSub = index;
return false;
}
function ToggleProfileIn(e) {
var $listItems = $('#dropmenu > ul > li');
if (currentTop !== -1) { // reset
lastToggled = $listItems.eq(currentTop).removeClass('toggled');
}
}
function ToggleProfile(e) {
currentTop = -1;
var $listItems = $('#dropmenu login > ul > li');
if (currentProfile !== -1) { // reset
$listItems.removeClass('toggled');
}
var $currentTarg = $(e.currentTarget);
var $item = $currentTarg.closest('#dropmenu login > ul > li');
var index = $item.index();
// set
currentProfile = index;
lastToggled = $item.addClass('toggled');
return false;
}
function ToggleProfileOut(e) {
if (currentTop !== -1) { // restore
lastToggled.addClass('toggled');
}
}
InitNav();
CSS:
.navigation {
width: 100%;
height: 36px;
background-color: rgb(243, 245, 245);
}
.dropmenu {
position: relative;
width: 100%;
height: 36px;
font-weight: bold;
background: #3e494b;
/* menu background color */
}
.dropmenu ul {
list-style-type: none;
z-index: 50;
}
/* first level ul style */
/* .dropmenu > ul, */
.dropmenu .sub-menu-inner {
margin: 0 auto;
/*
background: rgb(130, 160, 46);
background: rgba(255, 160, 46, 0.92);
*/
}
.dropmenu > ul > li {
float: left;
z-index: 50;
}
.dropmenu > ul > li:nth-of-type(1) {
width: 187px;
}
.dropmenu > ul > li > a {
display: inline-block;
padding: 10px 20px;
color: #b1b6b9;
/* grey menu text color */
}
.dropmenu > ul > li > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
/*
border-top: 3px solid;
border-top-color: #b1b6b9;
*/
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
.dropmenu > ul > li.toggled > a, .dropmenu > ul > li.toggled > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
/*
border-top: 3px solid;
border-top-color: #b1b6b9;
*/
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
/* sub-menu */
.dropmenu .sub-menu {
display: none;
position: absolute;
/* background: #00a3da; */
width: 100%;
left: 0;
-webkit-box-shadow: 0 4px 5px -5px #000000;
-moz-box-shadow: 0 4px 5px -5px #000000;
box-shadow: 0 4px 5px -5px #000000;
}
.toggled .sub-menu {
display: block;
width: 100%;
background: #596466;
/* sub menu color */
/* border: 1px solid red; /**/
}
.dropmenu .sub-menu-inner > div {
width: 100%;
height: 100%;
float: left;
/* border: 1px solid green; /**/
}
/*
.dropmenu .sub-menu-inner > div > ul {
}
/**/
.dropmenu .sub-menu-inner > div > ul > li {
display: inline;
overflow: hidden;
position: relative;
}
.dropmenu .sub-menu-inner > div > ul > li:nth-of-type(1) {
margin-left: 187px;
}
.dropmenu .sub-menu-inner > div > ul > li > a {
padding: 10px 20px;
color: #d5d5d5;
/* border: 1px solid red; */
}
.dropmenu .sub-menu-inner > div > ul > li > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
color: #ffffff;
}
.dropmenu .sub-menu-inner > div > ul > li.selected > a, .dropmenu .sub-menu-inner > div > ul > li.selected > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
/*
background-color: rgb(243, 245, 245);
background-color: rgba(243, 245, 245, 0.9); /* almost white */
color: #ffffff;
}
.dropmenu .sub-menu-inner:before, .dropmenu .sub-menu-inner:after {
content:" ";
display: table;
}
.dropmenu .sub-menu-inner:after {
clear: both;
}
.dropmenu .sub-menu-inner > div a {
line-height: 36px;
}
/* drop-sub-menu */
.dropmenu .sub-menu-inner ul ul {
display: none;
position: absolute;
}
.dropmenu .sub-menu-inner ul > li:hover ul {
display: block;
left: 0px;
}
.dropmenu .sub-menu-inner ul > li > ul > li > a {
display: block;
padding: 0px 20px;
width: 145px;
background: #596466;
/* sub menu color */
color: #d5d5d5;
}
.dropmenu .sub-menu-inner ul > li > ul > li > a:hover {
/* background: #798486; /* sub menu hover color */
color: #ffffff;
}
/* login menu */
.dropmenu login ul {
margin: 0;
}
.dropmenu login > ul > li {
position: relative;
float: right;
}
.dropmenu login > ul > li > a {
display: inline-block;
padding: 10px 20px;
color: #b1b6b9;
/* grey menu text color */
}
.dropmenu login > ul > li > a:hover {
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
#cart-button {
font-size: 14px;
}
/* login drop-down */
.dropmenu login ul ul {
display: none;
position: absolute;
right: 0;
top: 100%;
}
.dropmenu login ul > li:hover ul {
display: block;
}
/* login sub-menu */
.dropmenu login > ul > li > ul > li > a {
display: inline-block;
width: 100px;
padding: 10px 20px;
background: #3e494b;
/* menu background color */
color: #b1b6b9;
/* light grey */
}
.dropmenu login > ul > li > ul > li > a:hover {
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
.dropmenu login > ul > li.toggled > a, .dropmenu login > ul > li.toggled > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
background-color: #596466;
color: #ffffff;
}
.width-max {
margin: 2px 10px 0 5px;
float:none;
overflow:hidden;
}

UPDATED:
<ul class="menu">
<li id="levela">A Level 1
<ul id="sub1" class="wide">
<li>A Level 2</li>
<li>A Level 2</li>
</ul>
</li>
<li id="levelb">B Level 1
<ul id="sub2" class="wide">
<li>B Level 2</li>
<li>B Level 2
<ul class="wide_sub">
<li>B Level 3</li>
<li>B Level 3</li>
</ul>
</li>
</ul>
</li>
<li style="position: relative;">C Level 1
<ul class="normal">
<li>C Level 2</li>
<li>C Level 2
<ul class="normal_sub">
<li>C Level 3</li>
<li>C Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
css:
*, html, body {
margin: 0;
padding: 0;
line-height: 40px;
}
ul.menu {
list-style:none;
position: relative;
width: 100%;
display: block;
height: 40px;
display: inline-block;
background-color: yellow;
}
ul.menu > li {
display: block;
float: left;
padding: 0 10px;
cursor: pointer;
height: 100%;
}
ul.wide {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
background-color: grey;
width: 100%;
height: 50px;
list-style: none;
}
ul.wide li {
float: left;
padding: 5px 10px;
position: relative;
}
ul.wide li:hover ul.wide_sub {
display: block;
}
ul.wide_sub {
display: none;
position: aboslute;
top: 100%;
left: 0;
list-style: none;
background-color: green;
}
ul.wide_sub li {
float: none;
}
ul.normal {
display: none;
position: absolute;
background-color: red;
top: 100%;
left: 0;
list-style: none;
}
ul.normal li {
float: none;
position: relative;
}
ul.normal_sub {
display: none;
position: absolute;
left:100%;
top: 0;
list-style: none;
width: 200px;
background-color: blue;
}
ul.normal li:hover ul.normal_sub {
display: block;
}
.menu li:hover ul.normal {
display: block;
}
#levela:hover #sub1 {
display: block;
}
#levelb:hover #sub2 {
display: block;
}
http://jsfiddle.net/michaelyuen/twdjobmL/1/
Hope that helps

HTML
<ul>
<li>
test
<ul>
<li>
hi!
</li>
</ul>
</li>
</ul>
CSS:
ul li ul{display:none;}
ul li:hover ul{display:block;}

JS accordion menu on wordpress site

I'm building a personal website for a friend and he has a lot of pieces for his portfolio page. So i wanted to create a JS accordion section for the content. Essentially working as a menu but when clicking the parent it will show a youtube embedded video, his resume, etc..
Here is the JS
$(function(){
$('#cssmenu > ul > li:has(ul)').addClass("has-sub");
$('#cssmenu > ul > li > a').click(function() {
var checkElement = $(this).next();
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
});
Here is the HTML
<div id="cssmenu">
<ul>
<li><span>Résumé</span>
<ul>
<li><span>content</span></li>
</ul>
</li>
<li><span>Video Reel</span>
<ul>
<li><span>content2</span></li>
</ul>
</li>
<li><span>Writing Clips</span>
<ul>
<li><span>Piece1</span>
<ul>
<li>Content1</li>
</ul>
</li>
<li><span>Piece2</span>
<ul>
<li>Content2</li>
</ul>
</li>
<li><span>Piece3</span>
<ul>
<li>Content3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
And here is the CSS
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
/*First-level menu*/
#cssmenu {
width: 100%;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #bd0e36;
color: #000000;
border-bottom: 1px solid #5e071b;
text-transform: uppercase;
position: relative;
}
#cssmenu > ul > li > a > span {
background: #ed1144;
padding: 10px;
display: block;
font-size: 13px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #bd0e36;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
/*Second-level menu*/
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #ffffff;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #bd0e36;
}
#cssmenu ul ul li.odd {
background: #B3D4FC;
}
#cssmenu ul ul li.even {
background: #B3D4FC;
}
The page that i'm working on is: http://aaroncmansfield.com/portfolio/
I'm not sure why the menu levels aren't dropping down when i click. I added a plugin to the wordpress site that allows me to add the proper code to the header to read the .js file too. Please help! Thanks

jQuery is not being aliased with $ on your site. You can do so by including an argument in your document.ready function.
Try this:
jQuery(function($){
$('#cssmenu > ul > li:has(ul)').addClass("has-sub");
...
});