In this lab, I followed the instruction from JavaScript30 and recreated the Sticky Nav activity. First off, I made the HTML, CSS, and JavaScript files. Secondly, the <html>, <head>, <body>, <meta>, and <title> tags were already inserted in the HTML file. Thirdly, I typed in <link rel="stylesheet" type="text/css" href="Lab_38.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_38.js" type="text/javascript"></script> inside the <body> tags which linked my JavaScript file with my HTML file. Inside the <body> tags, I typed the heading for the lab which has my name, date, and lab number with <div id="heading"><h1>Lab 38</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. Next, I typed in <nav id="main"><ul><li class="logo"><a href="#">LOST.</a></li><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Images</a></li><li><a href="#">Locations</a></li><li><a href="#">Maps</a></li></ul></nav> to make the navigation bar. Then I put <div class="site-wrap"></div> to make the content of the lab and inside it I typed, <p> and <img> tags to fill up the content. Lastly, I made the copyright notice with <p> and <div> tags. For the CSS, I did html {width: 100%; height: auto;} body {background-color: #00FFA8; min-width: 100%;min-height: 100%;} to make the webpage screen responsive and have a background color. #heading {text-align: center; font-size: 16px;} #copyright {font-size: 16px; font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif"; font-weight: normal; padding-left: 1%; padding-right: 1%;} to stylize the beginning and end text with their fonts. .site-wrap {max-width: 700px; margin: 70px auto; background: white; padding: 40px; text-align: justify; box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05); transform: scale(0.98); transition: transform 0.5s;} body.fixed-nav .site-wrap {transform: scale(1);} to stylize the content with color, font, and animation. h1 {color: white; font-size: 7vw; text-shadow: 3px 4px 0 rgba(0,0,0,0.2);} to make <h1> tags text color white, change the font size, and provide a text shadow. nav {background: black; top: 0; width: 100%; transition:all 0.5s; position: relative; z-index: 1;} body.fixed-nav nav {position: fixed; box-shadow: 0 5px 0 rgba(0,0,0,0.1);} nav ul {margin: 0; padding: 0; list-style: none; display: flex;} nav li {flex: 1; text-align: center; display: flex; justify-content: center; align-items: center;} li.logo {max-width: 0; overflow: hidden; background: white; transition: all 0.5s; font-weight: 600; font-size: 30px;} li.logo a {color: black;} .fixed-nav li.logo {max-width: 500px;} nav a {text-decoration: none; padding: 20px; display: inline-block; color: white; transition: all 0.2s; text-transform: uppercase;} to stylize the navigation menu to have color, size, and positioning. For the JavaScript, I typed in:
const nav = document.querySelector('#main');
let topOfNav = nav.offsetTop;
function fixNav() {
if (window.scrollY >= topOfNav) {
document.body.style.paddingTop = nav.offsetHeight + 'px';
document.body.classList.add('fixed-nav');
} else {
document.body.classList.remove('fixed-nav');
document.body.style.paddingTop = 0;
}
}
window.addEventListener('scroll', fixNav);
This makes the navigation bar resize and move when scrolling the page. Knowing how to use sticky navigation is useful for a web designer that wants to make their UI more accessible to the user.
Link:
http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_38/Lab_38.html
No comments:
Post a Comment