I am following a web development tutorial to create a landing page. I'm using a combination of CSS, HTML, and JS. My site will not detect a navigation bar that I have attempted to draw with SCSS. It's meant to be dark blue and sit on the top right. Below is the code for the project this far.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/dist/style.css">
<title>Frontend Mentor | Easybank landing page</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<header class="header">
<nav class="flex flex-jc-sb">
<a href="/" class="header__logo">
<img src="images/logo.svg" alt="Easybank" />
</a>
<a href="#" class="header__menu">
<span></span>
<span></span>
<span></span>
</a>
</nav>
</header>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</div>
<script src="/app/js/script.js"></script>
</body>
</html>
style.scss
#import "variables";
#import "globals";
#import "header";
_globals.scss
hmtl {
font-size: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Public Sans', sans-serif;
line-height: 1.3;
}
/// Flexbox
.flex {
display: flex;
&-jc-sb {
justify-content: space-between;
}
&-jc-c {
justify-content: center;
}
&-ai-c {
align-items: center;
}
}
_headers.scss
.header {
nav {
padding: 24px;
}
&__menu { // Mobile Menu
> span {
display: block;
width: 26px;
height: 2px;
background-color: $darkBlue;
&:not(:last-child){
margin-bottom: 3px;
}
}
}
}
I was trying to create an overlay but when I click on the button the overlay don't show up.
In the console log the error 'overlay.js:4 Uncaught TypeError: Cannot read property 'addEventListener' of null' appears. I already tried by myself to solve this problem, I'm just a beginner.. I hope someone can solve the problem for me. Thanks for the effort!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link
href="style.css" media="screen,projection" rel="stylesheet" type="text/css"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
</head>
<body>
<div id="nav" class="overlay">
<button id="afsluiten" href="#" class="close">Afsluiten</button>
<div class="overlay__content">
Home
Profile
Images
About
Product
</div>
</div>
<button id="open" href="#" class=open"">Open Overlay</button>
<script src="overlay.js"></script>
</body>
</html>
CSS
body{
font-family: sans-serif;
}
.overlay{
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: limegreen;
overflow-x: hidden;
z-index: 5;
}
.overlay__content{
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a{
padding: 10px;
color: black;
font-size: 40px;
text-decoration: none;
display: block;
}
.overlay .close{
position: absolute;
top: 20px;
right: 50px;
font-size: 50px;
}
Javascript
var open = document.querySelector('.open');
var close = document.querySelector('.close');
open.addEventListener('click', function (ev) {
ev.preventDefault();
openOverlay();
}, false);
function openOverlay() {
document.querySelector('.nav').style.width = "100%";
}
Your line <button id="open" href="#" class=open"">Open Overlay</button> has a typo on the class name
<button id="open" href="#" class="open">Open Overlay</button>
The DOM hasn't been loaded yet. You need to put in the handler to the load event
I created a responsive Hamburger menu using javascript, which seems to be firing properly, the only problem is that the drop down menu and anchors are completely invisible when I "open" the menu despite being present in the Chrome Inspector (ie when i select a list item/anchor element in the inspector, an area where I should see the item is highlighted, but there's nothing there!)
I thought it could be the image/text in the next container concealing the elements, but I made a fresh .html with only the nav elements present and when I viewed that in the browser, same problem.
#media only screen and (max-width: 660px) {
.icon {
display: inline-block;
color: black;
position: absolute;
right: 2rem;
}
nav {
position: relative;
height: 4rem;
}
.nav-links {
display: none;
position: absolute;
top: 4rem;
left: 0;
background-color: #63B4C9;
width: 100%;
padding: 0.5rem;
box-sizing: border-box;
}
.nav-links li a {
display: block;
padding: 0.5rem;
text-align: center;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Arapey|Homemade+Apple|Fira+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Starter Files</title>
</head>
<body>
<nav id="theNav" class="nav">
<img src="images/logo.svg" class="logo">
<i class="fa fa-bars"></i>
<ul class="nav-links">
<li>Classes</li>
<li>FAQ</li>
<li>Planting Info</li>
<li>Contact</li>
</ul>
</nav>
<script>
$(".icon").click(function(){
$(".nav-links").slideToggle();
});
</script>
</body>
I have 2 pop-up menus that basicaly open and close when clicked on. I wrote a little code that close any showing menu when the user click anywhere but 1 of the 2 menus. The code work perfecly fine in Chrome and Firefox but in IE, the menus only close when clicked on. I'm pretty new to Javascript so i am pretty sure that there is a better way to do it .
Here is my code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- Main Header -->
<header id="header">
<nav class="container">
<img onclick="navFunction(this)" id="navMenuImg" src="img/menu.png">
<img onclick="settingFunction(this)" id="navSettingImg" src="img/setting.png">
<div id="navMenuSetting">
<ul id="navMenu" class="navMenu">
<li><a class="navMenuLink" href="#">Videos</a></li>
<li><a class="navMenuLink" href="#">Pictures</a></li>
<li><a class="navMenuLink" href="#">Profiles</a></li>
</ul>
<ul id="navSetting" class="navSetting">
<li><a class="navMenuLink" href="">Account</a></li>
<li><a class="navMenuLink" href="deconnection.php">Log out</a></li>
</ul>
</div>
</nav>
</header>
<!-- Scripts -->
<script type="text/javascript">
function navFunction() {
document.getElementById("navMenu").classList.toggle("navMenuShow");
}
function settingFunction(){
document.getElementById("navSetting").classList.toggle("navMenuShow");
}
document.onclick = function(e) {
if (!e.target.matches('#navMenuImg') && !e.target.matches('#navSettingImg')) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.classList.remove('navMenuShow');
navSetting.classList.remove('navMenuShow');
}
}
</script>
<!-- CSS -->
<style type="text/css">
#navMenuImg{
width: 55px;
height: 35px;
margin-top: 10px;
cursor: pointer;
}
.navMenu{
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
margin-right: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navSettingImg{
float: right;
width: 30px;
height: 30px;
margin-top: 12px;
margin-right: 12px;
cursor: pointer;
}
.navSetting{
position: relative;
right: 0;
z-index: 1;
list-style-type: none;
padding: 0;
margin-top: 10px;
border-bottom:1px solid #ccc;
display: none;
}
#navMenuSetting{
position: relative;
width: 100%;
background-color: red;
}
.navMenuShow{
display: block;
position: absolute;
float: right;
}
</style>
</body>
Thank you in advance !
The js classList and target.matches is not supported in IE. I have listed the code that you can use instead:
function navFunction() {
document.getElementById("navMenu").className+=" navMenuShow";
}
function settingFunction(){
document.getElementById("navSetting").className+=" navMenuShow";
}
document.onclick = function(event) {
var matchesOne = event.target.matches ? event.target.matches('#navMenuImg') : event.target.msMatchesSelector('#navMenuImg');
var matchesTwo = event.target.matches ? event.target.matches('#navSettingImg') : event.target.msMatchesSelector('#navSettingImg');
if (!matchesOne&&!matchesTwo) {
var navMenu = document.getElementById("navMenu");
var navSetting = document.getElementById("navSetting");
navMenu.className=navMenu.className.replace(/navMenuShow/g,"");
navSetting.className=navSetting.className.replace(/navMenuShow/g,"");
}
}
The code is tested and is working 100% in IE and Chrome.
This is the code snippet of the navigational bar I have been trying to make using HTML5, CSS and JavaScript. The Dropdown menu I am attempting to make using CSS and Javascript is similar to the one given as an example in the W3Schools website. This is the code snippet I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable= yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="FoodMeets">
<meta name="keywords" content="Restaurants, Bars, Pubs, Cafes, Nightclubs, Hangout places, Hangout zones, Chat forum, Social networking">
<meta name="robots" content="index, follow">
<!--Materialize CSS-->
<link rel="stylesheet" href="styles/materialize.min.css" />
<link rel="stylesheet" href="styles/style.css" />
<!--Normalize CSS-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<title>FoodMeets</title>
<style>
html,body{
font-family: Georgia, serif;
font-weight: normal;
font-size: 16px;
background-color: #eceff1;
}
nav{
background-color: white;}
nav ul a{
color: #17479e;
font-weight: normal;
}
nav ul a:hover{
text-decoration: none;
}
.nav-wrapper a:hover{
color: #17479e;
text-decoration: none;
}
.icon-design{
position:relative;
top: 4px;
font-size: 20px;
}
.right{
position: relative;
left: -40px;
}
.dropbtn{
display: inline-block;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<nav class="z-depth-1">
<div class="nav-wrapper">
<img src="images/foodmeets_logo.png" style="position:relative; width:118px; height:69px; top:-2px"/>
<div class="container">
<ul class="left">
<li><span class="material-icons icon-design" aria-hidden="true"></span>Home</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Featured</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Favorites</li>
</ul>
<ul class="right">
<li><span class="material-icons icon-design"></span>Events & Offers</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="scripts/materialize.min.js"></script>
<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 menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
This is the result I am getting out of this code:
Navigational Bar
But the Dropdown menu does not seem to work whatever I try to do. I am using Materialize CSS here along with Google Icons.
Can anyone tell me where I am going wrong or is there something wrong with my approach?
Your code should work - as evidence in this fiddle - https://jsfiddle.net/67j1sLkt/
Looks like you need to do some more debugging on your end, because this can be a number of issues. The first 2 that would come to mind are:
Absolute positioning off of the screen. You have your .dropdown-content set to position: absolute, but you have to ask yourself relative to what? I would suggest adding position: relative; to your .dropdown class
z-index. This determines the layers of elements. So it could be that the element is being shown below the background or something.
Some debugging help - if you are in Chrome, I would suggest right clicking on the Dropdown button and select Inspect. Now use your developer tools to highlight your #myDropdown and it should tell you where that element is positioned on the page (if it is shown at that point). You should also check your console for errors to see if that is what the issue is.
works for me
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable= yes">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="FoodMeets">
<meta name="keywords" content="Restaurants, Bars, Pubs, Cafes, Nightclubs, Hangout places, Hangout zones, Chat forum, Social networking">
<meta name="robots" content="index, follow">
<!--Materialize CSS-->
<link rel="stylesheet" href="http://materializecss.com/dist/css/materialize.min.css" />
<link rel="stylesheet" href="styles/style.css" />
<!--Normalize CSS-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<title>FoodMeets</title>
<style>
html,body{
font-family: Georgia, serif;
font-weight: normal;
font-size: 16px;
background-color: #eceff1;
}
nav{
background-color: white;}
nav ul a{
color: #17479e;
font-weight: normal;
}
nav ul a:hover{
text-decoration: none;
}
.nav-wrapper a:hover{
color: #17479e;
text-decoration: none;
}
.icon-design{
position:relative;
top: 4px;
font-size: 20px;
}
.right{
position: relative;
left: -40px;
}
.dropbtn{
display: inline-block;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
</style>
</head>
<body>
<nav class="z-depth-1">
<div class="nav-wrapper">
<img src="images/foodmeets_logo.png" style="position:relative; width:118px; height:69px; top:-2px"/>
<div class="container">
<ul class="left">
<li><span class="material-icons icon-design" aria-hidden="true"></span>Home</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Featured</li>
<li><span class="material-icons icon-design" aria-hidden="true"></span>Favorites</li>
</ul>
<ul class="right">
<li><span class="material-icons icon-design"></span>Events & Offers</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn" data-activates='myDropdown'>Dropdown</a>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://materializecss.com/bin/materialize.js"></script>
<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 menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}*/
$('.dropbtn').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
</script>
</body>
</html>
$(document).ready(function() {
function myFunction(){
$(".dropbtn").click(function() {
$("#myDropdown").toggle();
});
}
this much is fulfill your requirement