I want to switch from section 1 to section 2 of the page, when using the mouse to hover the buttons in the navigation bar without clicking them.
How should I do so?
and here is the code in below:
CSS:
.container {
overflow: hidden;
background-color: #FFFFFF;
font-family: Arial;
top:0;
left:0;padding: 5px;
}
.container a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.pull-right {
float: right;
}
#topNav {
margin-bottom:0;box-shadow: none;background:none;
}
body {
position: relative;
}
#section1 {padding-top:120px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:120px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:120px;height:500px;color: #000000; background-color: #FFD2E9;}
#section4 {padding-top:120px;height:500px;color: #fff; background-color: #00bcd4;}
HTML:
<div class="navbar navbar-inverse navbar-static-top" id="topNav">
<div class="container">
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
Toehold Switch
Interlab
Charaterization
Program
</ul>
</div>
You cannot do it with CSS alone. You are suppose to use scripts. Take a look on the [fiddler][1] for your reference.
[1]: https://jsfiddle.net/rajsnd08/c9xonwdL/1/
Hope it helps.
you can use jQuery
FIRST: define an id for the 'navbar item' which you want to hover.
for example add id: "item1" for the "Toehold switch" element in your navbar:
Toehold Switch
SECOND: append the jQuery library to your project:
one way, is to add its link to the html header :
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
THIRD: add this javascript script code to your html:
<script>
$("#item1").hover(function () {
var hash = $("#item1").attr("href");
var scroll = $(hash.toString()).offset().top;
event.preventDefault();
$('body,html').animate(
{scrollTop: (scroll)},
1000,
function () {
window.location.hash = hash;
}
);
});
</script>
TIP 1: by using the script, if you hover the "toehold" link on the navbar, it will scroll to the section which you were linked to (i.e. 'section 1')
TIP 2: you can also change the speed of scrolling in the animate() function in the script tag: just change '1000' to whatever you want. (that is 1000 ms i.e. 1 second)!
Related
I am trying to highlight the "current page" in my navigation menu (with drop-down menus).
The code below did the job when I had simple navigation links (built using the "< a >" HTML tag). I am now upgrading my navigation bar to hold drop-down menus (using "< button >" HTML tags).
I believe I need to take a similar approach and assign an active class to the "current" page but I can't work out how to loop through "< button >" objects in the same way I did for "< a >" objects
How can I dynamically highlight the current page in my navigation bar when using buttons ("< button >") in my navigation bar?
I found a related article on W3: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_active_element2 but it doesn't work for my use-case as I'm navigating between different URLs.
A simplified version of my code looks like this:
<div class="navigation">
Home
Page A
<div class="dropdown">
<button class="dropbtn" onclick="location.href='page_b.html'" type="button"> Page B</button>
<div class="dropdown-content">
Food
Exercise
Drinks
</div>
</div>
Page C
Page D
</div>
<!-- Highlight current page (works for <a> but not <button>)-->
<script>
$(function(){
$('a').each(function(){
if ($(this).prop('href') == window.location.href) {
$(this).addClass('active');
$(this).parents('li').addClass('active');
}
});
});
</script>
Associated CSS:
...
.active {
background-color: blue;
}
...
.dropdown:not(.dropdown-content) {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
padding: 14px 16px;
margin: 0;
}
...
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #ffffff;
background-color: #000000;
padding: 14px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content{
display: block;
z-index: 1;
}
You would need to add the class active to each page so the when the user is on the home page. your code would be like this.
<a class='active' href="index.html">Home</a>
For page A
<a class='active' href="page_a.html">Page A</a>
I have a page with an initial description, followed by 2 buttons, where the user can choose typeA or typeB. They work by "target": when the user clicks typeA comes the content relative to typeA, bellow the buttons; same to typeB.
typeA is the most common selection, then, when the page loads, a javascript emulates the click to typeA and opens respective content. To avoid hidden the initial description, there is another javascript to put the page at the top. Worked on Chrome and Edge, not on Firefox.
I would like to repeat the same process when the user clicks: opens the respective content, but positioning the page at the top, or, at least, showing the buttons. I thought event onClick calling the same js backToTop would worked - but not.
I put an alert on js and enters there but not execute: always keeps the content of the button selected in its better visibility.
I tried:
window.location.href = '#top';
window.scrollBy(0, -500);
document.html.scrollTop = document.documentElement.scrollTop = 0;
without success.
What am I doing wrong?
<head>
<meta charset="UTF-8">
<title>TOP PAGE TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html {margin-left:auto; margin-right:auto;width:70%; font-family:verdana; font-size:1.2em;}
.menuFAQ {background:#aaa; font-size:2em; width:100%;}
.menuFAQ ul {list-style-type:none; position:relative; margin-left:-40px; /* to avoid user agent chrome */}
.menuFAQ li {display:inline-block; margin-top:10px; margin-bottom:10px; width:49%; background:#fff; text-align:center; box-shadow:2px 3px 4px 0px rgba(170,170,170,1); font-weight:400; line-height:80px;}
.menuFAQ li a {display:block; color:#020062; background:#fff; font-weight:400; text-decoration:none;}
.menuFAQ li .active,.menuFAQ li:hover a {color:#fff; font-weight:400; background-image:linear-gradient(#165686, #0f3a5a); }
:target {color:#fff;font-size:1em;}
div.items>div:not(:target) {display:none}
div.items>div:target {display:block; margin-left:auto; margin-right:auto; color:#000; border:1px solid #aaa;}
</style>
</head>
<body>
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p><p>text2B</p><p>text3B</p>
<br>[...]
</nav>
</div>
</div>
<script>
const allTargetLinks = document.querySelectorAll('.target')
allTargetLinks.forEach(targetLink => {
targetLink.addEventListener('click', () => {
allTargetLinks.forEach(targetLink => {
targetLink.classList.remove('active')
})
targetLink.classList.add('active')
})
})
window.onload = function() {assignPreferedFAQ()};
function assignPreferedFAQ() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
//document.html.scrollTop = document.documentElement.scrollTop = 0;
//document.body.scrollTop = document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
</script>
You had a real mess there regarding how you process click events and href attribute, i.e:
You had onclick attribute on your links, and you were adding yet another listener to them in JS
You didn't event.preventDefault() in your function, and default browser behavior when you click on a link is to get you to its href path
I've cleaned up a bit and changed some things. Since we need to prevent default behavior :target selector will no longer work, so instead I did what you've already been doing with links, and added an active class to your content. clickHandler() will now remove and add class active as necessary. At the end just scroll to the top. Here's the snippet:
document.querySelectorAll('.target').forEach(targetLink => targetLink.addEventListener('click', clickHandler, false));
function clickHandler(ev) {
ev.preventDefault(); // prevent browser from automatically scrolling to href pos
if (!ev.currentTarget.classList.contains('active')) {
// disable active elements
document.querySelector('.target.active').classList.remove('active');
document.querySelector('.items div.active').classList.remove('active');
// add class to the clicked on button and its corresponding content tab
ev.currentTarget.classList.add('active');
// to prevent pointless string slicing below, you'd have to store ids somewhere else i.e in the data-id attribute
const id = ev.currentTarget.href.slice(ev.currentTarget.href.lastIndexOf('#') + 1);
document.getElementById(id).classList.add('active');
}
window.scrollTo(0,0);
}
* {
font-family: verdana;
font-size: 1em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
text-align: center;
padding: 0;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
width: 48%;
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
div.items>div {
display: none;
}
div.items>div.active {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a class="target active" href="#typeA">TypeA</a></li>
<li><a class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div class="active" id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</div>
Note that instead of artificially clicking at the page load, now your content just loads with class active.
Hope this help you.
< script >
window.onload = function() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
//alert("enter backToTop");
var elmnt = document.getElementById("top");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
}; <
/script>
body,
html {
margin-left: auto;
margin-right: auto;
width: 70%;
font-family: verdana;
font-size: 1.2em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
position: relative;
margin-left: -40px;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
width: 49%;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
:target {
color: #fff;
font-size: 1em;
}
div.items>div:not(:target) {
display: none
}
div.items>div:target {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div> <br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5<br>textExp6<br>textExp7<br>textExp8<br>textExp9<br>textExpA<br>textExpB<br>textExpC<br>textExpD
<br>textExpE
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</di
Here is my fiddle: http://jsfiddle.net/2tBGE/209/
I just want to open a div with animation after a user clicked on a menu item.
For example, when clicking on the second item, clicked item and previous item should push to the top of the page and below item should push to the bottom of the page.
jQuery(document).ready(function($) {
$('ul li a').on('click', function(){
$(this).parent().next().css({
'display':'block'
})
})
});
ul{
list-style: none;
background: #eee;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.js_item{
display:none;
}
li a{
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover{
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>main menu1</li>
<div class="load_content_for_menu_1 js_item">1</div>
<li>main menu2</li>
<div class="load_content_for_menu_2 js_item">2</div>
<li>main menu3</li>
<div class="load_content_for_menu_3 js_item">3</div>
<li>main menu4</li>
<div class="load_content_for_menu_4 js_item">4</div>
<li>main menu5</li>
<div class="load_content_for_menu_5 js_item">5</div>
</ul>
Note: I've made a small edit to your html structure so that each .toggled_content <div> is the child of each <li>.
With the following jQuery methods you can achieve this.
slideToggle()
Display or hide the matched elements with a sliding motion.
toggleClass()
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
find()
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
var allContent = $("li");
allContent.find(".toggled_content").hide();
$(".toggler").on("click", function() {
var $thisParent = $(this).parent();
if (!$thisParent.hasClass('open')) {
$thisParent
.parent()
.find(".open")
.toggleClass("open")
.find(".toggled_content")
.slideToggle();
}
$thisParent
.toggleClass("open")
.find(".toggled_content")
.slideToggle();
});
ul {
list-style: none;
background: #eee;
padding: 0;
margin: 0;
}
li a {
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover {
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>
main menu1
<div class="toggled_content">1</div>
</li>
<li>
main menu2
<div class="toggled_content">2</div>
</li>
<li>
main menu3
<div class="toggled_content">3</div>
</li>
<li>
main menu4
<div class="toggled_content">4</div>
</li>
<li>
main menu5
<div class="toggled_content">5</div>
</li>
</ul>
Edit:
Or just use the jquery-ui accordion widget.
$("#accordion").accordion({
heightStyle: "fill",
active: 3
});
$("#accordion").on("accordionactivate", function(event, ui) {
const offset = ui.newHeader[0].offsetTop;
$([document.documentElement, document.body]).animate({
scrollTop: offset
}, 200);
});
body {
margin: 0;
}
.ui-accordion {
height: 200vh; /* simulate height with content */
background: #eee;
}
.ui-accordion-header {
margin: 0;
padding: 10px 15px;
font-weight: normal;
}
.ui-accordion-header:hover {
background: #9c0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div id="accordion">
<h3>main menu 1</h3>
<div>1</div>
<h3>main menu 2</h3>
<div>2</div>
<h3>main menu 3</h3>
<div>3</div>
<h3>main menu 4</h3>
<div>4</div>
</div>
This might be a little more complex than it appears, because you probably do not want any of the DIVs to be made full-screen. Rather, you want the headings of all the DIVs to remain visible, and the contents of any one content div to fill all remaining vertical space.
jQueryUI does this for you, using their accordion tabs widget. You can either include jQueryUI in your project and use their functionality, or you can examine their code and see how they did it, then modify their code to work in your own project.
To incorporate jQueryUI is simple: just add it the same way you would add jQuery, right after the call to jQuery (that is, you also need jQuery for jQueryUI to work, and the link to jQueryUI must follow the link for jQuery) See this link for a code example.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
Instead of adding .css() I have added .show(). It basically does the same by adding display:block
Try adding blow
jQuery(document).ready(function($) {
$('ul li a').on('click', function() {
$('.js_item').hide('slow')
$(this).parent().next().show('slow')
})
});
ul {
list-style: none;
background: #eee;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.js_item {
display: none;
}
li a {
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover {
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="main">
<li>main menu1</li>
<div class="load_content_for_menu_1 js_item">1</div>
<li>main menu2</li>
<div class="load_content_for_menu_2 js_item">2</div>
<li>main menu3</li>
<div class="load_content_for_menu_3 js_item">3</div>
<li>main menu4</li>
<div class="load_content_for_menu_4 js_item">4</div>
<li>main menu5</li>
<div class="load_content_for_menu_5 js_item">5</div>
</ul>
Hope this helps!
I am new to node js and EJS template in it.I have a navbar in my navbar.ejs file with a drop-down toggle button in it.My problem is that the button does not work when clicked.Is this due to the EJS template or my code has gone wrong somewhere.Will script tag work inside ejs template file? Please help me out.
Assume that I have done the routing correctly and included all the files in the app.ejs file.
Thanks in advance :)
navbar.ejs
<nav class="navbar navbar-default navbar-static-top" style="width:100%;overflow:hidden;height:30px;background-color:#595959;font-size:17px;font-family:'Segoe UI',Arial,sans-serif">
<div class="container-fluid">
<ul class="nav navbar-nav" style="margin-left:-20px">
<li class="dropdown">
<button type="" class="dropbtn" onclick="myfunction()" >ALL <i class="fa fa-caret-down"></i> </button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</nav>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myfunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
</script>
style.css
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: #595959;
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
nav.navbar li.dropdown:hover div.dropdown-content {
display: block;
}
try with importing following before </body> tag
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
The navigation links are not working because currently their hrefs are dead links. Each links needs to have its href equal to the route it points to in the .js file. For example, in a normal situation, the home route always links to the '/' path, so if this is supposed to link to the home route, Link 1, then it becomes Link 1(or Home route) as I think it should. The same would apply for other routes. If link 2 was to link to a certain about route, then it should be Link 2( or about). I hope that makes sense.
I am having some trouble using jQuery to hide my vertical menu. I just learned jQuery, so I am fairly new to using it. I can't get jQuery to modify anything (change color for example, using any action.. mouseenter(), click() etc)
Help is much appreciated.
EDIT: I am getting errors in JSLint.. trying to use jQuery in brackets editor. Not sure what to do :/ First error is on line 1 using $ before defined.. any help would be awesome
This code is simply trying to change the green "link1, link2, link3" text from green to purple when mousing over "Program"
***also, is there a way to easily reduce the size of my ul li items? The area that I can currently click is larger than the text. I tried modifying my display: property, but that messes up the layout of my list.. *******
jQuery
$(document).ready(function() {
$('#headerMenu > li').mouseenter(function() {
('#headerMenu ul li a').Color('purple');
});
});
HTML:
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type='text/javascript' src='script.js'></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
DROP
<ul>
<li><a href='#'>LINK 1</a></li>
<li><a href='#'>LINK 2</a></li>
<li><a href='#'>LINK 3</a></li>
</ul>
</li>
<li>LOGIN</li>
<li>ABOUT</li>
</ul>
</div>
<div class="wrapper">
<div id="mainPhoto"> fffffff
<div> change color</div>
</div>
<div id="mainScrollUp"> </div>
</div>
</body>
</html>
css code
.header {
background-color: skyblue;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
}
#headerMenu > li {
display: inline-block;
text-align: center;
}
#headerMenu li a {
text-decoration: none;
color: black;
padding: 2rem;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#headerMenu ul {
text-decoration: none;
list-style: none;
display: block;
color: red;
padding-left: 0;
position:absolute;
}
#headerMenu ul li a{
color:green;
}
#mainPhoto {
height: 650px;
width: 100%;
background-color: bisque;
color:palevioletred;
}
#mainScrollUp {
z-index: 1;
height: 1000px;
width: 100%;
background-color: aqua;
clear: both;
}
.fixed {
position: fixed;
top: 0;
}
error is on line 1 using $ before defined
You forgot to define jQuery. Try and add the following line to your header tag in your HTML file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Put it before your own script.js please, that way jQuery is defined before calling it in your script.
Understanding your vertical submenu goal, I came up with this:
https://jsfiddle.net/wsj59p20/
Hope it helps!
I don't think this is what you want but it fixes some of your syntax
$(document).ready(function() {
$('#headerMenu > li').mouseenter(function() {
$(this).find('ul>li>a').css('color', 'purple');
});
});
Also, your "using $ before defined" error seems to because you aren't loading jQuery at all in your sample code.