I am new at javascript and I can't seem to get this simple dropdown menu to work. This is what I have done so far :
Html code:
<ul>
<li onClick='showMenu()'>
<a href="#" >Birds</a>
<ul class="menu">
<li>Ratites</li>
<li>Fowl</li>
<li>Neoaves</li>
</ul>
</li>
</ul>
CSS code:
a {
color: #06c;
}
ul {
padding: 0;
margin: 0;
background: pink;
float: left;
}
li {
float: left;
display: inline;
position: relative;
width: 150px;
list-style: none;
}
.menu {
position: absolute;
left: 0;
top: 100%;
background: #ccc;
display: none;
}
Javascript code:
function showMenu(){
document.getElementByClass("menu").style.display="block";
}
My javascript code isn't working. Why won't my nested list show when I click?
Here is a jsfiddle link to my code: http://jsfiddle.net/wkmd7h0r/13/
It's getElementsByClassName not getElementByClass. Fixed code:
function showMenu() {
document.getElementsByClassName("menu")[0].style.display = "block";
}
Also getElementsByClassName returns a NodeList collection, so you should use [0] to get the first element in this collection.
Demo: http://jsfiddle.net/wkmd7h0r/14/
Here is an example of more advanced functionality with addEventListener.
Related
When I try to click to the burger menu, the navigation bar is not working. What should I do?
I wrote some html code and gave a navigation bar a special Id also I gave ID to the burger menu to use it later in jQuery.
In CSS I gave a parameter when the screen size will be less than 991px it would execute the following.
I also wrote that normally display should be hidden, but when I click to the burger menu the nav class should change from class="nav" to "nav show" but in my case it doesn't change.
let nav = $("#nav");
let navToggle = $("#navToggle");
navToggle.on("click", function(event) {
event.preventDefault();
nav.toggleClass("show");
});
#media (max-width: 991px) {
.works__item {
width: 50%;
}
.burger {
display: flex;
}
.nav {
display: none;
width: 100%;
flex-direction: column;
background-color: #31344e;
text-align: right;
position: absolute;
top: 100%;
right: 0;
}
.nav.show {
display: block;
}
.nav__link {
padding: 9px 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="nav" id="nav">
Features
Works
Our Team
Reviews
Download
</nav>
<button class="burger" type="button" id="navToggle ">
<span class="burger__item">Menu</span>
</button>
Several things
The biggest is the position absolute with values that are not working at all
Also I would not use the same ID and CLASS for the nav - you now have ID, CLASS and TAGNAME all nav
let $nav = $("#nav");
let $navToggle = $("#navToggle");
$navToggle.on("click", function(event) {
event.preventDefault();
$nav.toggleClass("show");
});
.works__item {
width: 50%;
}
.burger {
display: flex;
}
.nav {
display: none;
width: 100%;
flex-direction: column;
background-color: #31344e;
text-align: right;
position: relative;
}
.nav a { color:white;}
.nav.show {
display: block;
}
.nav__link {
padding: 9px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="nav" id="nav">
Features
Works
Our Team
Reviews
Download
</nav>
<button class="burger" type="button" id="navToggle">
<span class="burger__item">Menu</span>
</button>
You can do this more shortly like the following piece of code.
navToggle.on('click', function() {
nav.toggle();
});
If you wish (and maybe it's already done) you can check the jquery documentation to fully understand how "toggle()" function work. https://api.jquery.com/toggle/
I've created a utility and main navigation bar for this self-project I'm working on, and I want the main nav to become sticky when I scroll 42px.
However, when I scroll the navigation bar doesn't stick at the top of the window. I tested it with the utility nav, and it worked perfectly. Here is my coding for the main nav bar...
$(window).on("scroll", function () {
var distanceScrolled = $(window).scrollTop();
console.log("The distance scrolled is: " + distanceScrolled);
if(distanceScrolled>42){
$("#main-nav").addClass("scrolled");
}
else{
$("#main-nav").removeClass("scrolled");
}
});
#main-nav {
position: relative;
width: 100%;
height: 100px;
background-color: #000000;
}
.main-nav-left {
list-style: none;
float: left;
padding-left: 28px;
height: 100px;
}
.main-nav-items {
position: absolute;
top: 40%;
left: 290px;
list-style: none;
text-decoration: none;
}
.main-nav-items li {
display: inline-block;
padding-right: 12px;
margin-right: 13px;
}
.main-nav-right li {
float: right;
padding-right: 12px;
margin-right: 26px;
margin-top: 40px;
list-style: none;
}
#main-nav a {
text-decoration: none;
color: #ffffff;
}
.scrolled {
position: fixed;
top: 0;
z-index: 1000;
}
<nav id="main-nav">
<ul class="main-nav-left">
<li><img src="images/thule_logo.png" height="100" width="auto"></li>
</ul>
<ul class="main-nav-items">
<li>CARRIERS & RACKS</li>
<li>ACTIVE WITH KIDS</li>
<li>LUGGAGE & BAGS</li>
<li>SLEEVES & CASES</li>
<li>EXPLORE THULE</li>
</ul>
<ul class="main-nav-right">
<li><i class="fas fa-search fa-lg"></i></li>
</ul>
</nav>
<script src="js/jquery-v3.3.1.js"></script>
<script src="js/main.js"></script>
First of all there is no 'nav' class defined for your html nav element. So in jQuery selector, you need to select by the id(main-nav) as you have defined or by HTML nav element itself. you can do this:
if(distanceScrolled>42){
$("nav").addClass("scrolled");
}
else{
$("nav").removeClass("scrolled");
}
or
if(distanceScrolled>42){
$("#main-nav").addClass("scrolled");
}
else{
$("#main-nav").removeClass("scrolled");
}
But add jQuery library file prior to your custom script.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
second and the most important thing is that you are adding a class(scrolled) having {position:fixed}. Since Id has higher priority than Class so it won't allow class to overwrite the common CSS property, like in this case 'position'. So you can add !important to class selector's property:
.scrolled{
position:fixed!important;
top: 0;
z-index: 1000;
}
or
write deep CSS selection to make it's priority higher than Id. Like:
#main-nav.scrolled {
position:fixed;
top: 0;
z-index: 1000;
}
Both will work.
I am trying to make a nav menu for part of a practice website, and I made an animation that basically slides down a green div when one of the menu options are hovered over, but once that happens the whole nav menu slides down. which I do not want. I tried changing the nav menus position to absolute, but then it looses its position, and I can't re-position it. Any help would be appreciated, thank you!
Here is the JSfiddle version.
HTML:
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
<ul id="navlist">
<li class="navlistitems" id="home">Home</li>
</ul>
CSS:
#nav_animations {
display:inline;
position:relative;
bottom:13px;
}
#greenHome {
display:none;
}
.nav_square {
background-color:green;
width:100px;
height:15px;
z-index:22;
position:relative;
}
#navlist {
display:inline;
font-family: 'Dhurjati', sans-serif;
font-size:45px;
position:relative;
}
.navlistitems {
display:inline;
padding:50px;
color:black;
}
JavaScript:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').slideToggle('fast');
});
});
PS: Yes I do have the JQuery library linked in my actual code.
The quick and dirty solution using your work is as follows below. If you wanted the green dropdown to be below the parent nav item, you should add ul#nav_animations inside the li.navlistitems. That's what I've done below. I also modified your CSS a little to take this into consideration.
And here is a JSFiddle I threw together for you: http://jsfiddle.net/84amnjz7/1/
CSS:
#navlist {
margin: 0;
padding: 0;
list-style-type: none;
font-family: 'Dhurjati', sans-serif;
font-size: 45px;
position: relative;
}
.navlistitems {
position: relative;
padding: 25px 0 0;
display:block;
float: left;
color: #000;
}
#nav_animations {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}
#greenHome {
display: none;
}
.nav_square {
background-color: green;
width: 100%;
height: 15px;
z-index: 22;
position: relative;
}
jQuery:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').stop(true, true).slideToggle('fast'); /* ADDED .stop(true, true) */
});
});
Modified HTML:
<ul id="navlist">
<li class="navlistitems" id="home">Home
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
</li>
</ul>
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.
I was wondering if anyone could help me out. I'm trying to make a simple folio site, and I have this link in the top nav that when clicked on would appear a horizontal menu underneath the header. So far I have goten it to work with just css, but I don't like how the menu appears when hovered, it would look much more professional if it appeared when clicked and stayed there until you click on the same link again. if anyone could help me that'll be great. I've tried all sorts of java tutorials and won't very successful I didn't fully understand it.
<header>
<a class="home" href="../index.htm" title="Home Page"></a>
<a class="to_nav" href="#nav" ></a>
<div class="logo">
<a href="#top">
<h1>Deeran</h1>
<span>Graphic Design</span>
</a>
</div>
<nav>
<ul class="drop">
<li>
<a id="menu"></a>
<ul class="hide">
<li>Portfolio</li>
<li>About</li>
<li>Contact/Hire</li>
</ul>
</li>
</ul>
</nav>
</header>
And here's the css
nav {margin: 0; padding: 0;}
nav ul li a#menu {
display: block;
width: 67px;
height: 50px;
position: absolute;
right: 0px;
top: 0px;
margin-top: 9px;
margin-right: 15px;
margin-bottom: 0px;
margin-left: 15px;
}
nav ul ul.hide {
display: none;
list-style: none;
margin: 10px 0 0;
text-indent: none;
clear: both;
width: 100%;
position: absolute;
left: 0px;
}
nav ul ul.hide li {margin: 0;}
nav ul li:hover > ul {
display: block;
list-style-type: none;
}
if there was one simple way to convert that one :hover function to onClick I would be very grateful :)
make
nav ul li:hover > ul {
display: block;
list-style-type: none;
}
to
nav ul li.active > ul {
display: block;
list-style-type: none;
}
Then use javascript to add a class active onClick.
What makes SO wonderful is that we can refer to similar cases easily :)
For javascript part please refer this answer .
Add/Remove class onclick with JavaScript no librarys
The 'click' event cannot be listened for with css. Remove your :hover rule and add some JavaScript. In the code you provided, you don't have anything in the #menu element for the user to click on, so I added some text for the fiddle.
http://jsfiddle.net/Fc75u/
JavaScript:
var toggle = document.getElementById('menu');
var menu = document.getElementsByClassName('hide');
toggle.addEventListener('click', function(event) {
menu[0].style.display == "block" ? menu[0].style.display = "none" : menu[0].style.display = "block";
});
jQuery:
$('#menu').click(function () {
$('.hide').toggle();
});