I need help creating a hamburger menu in javascript. What's the most efficient way to create this without using jquery? The javascript code that I have at the bottom should work but I'm missing something else.
<html>
<head>
<style>
.hamburger {
position: relative;
display: inline-block;
width: 1.25em;
height: 0.75em;
border-top: 0.18em solid #000;
border-bottom: 0.18em solid #000;
}
.hamburger:before {
content: "";
position: absolute;
top: 0.3em;
left: 0px;
width: 100%;
border-top: 0.18em solid #000;
}
</style>
</head>
<body>
<span class="hamburger"></span>
<li>Development</li>
<li>Illustrations</li>
<script type="text/javascript">
var myEl = document.getElementById('hamburger');
myEl.addEventListener('click', function() {
this.classList.toggle('activated');
}, false);
</script>
</body>
</html>
The question was
What's the most efficient way to create this without using jquery?
So pure CSS would be OK, I presume?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Hamburger Menu</title>
<style>
ul {
list-style-type: none;
position: relative;
top: -200px;
transition: all .5s ease;
margin-right: 10px;
}
.nav {
display: none;
}
#nav:checked ~ ul {
top: 0;
}
#nav {
display: none;
}
.navmenu {
position: relative;
display: block;
margin: -1ex 10px -2ex 10px;
padding: 5px 20px;
background: linear-gradient(to right, #445566, #888);
color: #fff;
z-index: 999;
/* The UX expert said so */
cursor: pointer;
}
li {
background: linear-gradient(to right, #445566, #888);
color: white;
padding-left: 5em;
padding-top: 1ex;
margin-left: -30px;
}
</style>
</head>
<body>
<div class="navigation">
<input type="checkbox" id="nav">
<label for="nav" class="navmenu">☰</label>
<ul>
<li>First entry</li>
<li>Second entry</li>
<li>Third entry</li>
<li>Fourth of July entry</li>
</ul>
</div>
</body>
</html>
The positioning is a bit ugly, admitted, but you can finetune yourself.
The navigation-list is over the top first and rolls down when you check the checkbox. The "burger" is in the label element for the checkbox and checking/unchecking the checkbox changes the value of the attribute top of the ul element.
You are right. It should be getElementsByClassName:
var myEl = document.getElementsByClassName('hamburger')[0];
Related
The problem is that I cannot use a blurred element inside another blurred element. I have a blurred header backdrop-filter: blur(3px); that has a div with a more blurry background backdrop-filter: blur(50px);, but its now work. Both are blurred by 3px.
I need to save the structure and apply the effect, please tell me how this can be done?
https://jsfiddle.net/q1aymg02/42/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
body {
background-image: url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
}
.header {
backdrop-filter: blur(3px);
padding: 15px;
border: 1px solid #FFF;
}
.header ul a li {
display: inline-block;
padding: 15px 40px;
background: #ffffffb5;
backdrop-filter: blur(50px);
}
</style>
<div class="header">
<ul>
<li>Dont Blured</li>
<li>By 50px</li>
<li>Only 3px</li>
</ul>
</div>
</body>
</html>
The backdrop-filter property in CSS is used to apply filter effects, and this behavior is inherited by all of its children. You might be interested in this approach.
body {
background-image: url(https://image.freepik.com/free-vector/space-game-background-with-landscape-planet_107791-1700.jpg);
}
.header {
backdrop-filter: blur(3px);
padding: 15px;
border: 1px solid #FFF;
}
.header ul a li {
display: inline-block;
padding: 15px 40px;
background: #ffffffb5;
backdrop-filter: blur(50px);
}
.header ul a li::before {
content: "";
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
backdrop-filter: blur(50px);
}
.header ul a li.blured::before {
content: "Dont Blured";
}
.header ul a li.by--50px::before {
content: "By 50px";
}
.header ul a li.only--3px::before {
content: "Only 3px";
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="header">
<ul>
<li class="blured">Dont Blured</li>
<li class="by--50px">By 50px</li>
<li class="only--3px">Only 3px</li>
</ul>
</div>
</body>
</html>
I am not sure if this is the result you are looking for, but use can use this approach to blur the li elements
.header ul a li {
filter: blur(1px);
display: inline-block;
padding: 15px 40px;
background: #ffffffb5;
}
It will blur everything, including the text.
I have a menu made with 3 div's nested in one div, that I am trying to have two different unordered list fade in or fade out depending on which one is showing when it is clicked. It almost works, however after i click on the menu the first time, every other time both list fade in together instead of just one.
HTML and CSS are good, but in js I've tried several variations of code to get it working, but this is the closest I can get it to work.
$(document).on('click','.menu', function()
{
$(".pagelinks").fadeOut('slow', function(){
$(".homelinks").fadeIn('slow');
});
});
$(document).on('click','.menu', function()
{
$(".homelinks").fadeOut('slow', function(){
$(".pagelinks").fadeIn('slow');
});
});
html,body
{
margin:0;
width: 100%;
overflow:hidden;
box-sizing: border-box;
height: 100%;
}
body
{
background: url(best8.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position: center;
}
header
{
width: 100%;
background-color: black;
height: 85px;
position: fixed;
}
h1
{
color:white;
position: relative;
align-content: center;
margin: 3em ;
top: 100px;
left: 595px;
}
.logo img
{
left: 0;
filter: brightness 100%;
position: fixed;
}
.menu
{
margin: auto;
margin-left: 77%;
display: block;
position: fixed;
top: 11px;
}
.nav div
{
height: 5px;
background-color: white;
margin: 4px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav
{
width: 30px;
display: block;
margin: 1em 0 0
}
.one
{
width: 30px;
}
.two
{
width: 20px;
}
.three
{
width: 25px;
}
.nav:hover div
{
width: 30px;
}
.nav:hover{
cursor: pointer;
}
.pagelinks
{
margin: auto;
margin-left: 37%;
position: fixed;
top: -10px;
display: none;
}
.pagelinks ul
{
list-style-type: none;
}
.pagelinks ul li
{
float: left;
padding:30px;
margin: auto;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
opacity: 0.6;
}
.pagelinks ul li:hover
{
color: green;
transition: 0.6s;
}
.logo img:hover
{
opacity: 0.6;
}
.homelinks
{
margin: auto;
margin-left: 54%;
position: fixed;
top: -10px;
display: block;
}
.homelinks ul
{
list-style-type: none;
}
.homelinks ul li
{
display:inline-block;
padding:30px;
margin: auto;
color: white;
font-size: 20px;
font-weight: bold;
padding-top: 40px;
}
.homelinks ul li:hover
{
color: deepskyblue;
transition: 0.6s;
}
<!DOCTYPE html>
<html>
<head>
<title>Goesta Calculators</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="main.js" async></script>
<script src="https://use.typekit.net/axs3axn.js"></script>
<script>try{Typekit.load({ async: true});}catch(e){}</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="row">
<img src="NewLogo.PNG" >
<div class="menu">
<div class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>
<nav class="pagelinks">
<ul>
<li>Mortgage</li>
<li>Auto</li>
<li>Personal</li>
<li>Refinance</li>
<li>Investment</li>
</ul>
</nav>
</div>
<nav class="homelinks">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<script src="main.js"></script>
</header>
<div>
<h1>Estimate. Plan your future.</h1>
</div>
</body>
</html>
This looks like a situation in which you could use the toggleClass() function. Create and apply a .visible class on one of the <nav> elements. On the click event, do something like $('nav').toggleClass('visible'). See https://api.jquery.com/toggleClass/.
This is just the asynchronous nature of Javascript. What's happening is when you click the '.menu' for the first time two callback functions are called which get stacked in the event loop and when they execute '.homelinks' and '.pagelinks' both fade in.
What you need to do is simply give a class named 'visible' to any one of the two ('.homelinks' or '.pagelinks') and in your function just check for the element with visible class - fade this element out and fade the other one in and after that toggle visible class to the other element and remove visible class from original element.
For instance
initially - '.homelinks' has visible
'.pagelinks' does not have it
Now on click event
fadeout - element with visible class ('.homelinks')
fadein - the other element ('.pagelinks')
remove - visible class from '.homelinks'
add - visible class to '.pagelinks'
Here check this out in Codepen
$('.menu').click(function()
{
console.log("clickk");
let pl = $('.pagelinks');
let hl = $('.homelinks');
if(pl.hasClass('visible')){
pl.fadeOut('slow',function(){
hl.toggleClass('visible');
pl.toggleClass('visible');
hl.fadeIn('slow',function(){});
});
}else{
hl.fadeOut('slow',function(){
hl.toggleClass('visible');
pl.toggleClass('visible');
pl.fadeIn('slow',function(){});
});
}
});
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I need help converting a Jquery side navigation menu into Vanilla JS. I'm a beginner with JS and have no idea how to accomplish this. Also any advice on animating the burger icon to transform into an X when clicked? Thank you. Any help is appreciated
/**********************
****NAVIGATION****
**********************/
#sidebar{
background: #151718;
width: 12.500em;
height: 100%;
display: block;
position: absolute;
left: -12.500em;
top: 0px;
transition: left 0.3s linear;
}
#sidebar.visible{
left: 0.000em;
}
nav{
text-align: center;
}
ul{
margin: 0.000em;
padding: 0.000em;
}
ul li{
list-style: none;
}
ul li a{
background: #1c1e1f;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 11.250em;
padding: 0.625em;
text-decoration: none;
text-transform: uppercase
}
ul li a:hover{
color: #4876FF;
}
#sidebar-btn{
display: inline-block;
vertical-align: middle;
width: 1.563em;
height: 1.250em;
cursor: pointer;
margin: 1.250em;
position: absolute;
top: 0.000em;
right: -3.750em;
}
#sidebar-btn span{
height: 0.063em;
background: #282828;
margin-bottom: 0.313em;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="device-width, initial-scale=1">
<title>Responsive Side Nav</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css"
</head>
<body>
<div id="sidebar">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
Substitute window.onload = function(){} for $(document).ready(); .addEventListener("click", function() {}) for .click(function() {}); document.getElementById() for jQuery(); Element.classList.toggle() for .toggleClass()
/**********************
****NAVIGATION****
**********************/
#sidebar {
background: #151718;
width: 12.500em;
height: 100%;
display: block;
position: absolute;
left: -12.500em;
top: 0px;
transition: left 0.3s linear;
}
#sidebar.visible {
left: 0.000em;
}
nav {
text-align: center;
}
ul {
margin: 0.000em;
padding: 0.000em;
}
ul li {
list-style: none;
}
ul li a {
background: #1c1e1f;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 11.250em;
padding: 0.625em;
text-decoration: none;
text-transform: uppercase
}
ul li a:hover {
color: #4876FF;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 1.563em;
height: 1.250em;
cursor: pointer;
margin: 1.250em;
position: absolute;
top: 0.000em;
right: -3.750em;
}
#sidebar-btn span {
height: 0.063em;
background: #282828;
margin-bottom: 0.313em;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="device-width, initial-scale=1">
<title>Responsive Side Nav</title>
</head>
<body>
<div id="sidebar">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
window.onload = function() {
document.getElementById('sidebar-btn')
.addEventListener("click", function() {
document.getElementById('sidebar')
.classList.toggle('visible');
});
};
</script>
</body>
</html>
how do i put my content just beneath my navigation. Every time i put some text inside the it just goes behind the green background and gets covered up by the navigation. Please kindly help me how to put my text beneath the navigation
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #1E9600;
position: fixed;
top: 0;
width: 100%;
height:75px;
}
li {
float: left;
height:75px;
border-right: 5px solid red;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: yellow;
}
.active {
background-color: #4CAF50;
}
</style>e>
</style>
<head>
<title> E-Benta </title>
<ul>
<li> <img src="logo.png"> </img>
<li>Home </li>
<li>Products
<li>About us
<li>Contact us
</ul>
</head>
<spacer>testing </spacer>
</body>
</html>
If you add to your this code:
spacer {
display: block;
margin-top: 75px;
}
Everything will be ok. Just add margin-top bigger than height of fixed menu.
Check snippet here: http://codepen.io/Dzongkha/pen/PbbvLZ
You need to leave space at top (as much as header). You can use margin top for that.
inline code would be
<spacer style="margin-top:90px;float: left;">testing </spacer>
You can create class for that and assign to spacer as well.
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #1E9600;
position: fixed;
top: 0;
width: 100%;
height:75px;
}
li {
float: left;
height:75px;
border-right: 5px solid red;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: yellow;
}
.active {
background-color: #4CAF50;
}
</style>e>
</style>
<head>
<title> E-Benta </title>
<ul>
<li> <img src="logo.png"> </img>
<li>Home </li>
<li>Products
<li>About us
<li>Contact us
</ul>
</head>
<spacer style="margin-top:90px;float: left;">testing </spacer>
</body>
</html>
As i seen here your code html structure is not proper, It should be like
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- YOUR CSS <style> or <link> tag GOES HERE -->
</head>
<body>
<!-- YOUR CONTENT ELEMENT SHOULD BE HERE -->
</body>
</html>`
body{
margin-top:60px; /* IF Navigation is fixed top you have to put margin top to body as header hight */
}
ul {
list-style-type: none;
margin: 0;
padding: 0px;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 60px;
}
li {
float: left;
border-right: 5px solid #ddd;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: #fff;
text-align: center;
padding: 22px 15px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #fff;
color:#333;
}
.active {
background-color: #4CAF50;
}
/*MAIN CONTENT CSS HERE*/
.main-content-here{
padding:15px;
}
<ul>
<li><img src="logo.png" /></li>
<li>Home </li>
<li>Products </li>
<li>About us </li>
<li>Contact us </li>
</ul>
<div class="main-content-here">
<spacer>testing</spacer>
</div>
AND last
Practice make perfect!!!! :)
I'm using JQuery to load the contents of a text file into a div however when the content goes beyond the div no scroll bar appears.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/common.css">
<script src="JS/common.js"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>The Circuit</li>
<li>Gallery</li>
<li>Further Reading</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
<div id="tabContent5"></div>
</div>
</body>
</html>
CSS:
body {
background-color: #EEEEEE;
font-family: Arial,Helvetica;
font-size: small;
height: 100%;
margin: 100px auto 0;
width: 100%;
}
#tabs {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
top: -98px;
width: 100%;
}
#tabs li {
float: left;
margin: 0 -15px 0 0;
}
#tabs a {
border-bottom: 30px solid #3D3D3D;
border-right: 30px solid transparent;
color: #FFFFFF;
float: left;
height: 0;
line-height: 30px;
opacity: 0.3;
padding: 0 40px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
#tabs a:hover {
border-bottom-color: #2AC7E1;
opacity: 1;
}
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em;
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
.activeTab {
border-bottom-color: #3D3D3D !important;
opacity: 1 !important;
}
.img {
}
JQuery:
$('a[name="#tabContent2"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$("#tab5").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
$("#tabContent1").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
$("#tabContent5").hide();
});
How can I get the scroll bar to appear?
#tabs {
overflow: scroll;
}
overflow controls how content is hidden. If set to hidden it will be hidden with no scroll bars. You want scroll to add the appropriate scroll bar.
Overflow is visible but just it overflowed by padding:
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em 0 0 2em; /*<--change to this*/
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
Try to use the famous micro clearfix instead of overflow: auto;
/*The famous micro clearfix*/
.group:before,
.group:after,
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after,
.group:after {
clear: both;
}
.group,
.group {
*zoom: 1;
}
And for your jQuery, that can be a lot shorter and, arguable, more readable like this:
$('a[name="#tabContent2"]').click(function () {
$(this).parent().parent().find("a").removeClass("activeTab");
$(this).addClass('activeTab');
$("#content > div").hide();
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
});