I am working on a HTML site, and I want to create a off-canvas menu for navigation.
However the code I've written won't work at all.
I have tried to re-write my script and the HTML/CSS document, I've also tried to make a local webbserver to host the html, css and the javascript tosee if that would change anything, but it didn't.
I have also tried to follow some coding guides on youtube and w3schools, but I can't get it to work. Please help me.
Thank you in advance!
<body>
<div id="main">
<div id="header">
<div id="hdt">
</div>
<div id="hdb">
<span style="cursor: pointer" onclick="openNav">
☰ Menu
</span>
<div id="mysidenav" class="sidenav">
×
Home
Parts
Services
About us
</div>
</div>
</div>
<div id="contain">
</div>
<div id="footer">
</div>
</div>
<script type="text/javascript">
function openNav() {
document.getElementById("mysidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mysidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "white";
}
</script>
</body>
</html>
CSS file:
#main {
width: 1500px;
height: 950px;
transition: margin-left .5s
}
#header {
width: 1500px;
height: 100px;
}
#hdt {
height: 75px;
background-color: white;
}
#hdb {
height: 25px;
background-color: limegreen;
border: 1px solid black;
transition: margin-left .5s;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .exit {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#contain {
width: 1500px;
height: 700px;
}
#footer {
width: 1500px;
height: 150px;
background-color: black;
}
You forgot to include the opening <html> tag in your code. But I guess that's a copy & paste error ;)
To resolve your actual problem, simply change:
<span style="cursor: pointer" onclick="openNav">
☰ Menu
</span>
to:
<span style="cursor: pointer" onclick="openNav()">
☰ Menu
</span>
Here's a working fiddle:
https://jsfiddle.net/r71n6cs9/12/
Related
I am trying to generate a sidebar which hides automatic by clicking every other things except the sidebar (with js or css).
my code is:
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
</script>
...
<div id="mySidenav" class="sidenav">
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
and css is :
<style>
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
</style>
i used HTML, JavaScript, and CSS
thanks
Try below solution.
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
window.addEventListener('click', function(e){
if (!document.getElementById('mySidenav').contains(e.target) && !document.getElementById('myMenu').contains(e.target)){
// Clicked in box
document.getElementById("mySidenav").style.width = "0px";
} else{
// document.getElementById("mySidenav").style.width = "0px";
}
});
</script>
<div id="mySidenav" class="sidenav">
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" id="myMenu" onclick="openNav()">☰ open</span>
1) Add a click event to your body
2) Check whether the target of the click has the class '.sidenav', or if it has a parent with that class.
3) If not, hide the sidebar, for example by setting 'display' to 'none'
you can try something like this
<style>
#mySidenav {
display: none;
}
</style>
<script>
document.body.addEventListener('click', function (e) {
if (e.target.parentNode.id === 'mySidenav') {
document.getElementById("mySidenav").style.display = "block";
e.preventDefault();
return;
}
document.getElementById("mySidenav").style.display = "none";
}, true);
function openNav() {
document.getElementById("mySidenav").style.display = "block";
}
</script>
<div id="mySidenav" class="sidenav">
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
$(function() {
$("#ham-icon").on("click", function(e) {
$("#mySidenav").addClass("cstm-w");
e.stopPropagation()
});
$(document).on("click", function(e) {
if ($(e.target).is("#ham-icon") === false) {
$("#mySidenav").removeClass("cstm-w");
}
});
});
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.cstm-w {
width: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav">
About
Services
Clients
Contact
</div>
<span style="font-size:30px;cursor:pointer" id="ham-icon">☰ open</span>
I am working on this website where I want to add a form which opens once you press the login button. The form was created using an online form builder which provides an embed code for embedding into your website. I have provided the embed code along with the html/css for my website.
The HTML:
<div id="mySidenav" class="sidenav">
×
About
Contact
Help
</div>
<!-- <div id="main">
<span class="openbutton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
-->
<div class="header">
<span class="openbutton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
<div class="header-right">
<a class="active" href="#home">Login</a>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginRight = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginRight= "0";
}
</script>
CSS:
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: dodgerblue;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 40px;
text-decoration: none;
font-size: 25px;
color: white;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 0;
font-size: 36px;
margin-right: 30px;
}
#main {
transition: margin-left .3s;
padding: 20px;
}
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.header {
overflow: hidden;
background-color: dodgerblue;
padding: 25px 20px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: dodgerblue;
color: white;
}
.header-right {
float: right;
}
embed code for the form:
<a name="form691431825" id="formAnchor691431825"></a>
<script type="text/javascript" src="https://fs3.formsite.com/include/form/embedManager.js?691431825"></script><script type="text/javascript">
EmbedManager.embed({
key: "https://fs3.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6IgzQCoK79H%2B6%2F3bsAv%2BgQi&691431825",
width: "100%",
mobileResponsive: true
});</script>
First of all you need to rephrase the text of your post as you only make remarks without asking any question, having people to guess what it is you need.
Assuming you need a trigger to open your login window, here's what I did to make it work:
Modify the script with EmbedManager.embed(..); and put it inside a function called openLogin()
function openLogin() {
EmbedManager.embed({
key: "https://fs3.formsite.com/res/showFormEmbed?EParam=iGs2D6QRb6IgzQCoK79H%2B6%2F3bsAv%2BgQi&691431825",
width: "100%",
mobileResponsive: true
});
}
Now you have a javascript function you can use to open your login screen. Once you have choosen an element (a,button,div,etc) you want to use as the trigger add propertiesname="form691431825" id="formAnchor691431825" onclick="javascript:openLogin()", remove the original a-element and your are good to go.
The result does not look too pretty, leaving you with the next fun puzzle to chew on...
I have another question on you. I decided to create something like web-fanpage of Mr.Robot. I have wanted to practice html and css + learn JS. But there is a problem I cant solve. There is space between divs. I tried many tutorials how to remove it but none of them helped.
body {
width: 100%;
height: 100%;
margin-left: 0px;
margin-top: 0px;
}
#main {
height: 100%;
width: 100%;
}
header {
background: black;
padding: 1px;
max-width: 100%;
}
header p {
margin-left: 50px;
font-family: 'Inconsolata', monospace;
font-size: 50px;
text-align: center;
}
.barva {
color: #B20707;
}
.menu {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background: black;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.menu a {
display: block;
text-decoration: none;
color: white;
font-size: 20px;
padding: 8px;
transition: 0.3s;
margin-left: 20px;
font-family: 'Poppins', sans-serif;
}
.menu a:hover {
color: #B20707;
}
.Openbt {
cursor: pointer;
position:absolute;
top: 0;
left: 0;
margin-top: 20px;
margin-left: 10px;
float:left;
color: #B20707;
font-size: 50px;
}
.menu .closebt {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #B20707;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
}
.domu {
height: auto;
}
img
{
max-width: 100%;
}
.about {
height: auto;
max-width: 100%;
min-height: 250px;
background: black;
}
<!doctype html>
<html lang="cs-cz">
<head>
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>Yaaa boiii</title>
</head>
<body>
<header>
<p style="color:white "><span class="barva">ID:_ROOT:</span>Our<span class="barva">_democracy_</span>has<span class="barva">_</span><span class="barva">been</span>_hacked</p>
<div class=Openbt>
<span onclick="openNav()"><i class="fa fa-bars"></i></span>
</div>
</header>
<div id="mySidemenu" class="menu">
×
Home
Home
Home
Home
Home
</div>
<div id="main"> <!-- Veškerý kontent -->
<div class="domu">
<img src="obrazky/robot.jpg" width="1920" height="1000" />
</div>
<div class="about">
</div>
</div>
<script>
function openNav() {
document.getElementById('mySidemenu').style.width = "250px";
document.getElementById('header').style.marginLeft = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById('mySidemenu').style.width = "0px";
document.getElementById("main").style.marginLeft = "0px";
}
</script>
</body>
</html>
Maybe you noticed that I had to set some width and height to the picture. How do I set it height 100% and width 100%? I tried to type it into .domu but it didnt work.
Two solutions both involve changing your css;
1) You can change your body background color to match the about background color. This can be done by adding the following to your css.
body
{
background: black;
}
2)You can use the display: block; style on your img tag.
<img src="obrazky/robot.jpg" width="1920" height="1000" style="display: block;"/>
Good luck
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
☰
You have to explain it better but I think I understand what you want.
Just use display block.
Something like this :
function openNav() {
var menu = document.getElementById("myNav").style.display;
If (menu == "block") {
menu="none";
}else{
menu="block";
}}
// Open and close div
☰
I'm not sure if the syntax is right because I'm writing this from my phone.
But I think it's works.
Lets me know.
<div href="javascript:void(0)" class="closebtn" onclick="toggleNav()">☰</div>
<div id="myNav" class="overlay">
<div class="overlay-content">
About
Services
Clients
Contact
</div>
</div>
<style>
html, body{
margin: 0;
}
.overlay {
height: 0%;
width: 100%;
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
}
.overlay-content {
position: relative;
text-align: center;
margin-top: 50px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.closebtn{
position: absolute;
float: right;
right: 15px;
top: 10px;
font-size: 30px;
cursor: default;
color: #eee
}
</style>
<script>
function toggleNav(){
var myNav = document.getElementById("myNav");
if(!myNav) return;
myNav.style.display = myNav.style.display.toLowerCase() != 'none'? 'none' : 'block';
}
</script>
it should be toggle function
function toggleNav(){
var myNav = document.getElementById("myNav");
if(!myNav) return;
myNav.style.display = myNav.style.display.toLowerCase() != 'none'? 'none' : 'block';
}
☰
<div id="myNav" style="width: 100px; height: 100px; background: #ff0000; display:none;"></div>
A part of a webpage i am designing consists of several div elements placed side by side. Each one contains an image. I want to summon a drop-down menu when the user's mouse enters the div. However, testing it with a simple "print hello" function didn't yield the results i was expecting.
At this point, the images are placed properly, and their size is adjusted just like i specified. However, the cursor is not pointerand the function test doesn't run when the mouse enters the div. I've had this problem with click events in the past and i always tried to find a way around it. Can someone explain why it won't work?
Here's the html
#container {
background-color: black;
border-radius: 20px;
display: inline-block;
position: fixed;
width: 100%;
z-index: 2;
top: 0;
}
#icon {
background-color: burlywood;
border-radius: inherit;
border-radius: 20px;
}
#menu a {
font-size: 30px;
font-family: "Arial";
color: white;
text-decoration: none;
margin-left: 50px;
}
#flag {
width: 50px;
height: 50px;
}
#menu a:hover {
color: #e55d00;
}
body {
height: 2000px;
background-image: url("background.jpg");
}
#btt {
bottom: 0;
color: white;
position: fixed;
text-decoration: none;
}
#contain {
display: inline-block;
height: 1000px;
width: 100%;
max-width: 100%;
position: absolute;
}
#sidemenu {
width: 0;
height: 100%;
z-index: 1;
background-color: black;
transition: width 1s;
padding-top: 200px;
position: fixed;
top: 0;
left: 0;
overflow-x: hidden;
}
#sidemenu a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
#sidemenu a:hover {
color: red;
}
#language {
margin-left: 250%;
}
#title a {
color: #e55d00;
text-decoration: none;
}
#title {
font-size: 50px;
text-align: center;
border-radius: 20px;
display: inline-block;
padding: 10px;
}
#projects {
margin-top: 200px;
}
#current {
width: 210px;
height: 200px;
cursor: pointer;
}
#current img {
width: inherit;
height: inherit;
}
#progress {
margin-left: 200px;
width: 210px;
height: 200px;
cursor: pointer;
}
#progress img {
width: inherit;
height: inherit;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Projects</title>
<link type="text/css" rel="stylesheet" href="projects.css">
</head>
<body>
<div id="container">
<table>
<tr>
<td>
<div id="icon">
<img src="img.png">
</div>
</td>
<td>
<div id="title" title="Home">
Electrocats
</div>
<div id="menu">
News
Projects
About Us
menu item 4
</div>
</td>
<td>
<div id="language">
<a href="#" title="Translate to Greek">
<img id="flag" src="Greece-icon.png">
</a>
</div>
</td>
</tr>
</table>
</div>
<div id="contain">
<div id="sidemenu" onmouseleave="hideMenu()">
contact
Films
</div>
</div>
<!-- here is the code with the problem -->
<div id="projects">
<table>
<tr>
<td>
<div id="current" onmouseenter="test">
<img src="high-voltage.png">
</div>
</td>
<td>
<div id="progress" onmouseenter="test">
<img src="engineering1.jpg">
</div>
</td>
</tr>
</table>
</div>
<a id="btt" href="#top">Back to top</a>
<script>
function summonMenu() {
var menu = document.getElementById("sidemenu");
menu.style.width = "400px";
}
function hideMenu() {
var menu = document.getElementById("sidemenu");
menu.style.width = "0";
}
function test() {
console.log("hello");
}
</script>
</body>
</html>
Hello See the below Fiddle Here I did this using alert but you can do the same using console.log Hope It helps you .
Div Hover Fiddle
also Added a fiddle with a dropdown list visible on mouse enter event what are you trying to made i guess so .
dropdown Fiddle
In the end, setting the position of the div that contains the images to absolutesolved the issue. I've yet to understand why, but i believe it has something to do with the z-index values specified in the css file. I would really appreciate it if someone could explain why the issue was solver this way.