So I'm coding a website for school. I have coded a side menu that has options that you click. And I've also coded some of those things that you click. My problem, is even though they exist, it says "filler.html does not exist." when I click. Even though they exist. So, here's my code. If you have any further questions, ask away.
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
body {
font-family: "Lato", sans-serif;
}
.ABox {
background-color: black;
color: lightgrey;
width: auto;
padding: 1%;
}
.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
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
.closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px !important;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<div id="mySidenav" class="sidenav">
×
<br>
The beginning of logic and rhetoric
What is rhetoric?
What is classics?
<a href="/timeline.html" Timeline</a>
</div>
<div class="ABox">
<h2>Classics and Rhetoric</h2>
</div>
<p style="background-color:black;color:lightgrey;width:200px;padding:1%;"></p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
Try removing the leading "/". This means absolute directories, when you want relative.
The beginning of logic and rhetoric
What is rhetoric?
What is classics?
Timeline
Replace:
From:
<a href="/timeline.html" Timeline</a>
To:
Timeline
Related
Thats not all... when I inspect through chrome for iPhone X it appears correctly and so for desktop as well. I'm using dreamweaver and when I choose to view directly from my device is where I see the problem. Image is directly from mobile device. Also wanting to move it a little out the corner, but nothing. Please help! [1]: https://i.stack.imgur.com/pzbyL.jpg
.sidenav {
height:50%;
width: 0%;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 40px;
}
.sidenav a {
padding: 50px 8px 8px 60px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
bottom: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#button .span{
margin:auto;
padding-top: 2em;
padding-bottom: 5em;
left:0;
}
<div id="button">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">menu</span>
</div>
<div id="mySidenav" class="sidenav">
×
About
Book
Portfolio
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
I need to create a sidebar that can be able to close it clicking on the X button and clicking anywhere
I am able to close the navbar by clicking on the X button in the sidebar. How can I change my javascript to be able to close the sidebar by clicking anywhere on the page?
function openNav() {
document.getElementById('mySidenav').style.width="250px";
}
function closeNav() {
document.getElementById('mySidenav').style.width="0"
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a{
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover{
color: #F1F1F1;
}
.sidenav .closebtn{
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#media screen and (max-height: 450px){
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<body>
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>
</body>
You can listen to clicks on your entire page through:
document.body.onclick = function () {
// Close Nav here
}
However, doing this will cause your entire page to try to close the nav when clicked – even your open button.
You can exclude certain elements from listening to events set on parent elements through the e.stopPropagation() method. See an example implementation below.
Please also note that your body will not start off 100% of your window's height due to the lack of content, and thus will not respond to clicks everywhere on the page. You can fix this by using setting the CSS property body: 100vh.
function openNav(e) {
e.stopPropagation();
document.getElementById('mySidenav').style.width="250px";
}
function closeNav(e) {
e.stopPropagation();
document.getElementById('mySidenav').style.width="0"
}
document.body.onclick = closeNav;
document.getElementsByClassName('openbtn')[0].onclick = openNav;
document.getElementById('mySidenav').onclick = openNav;
document.getElementsByClassName('closebtn')[0].onclick = closeNav;
body {
height: 100vh;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a {
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover {
color: #F1F1F1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<body>
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" class="openbtn">cart</span>
</body>
Easily you can add overlay element when the sidebar is shown.
function overlay(isShow){
var elm = document.getElementById('overlay')
if (isShow) {
elm.style.display = 'block';
} else {
elm.style.display = 'none';
}
}
function openNav() {
overlay(true);
document.getElementById('mySidenav').style.width="250px";
}
function closeNav() {
overlay(false);
document.getElementById('mySidenav').style.width="0"
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 3;
top: 0;
right: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
background-color: #111;
}
.sidenav a{
display: block;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
transition: 0.3s;
}
.sidenav a:hover{
color: #F1F1F1;
}
.sidenav .closebtn{
position: absolute;
top: 0;
right: 25px;
font-size: 35px;
margin-left: 50px;
}
#overlay{
z-index: 2;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: none;
}
#media screen and (max-height: 450px){
.sidenav{padding-top: 15px;}
.sidenav a{font-size: 18px;}
}
<div id="mySidenav" class="sidenav">
×
CARRITO 1
CARRITO 2
</div>
<h2>Animated Sidenav</h2>
<p>Click on the element below to open sidenav</p>
<span style="cursor: pointer;" onclick="openNav()">cart</span>
<div id="overlay" onclick="closeNav()"></div>
I want to stop child elements from wrapping when animating. I want that they should stay as it is and not dance on the screen by wrapping. Here is my jsfiddle:
https://jsfiddle.net/DTcHh/39734/
This is my CSS:
body {
font-family: "Lato", sans-serif;
}
.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;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
Do you know how could I potentially fix this?
Edit: I don't want hacks by compulsorily aligning all content in my sidenav as display:block
Here is the updated fiddle: https://jsfiddle.net/DTcHh/39738/
I want the UL to show up inline-block. Is this possible?
Display block on your anchors should do it.
#media screen and (max-height: 450px)
(index):82
.sidenav a {
font-size: 18px;
display: block;
}
Edit - following comments
Further to the OP's requirements where the anchors should stay inline and not 'dance' I animated the position of the sidebar instead of the width.
function openNav() {
document.getElementById("mySidenav").style.left = "0";
}
function closeNav() {
document.getElementById("mySidenav").style.left = "-250px";
}
You just need to add display:block to the anchor's style
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display:block; //this is added
}
Or you can add it those which are direct descendants of .sidenav
.sidenav > a {
display:block; //this is added
}
Demo for I don't want hack
document.getElementById("open").onclick = openNav;
document.getElementById("close").onclick = closeNav;
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
body {
font-family: "Lato", sans-serif;
}
.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;
}
ul {
display: block;
white-space: nowrap;
}
ul li {
display: inline-block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="mySidenav" class="sidenav">
<ul>
<li>I</li>
<li>don't</li>
<li>want</li>
<li>hack</li>
</ul>
×
About
Services
Clients
Contact
</div>
<h2>Animated Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span id="open" style="font-size:30px;cursor:pointer">☰ open</span>
Edit
Just add this line to your ul's css
ul {
white-space: nowrap;
}
I have got the following html and css. The problem is when it is run the full screen menu only appears in the nav bar. The problem only appears when using safari.
I can solve the problem my getting rid of
.nav {
position: fixed;
}
but I still want the nav bar to be fixed at the top of the page.
.nav {
font-family: Arial-BoldMT;
font-size: 16px;
list-style: none;
text-align: right;
padding: 0px 0 0px 0;
box-shadow:0px 1px 1px #d3d3d3;
background-color: white;
width: 100%;
z-index:0.1;
overflow: auto;
position: fixed;
top: 0;
}
.nav p {
float: left;
margin-left: 40px;
color: #333333;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.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;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
.slider {
font-size:30px;
cursor:pointer;
float:right;
margin-right: 40px;
}
#media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div class="nav">
<p>LIAM VINSON</p>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
HOME
ABOUT
PHOTOGRAPHY
PORTFOLIO
CONTACT
</div>
</div>
<span class="slider" onclick="openNav()">☰</span>
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</div>
z-index:0.1;
is not valid css.
z-index must be an integer - either negative or positive. Chances are most browsers are just treating it as 0, but Safari don't know what to do with it. So, change it to an integer like
z-index:1;
and set your overlay to z-index:2 (though I would recommend spacing these numbers out in case you have to index additional elements. ie. z-index:100; and z-index:200;)
Setting it as fixed, with top at 0, should fix it to the top of page for you once you correct that z-index issue you got there.
The problem was
.nav {
overflow: auto;
}
It stopped the overlay from being shown outside of the nav div.
If I try to make icon go up using margin top : -35px; under #menu, when I click on it the icon side navigation doesn't work ,but when i give upto -15px the side navigation bar gets displayed. I am not able to figure out the mistake!
Thanks in advance!
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
#menu{
float: right;
margin-top: -15px;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
opacity:0.5;
background-color: #ffffff;
overflow-x: hidden;
transition: 0.5s;
padding-top: 90px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #808080;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<span style="font-size:30px;cursor:pointer" onclick="openNav()"><i class="material-icons material-spec-icon" title="Show navigation">menu</i></span>
<div id="mySidenav" class="sidenav">
×
About
Services
Process
Portfolio
</div>
Try changing the display from block to inline on your a tags:
.sidenav a {
display: inline;
}
Then you can remove the margin top.