Below is my html/css. Feel free to see how it looks in your ide(I use vscode). When I click on the hamburger menu in the shrunken screen I want the 'Home' and 'About' text in the nav to appear and stack on top of eachother. I'm really just struggling with the JS(making the text appear once you click on the hamburger menu), I can try to implement the stacking afterwards but if you want to give it a shot go right ahead. Anything will help, and if you can implement the menu with JS that'll be amazing, that's what I've been trying to get down through this project. good day.
'''''''
html
'''''''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Backroads || Tour Company</title>
<!-- favicon -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon" />
<!-- font-awesome -->
<link
rel="stylesheet"
href="./fontawesome-free-5.12.1-web/css/all.min.css"
/>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<!-- styles css -->
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- header -->
<main>
<nav class="topNav">
<ul>
<div>
<li><img src="./images/favicon.ico" alt=""></li>
</div>
<button class="hamburger" id="hamburger" onclick="showText()">
<i class="fas fa-bars"></i>
</button>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</main>
<!-- js -->
<script src="./js/app.js"></script>
</body>
</html>
'''''''
css
'''''''
/*
===============
Fonts
===============
*/
#import url("https://fonts.googleapis.com/css?family=Lato:400,700&display=swap");
/*
===============
Variables
===============
*/
:root {
/* primary/main color */
--clr-primary-5: hsl(185, 62%, 45%);
--clr-white: #fff;
--transition: all 0.3s linear;
--spacing: 0.25rem;
--ff-primary: "Lato", sans-serif;
}
/*
===============
Global Styles
===============
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-primary);
background: var(--clr-white);
color: var(--clr-grey-1);
line-height: 1.5;
font-size: 0.875rem;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
}
img {
width: 100%;
display: block;
}
h1,
h2,
h3,
h4 {
letter-spacing: var(--spacing);
text-transform: capitalize;
line-height: 1.25;
margin-bottom: 0.75rem;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.25rem;
}
h4 {
font-size: 0.875rem;
}
p {
margin-bottom: 1.25rem;
color: var(--clr-grey-5);
}
#media screen and (min-width: 800px) {
h1 {
font-size: 4rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1rem;
}
body {
font-size: 1rem;
}
h1,
h2,
h3,
h4 {
line-height: 1;
}
}
/* global classes */
.btn {
text-transform: uppercase;
background: var(--clr-primary-5);
color: var(--clr-white);
padding: 0.375rem 0.75rem;
letter-spacing: var(--spacing);
display: inline-block;
transition: var(--transition);
font-size: 0.875rem;
border: 2px solid transparent;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.btn:hover {
color: var(--clr-primary-1);
background: var(--clr-primary-8);
}
/*
===============
Navbar
=============== */
/* background of navbar */
nav ul{
background-color: grey;
display: flex;
flex-direction: row;
padding: .5rem;
border: white solid;
justify-content: flex-end;
}
nav ul li {
padding: 0 .5rem;
}
/* icon image */
nav div{
margin-right: auto;
}
nav div li img {
width: 2rem;
}
.hamburger{
background-color: transparent;
border: 0;
cursor: pointer;
font-size: 20px;
visibility: hidden;
}
nav li a{
color: var(--clr-primary-5);
}
.hamburger:focus{
outline: none;
}
#media screen and (max-width: 992px) {
nav li a {
display: none;
}
.hamburger{
visibility: visible;
}
}
You can give an id to your menu icon.
Then get this icon with DOM in ur js and add an event listener for listening 'click' on this element.
If clicked you will make visible your hamburger menu.
const burger = document.getElementById("hamburger");
burger.addEventListener("click", () => {
burger.textContent = "Justin";
burger.style.backgroundColor = "#ebd";
});
you can listen click on an specific element and then you can make sthing after that like this.
The sidebar looks like the below snippet. What should i add to this code, like a wrapper to make it responsive in mobile screen?
.sidebar{
position: fixed;
left: 0px;
width: 314px;
height: 100vh;
background-color: #002438;
box-shadow: hsl(0, 0%, 75%) 7px 2px 15px;
}
.sidebar li{
margin-top: 45px;
font-size: 24px;
color: white;
text-align: center;
text-decoration: none;
}
.sidebar a{
color: white;
text-decoration: none;
}
.sidebar li :hover{
color: #00fff2;
}
.sidelist{
display: flex;
flex-direction: column;
padding-top: 20px;
margin-top: 40px;
text-align: center;
}
.active a{
width: 230px !important;
display: block;
margin: 10px auto;
font-weight: bold;
padding: 5px 10px;
border-radius: 50px;
background: #fff;
}
<div class="sidebar">
<ul class="sidelist">
<li>DASHBOARD</li>
<li class="active">CUSTOMER</li>
<li>LEADS</li>
<li>REPORTS</li>
<li>SMS</li>
<li>PROFILE</li>
</ul>
</div>
This is my sidebar. How do i turn it into a hamburger icon in mobile screens, which when clicked or dragged, moved from left to right side with all the sidebar.
What I might do is use a media query. If you want this to just be an icon button with the little hamburger icon, make the icon button above or below where you made this sidebar. In your css that you have there, give it another class maybe something like this:
.menuIcon {
display: 'none';
/* your other styles here */
}
Then the media query (you can make more than one) do something like this:
#media only screen and (max-width: 1000px) {
.menuIcon {
/* styles */
}
.sidebar {
display: 'none';
/* styles */
}
}
Of course change the media query to match what size screen you want to adjust for, and style how you want.
The webpage, when in mobile view, is getting stuck when I attempt to scroll vertically. In #media screen and (max-width: 952px) {} I have overflow-x: hidden;, width: 100%;, and position: absolute; set in order to prevent horizontal scrolling because the mobile nav bar is hidden to the right. I've attempted to add overflow-y: scroll; and overflow-y: auto; to the code and even added !important and I am still experience vertical scroll issues.
You can view a live version of the webpage at jacpel5.dreamhosters.com
HTML for the 'Photography' page:
<!DOCTYPE html>
<html>
<head>
<title>Jacki Leigh - Photography</title>
<!-- title appears in browser tab -->
<link href="myStyleSheet.css" rel="stylesheet" type="text/css">
<!-- linking to myStyleSheet.css file for styling -->
<link rel="stylesheet" href="https://use.typekit.net/swe6opx.css">
<!-- font family "Operetta 8" -->
<link rel="stylesheet" href="https://use.typekit.net/opw2jnd.css">
<!-- font family "Relation Two" -->
<link href="photos/favicon.png" rel="icon" type="image/gif" sizes="16x16">
<!-- linking to the favicon -->
<meta charset="UTF-8">
<!-- UTF-8 is the default character set for HTML5 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport gives browser instructions on how to control the page's dimensions and scaling -->
<!-- width=device-width sets the width of the page to follow the screen-width of the device --->
<!-- 1.0 scale sets the initial zoon level when the page is first loaded by the browser -->
<meta name="robots" content="index, follow">
<!-- allows the spider of a search engine to index the whole website -->
<meta name="keywords" content="Jacki Leigh, photography, light painting, long exposure, music, music photography, portrait photography, portraits, panasonic, camera, photos, live music photography, live music, freelance photographer, freelance, photographer, freelance photography">
<meta name="description" content="Jacki Leigh is an LA based freelance photographer. She specializes in concert photography and light painting.">
<!-- Use no more than 200 characters. This is the description that appears in the search results on search engines -->
<meta name="author" content="Jacki Leigh Designs">
</head>
<body>
<header>
<div class="container">
<a href="index.html">
<img src="photos/logo.png" alt="Jacki Leigh Logo" class="headerLogo">
</a>
<nav>
<ul class="nav-links">
<!-- <li>Home</li> -->
<li>Photography</li>
<li>Graphic Design</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</header>
<br />
<div class="section">
<ul class="grid">
<li>
<div class="box p-cov1">
<a href="concert-photography.html">
<div class="info">
<h3>Concert Photography</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov2">
<a href="light-painting.html">
<div class="info">
<h3>Light Painting</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov3">
<a href="portraits-people.html">
<div class="info">
<h3>Portraits & People</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov4">
<a href="nature.html">
<div class="info">
<h3>Nature</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov5">
<a href="animals.html">
<div class="info">
<h3>Animals</h3>
</div></a>
</div>
</li>
<li>
<div class="box p-cov6">
<a href="special-events.html">
<div class="info">
<h3>Special Events</h3>
</div></a>
</div>
</li>
</ul>
</div>
<br />
<br />
<footer>
<a href="https://www.facebook.com/JackiLeighDesigns/" target="_blank">
<img src="photos/fbicon.png" alt="Facebook Icon" class="fbIcon">
</a>
<a href="https://www.instagram.com/jacki_leigh/" target="_blank">
<img src="photos/instaicon.png" alt="Instagram Icon" class="instaIcon">
</a>
<br />
<small>copyright © <script type="text/javascript">document.write(new Date().getFullYear());</script> Jacki Leigh Designs</small>
</style>
</footer>
<script src="javascript/app.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
background-color: #FCFCFC;
font-family: "operetta 8", serif;
font-weight: 300;
font-style: normal;
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
position: absolute;
}
.container { /* logo and text/links in navigation bar */
width: 90%;
margin: 0 auto;
}
.headerLogo { /* logo in navigation bar */
/* floating logo to the left */
/* full canvas photo is 2057px wide & 643px in height */
float: left;
padding: 10px 0; /* gives a little space on top and bottom of the logo */
width: 164.56px; /* 8% of the full size (2057px) */
height: 51.44px; /* 8% of the full size (643px) */
}
header {
background: #E9E9E9;
opacity: 1;
}
header::after {
/* used because .logo and nav are float left/right, shrinking the container to 0px, this fixes that */
content: '';
display: table;
clear: both;
}
nav {
/* floating list (menu) items to the right */
float: right;
}
nav ul {
margin: 0; /* takes space off top and bottom header background */
padding: 0; /* takes space off the sides */
list-style: none; /* removes bullet point styling */
}
nav li {
display: inline-block; /* places list horizontal, not vertical */
margin-left: 30px; /* specifies the spacd between the list items */
padding-top: 25px; /* not required - used for the hover effect for this particular nav bar */
position: relative; /* allows the nav a::before to keep the hover line relative to the text length */
}
nav ul li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
nav ul li a:hover {
color: #3f003c;
}
nav ul li a::before {
content: '';
display: block;
height: 2px;
width: 100%;
background-color: #3f003c;
position: absolute; /* absolute width 100% shoots this to 100% of the screen size (they run together) */
top: 0;
width: 0%;
transition: all ease-in-out 250ms; /* slows down the way the hover bar appears */
}
nav ul li a:hover::before {
width: 100%;
}
a {
text-decoration: none;
}
.burger {
display: none;
cursor: pointer;
display: static;
z-index: 200;
}
.burger div {
width: 25px;
height: 3px;
background-color: #3f003c;
margin: 5px;
transition: all 0.5s ease; /* adds transition to Burger turning into an X */
}
.mainLogo {
/* class for logo/image on index page */
width: 75%;
height: 60%;
opacity: 0.9;
}
.mainLogoDiv {
/* class for the div containing the logo/image on index page */
text-align: center;
}
.section {
max-width: 1920px;
margin: 0 auto;
padding: 1% 2%;
}
.grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.grid:after {
clear: both;
}
.grid:after, .grid:before {
content: '';
display: table;
}
.grid li {
width: 200px;
height: 200px;
display: inline-block;
margin: 20px;
}
.box {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
border-radius: 5px;
-webkit-transition: 0.3s ease-in-out,
-webkit-transform 0.3 ease-in-out;
-moz-transition: 0.3s ease-in-out,
-moz-transform 0.3 ease-in-out;
transition: 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.box:hover {
transform: scale(1.05);
}
.p-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/mj-cover.jpg);
}
.p-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/lp-cover.jpg);
}
.p-cov3 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/pp-cover.jpg);
}
.p-cov4 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/la-cover.jpg);
}
.p-cov5 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/an-cover.jpg);
}
.p-cov6 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/photography/covers/se-cover.jpg);
}
.g-cov1 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/dc-cover.jpg);
}
.g-cov2 {
background: linear-gradient(rgba(65, 41, 63, 0.75), rgba(65, 41, 63, 0.75)),
url(photos/graphic/covers/ww-cover.jpg);
}
.info {
position: absolute;
width: 100%;
height: 100%;
}
.info h3 {
font-family: "Operetta 8", serif;
font-weight: 400;
color: #e0e0e0;
text-shadow: 1px 1px black;
font-size: 20px;
margin: 0 auto;
padding: 85px 0px 0 0px;
text-align: center;
text-transform: uppercase;
width: 100%;
}
.photoGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minMax(250px, 1fr));
grid-gap: 5px 5px;
width: 90%;
margin: auto;
}
.photoColumn {
display: block;
}
.contact {
margin: 0 auto;
}
.contact-me {
text-align: center;
}
.contact-me img {
width: 60%;
max-width: 450px;
padding: 10px 0 20px 0;
}
form {
text-align: left;
font-size: 13.5px;
padding: 0px 20px 20px 20px; /* gives space on all text contained within border */
margin: 0 auto;
line-height: 30px;
height: 80%;
width: 70%;
max-width: 500px;
overflow: auto;
text-transform: uppercase;
color: #3f003c;
}
input[type=submit] {
background-color: #3f003c;
color: #E9E9E9;
border-radius: 5px;
height: 35px;
width: 100px;
font-size: 15px;
text-transform: uppercase;
}
/* the below syntax removes the blue border in the input boxes when selected */
input:focus, textarea:focus, select:focus {
outline-offset: 0px !important;
outline: none !important;
}
/* the two syntaxes below change the color of highlighted text */
::selection {
background: #E9E9E9; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #E9E9E9; /* Gecko Browsers */
}
/* the below set of syntaxes removes the background color when autofill is used */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
#name {
height: 30px;
width: 100%;
}
#email {
height: 30px;
width: 100%;
}
#message {
height: 60px;
width: 100%;
}
footer {
color: #7F7887;
text-align: center;
text-decoration: none;
}
.fbIcon {
/* class for the facebook icon in the footer */
padding: 0 2px 8px 0;
width: 25px;
height: 25px;
opacity: .7;
}
.instaIcon {
/* class for the instagram icon in the footer */
padding: 0 0 8px 0;
width: 25px;
height: 25px;
opacity: 0.7;
}
#media screen and (max-width: 952px) {
.nav-links {
position: absolute;
right: 0px;
height: 100%;
top: 70px;
background-color: #E9E9E9;
opacity: .95;
display: flex;
flex-direction: column;
align-items: center;
width: 35%;
transform: translateX(100vw);
transition: transform 0.5s ease-in;
z-index: 100;
}
.nav-links li {
margin-left: 0px;
opacity: 0;
padding: 45px 0px 0px 0px;
}
.nav-links li a {
color: #7F7887;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
.nav-links li a:hover {
color: #3f003c;
}
nav ul li a::before {
display: none;
}
.burger {
display: block;
padding: 20px;
z-index: 150;
position: static;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
/* 3 code blocks below are to set up the hamburger menu to turn into an X once it's been clicked and the menu slides in from the right */
/* this takes the top hamburger line and turns it -45 degrees to form one part of the X */
.toggle .line1 {
transform: rotate(-45deg) translate(-5px,6px);
}
/* this takes the middle hamburger line and turns it to 0 opacity */
.toggle .line2 {
opacity: 0;
}
/* this takes the bottom hamburger line and turns it 45 degrees to form the second part of the X */
.toggle .line3 {
transform: rotate(45deg) translate(-5px,-6px);
}
JavaScript:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//Toggle Nav
nav.classList.toggle('nav-active');
//Animate Links
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
//Burger Animation
burger.classList.toggle('toggle');
});
}
navSlide();
I think your problem is that you're targeting both the html and body elements with your scroll settings #media screen and (max-width: 952px) - this causes a scroll within a scroll effect, which can be buggy in mobile views.
I was able to fix this in the inspector by removing html moving the body styles outside of the media query and changing the transform line in the .nav-links styles from 100% to 100vw. They should work the same in this scenario but vw (viewport width) seems to work better.
body {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
#media screen and (max-width: 952px) {
.nav-links {
transform: translateX(100vw);
}
}
I'm having an issue with a automatic typing function that I have created for this website. Everything works great but when it finish going thru my array of words it move the page up then when it starts again it moves the page down. I want the page to stay in place when it finish the array of words as well as when it starts the array of words.
var messages=["Your word is a lamp to my feet and a light to my path.","","Be still, and know that I am God! I will be exalted among the nations, I will be exalted in the earth!","Beauty for ashes"];
var rank=0;
// Code for Chrome, Safari and Opera
document.getElementById("myTypewriter").addEventListener("webkitAnimationEnd", changeTxt);
// Standard syntax
document.getElementById("myTypewriter").addEventListener("animationend", changeTxt);
function changeTxt(e){
_h1 = this.getElementsByTagName("h1")[0];
_h1.style.webkitAnimation = 'none'; // set element animation to none
setTimeout(function() { // you surely want a delay before the next message appears
_h1.innerHTML=messages[rank];
var speed =2.8*messages[rank].length/20; // adjust the speed (3.5 is the original speed, 20 is the original string length
_h1.style.webkitAnimation = 'typing '+speed+'s steps(40, end), blink-caret .75s step-end infinite'; // switch to the original set of animation
(rank===messages.length-1)?rank=0:rank++; // if you have displayed the last message from the array, go back to the first one, else go to next message
}, 1000);
}
body{
margin: 0;
padding: 0;
background-color: purple;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
/*-------------Header/Nav----------*/
header{
width: 100%;
}
#start{
width: 90%;
margin: 0 auto;
text-align: center;
}
#start h1{
color: white;
letter-spacing:6px;
font-size: 3em;
font-family: 'Anton', sans-serif;
}
nav ul{
list-style-type: none;
padding: 0;
margin-left: 32%;
}
nav a{
float: left;
font-size: 1.2em;
margin-right: 38px;
}
#wrapper{
width: 100%;
margin: 0 auto;
background-color: Fuchsia;
color:white;
}
#nav{
width: 80%;
margin: 0 auto;
}
a:nth-child{
margin-right: 0;
}
/**************Type writer***********/
.myTypewriter h1 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
/* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
#wrapper-two{
background: purple;
color: #fff;
font-family: monospace;
padding-top: 3em;
display: flex;
justify-content: center;
}
#keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: blue; }
}
/*--------------section two---------------*/
#wrapper-home{
width: 90%;
margin:0 auto;
display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;
}
h2{
float: left;
}
img{
float: left;
}
/*----------------Media Queries-----------*/
#media only screen and (max-width: 1200px){
nav ul{
margin-left: 20%
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="otkcdim.css">
<title>Home</title>
</head>
<body>
<header>
<div id="start">
<h1>Only </h1>
</div>
</header>
<nav >
<div id="wrapper" class="cf">
<div id="nav" class="cf">
<ul class="cf">
<li><a>Home</a></li>
<li><a>About Us</a></li>
<li><a>Events</a></li>
<li><a>Encouragement</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<!--*****************Type Writer*************************-->
<section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper-two">
<div class="myTypewriter" id="myTypewriter">
<h1> Beauty for Ashes</h1>
</div>
</div>
</section>
<!--**********Home Page***************-->
<div id="wrapper-home">
<div class="yes">
<img src="ma.jpg">
<h2>Welcome.</h2>
</div>
</div>
<script type="text/javascript" src="otkcdim.js"></script>
</body>
</html>
I made a small change to your CSS to fix this problem. Hope it's helpful.
.myTypewriter h1 {
overflow: hidden;
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em;
// Set minimum height of auto-typewriter to hold it's place even when empty.
min-height: 25px;
/* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
I'm trying to make a sidebar when you open the bar it will fade out the rest of the page.
<!DOCTYPE html>
<html>
<head>
<title>Westfield Technical Academy</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="Script.js"></script>
</head>
<div id="f8">
<!-- Sidenavigation bar START -->
<div id="UI" class="sidenav">
×
Home
<a href=#>Why Choose WTA?</a>
Curriculum
Calendar
Location (Works)
</div>
<!-- Pushes site to the right -->
<div id="main">
<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰ More Info</span>
</div>
<body id="bg">
<div class="pootis"></div>
<p class="maintext">We are Committed to Excellence, and we work hard to make the site a primary source for timely information for all users, and a main gateway for improved communication between parents, teachers, students and other members of our community. Westfield Technical Academy provides a quality education through shared responsibility in a safe supportive environment for all students to meet the challenges of a global society.</p>
</body>
<!-- Sidenavigation bar END -->
</div>
</html>
CSS:
/* Purple Background */
#bg {background-color:#c58414;
background-image:url(wta.jpg);
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* Sidenav Menu (ClassIs: UI) */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left; 0;
background-color: #111;
overflow-x: hidden;
padding: 0px;
transition: 0.5s;
}
/* Sidenav Nav UI Links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #313131;
display: block;
transition: 0.4s;
}
/* When u mouse over link, change color */
.sidenav a:hover, offcanvas a:focus{
color: #f1f1f1
}
/* Position and Style the close button (TRC) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size; 36px;
margin-left: 50px;
}
/* Style page content - use this if u want to push content to right when u open sidenav */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* Smaller Screens */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidemav a {font-size 18px;}
}
.moar {
padding-right: 65em
}
.pootis {
background-image: url(z2.png);
height: 425px;
background-repeat: no-repeat;
position: relative;
width: 590px;
margin: auto;
}
.maintext {
background-color:white;
font-size: 19px;
width: 700px;
text-align: center;
position: relative;
margin-left: 550px;
}
.f8 {
height: 100%;
background-size: cover;
}
.text1 {
background-color: whitesmoke;
}
JS:
/* Set the width of the side nav to 250px */
function openNav() {
document.getElementById("UI").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
document.getElementsByTagName("body")[0];
}
/* Set the width of Sidenav to 0 and left Margin of PC to 0 and bgc 2 fffff */
function closeNav() {
document.getElementById("UI").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.body.style.backgroundColor = "fffff";
}
Help would be greatly appreciated, as It is a school project where we recreate the school landing page. Ofcourse I want to try to do advanced stuff :p, and try to make a nice looking sidebar, Only it's not working. Help?
Edit: I messed up the pasting first so i edited the post to be more readable.
here you go, I got rid of the script tags, just keep the script in your html file.
html:
<!DOCTYPE html>
<html>
<head>
<title>Westfield Technical Academy</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body id="bg">
<div id="mySidenav" class="sidenav">
×
Home
<a href=#>Why Choose WTA?</a>
Curriculum
Calendar
Location (Works)
</div>
<div id="main">
<span style="font-size:20px;cursor:pointer" onclick="openNav()">☰ More Info</span>
</div>
<div class="pootis">
<p class="maintext">We are Committed to Excellence, and we work hard to make the site a primary source for timely information for all users, and a main gateway for improved communication between parents, teachers, students and other members of our community. Westfield Technical Academy provides a quality education through shared responsibility in a safe supportive environment for all students to meet the challenges of a global society.</p>
</div>
<script>
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 you provided:
body {
font-family: "Lato", sans-serif;
transition: background-color .5s;
}
.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;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* Purple Background */
#bg {background-color:#c58414;
background-image:url(wta.jpg);
background-repeat:no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* Sidenav Menu (ClassIs: UI) */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left; 0;
background-color: #111;
overflow-x: hidden;
padding: 0px;
transition: 0.5s;
}
/* Sidenav Nav UI Links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #313131;
display: block;
transition: 0.4s;
}
/* When u mouse over link, change color */
.sidenav a:hover, offcanvas a:focus{
color: #f1f1f1
}
/* Position and Style the close button (TRC) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size; 36px;
margin-left: 50px;
}
/* Style page content - use this if u want to push content to right when u open sidenav */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* Smaller Screens */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidemav a {font-size 18px;}
}
.moar {
padding-right: 65em
}
.pootis {
background-image: url(z2.png);
height: 425px;
background-repeat: no-repeat;
position: relative;
width: 590px;
margin: auto;
}
.maintext {
background-color:white;
font-size: 19px;
width: 700px;
text-align: center;
position: relative;
margin-left: 550px;
}
.f8 {
height: 100%;
background-size: cover;
}
.text1 {
background-color: whitesmoke;
}
heres a jsfiddle of it working
Put your whole side navigation into a div section with some opacity.