PFS! Computer Science

Website Follow-ups
10.5. Overview

Welcome to this special discussion, in which you'll be examining one or two supplementary conversations.

There is nothing you must do for these assignments, although you may choose to do something after you've seen one or both of the presentations given here.

Pick one and/or the other and get started!

Discussion 1. Hosting a Website Online

You can use replit to develop a website project online, but how do the files that we've written get used to create a real website?

In 2020 the instructor used replit to create a small website on Frederick Douglass. This YouTube video will show you how that website was then posted onto the internet.

Discussion 2. Implementing a Hamburger Menu

In working on our website projects, the CSS (design) code we've included have attempted to make our websites "mobile-friendly," or responsive: the sites are able to be viewed equally well on a cellphone or a desktop computer.

Most websites, when viewed on a phone, hide the navigation from view until you click on the icon with three horizontal lines, the so-called "hamburger menu."

Watch this video to see how we can easily add a hamburger menu to our website to make it even more mobile-friendly.

Code for implementing a hamburger menu

These instructions assume you have written a website according to the instructions given earlier in this course. You can download a zip file of the initial sample website here, or you can fork a copy of the project on replit here.

  1. Create the hamburger icon
    1. Display a hamburger icon that, when clicked, will activate the toggleNav() JavaScript function. To do this, include this div inside the header of every page on the website:
      2. <div class="mobile"><a href="#" onclick="toggleNav();">&#9776;</a></div>
    2. Add these lines to your style.css file, which will place the hamburger menu link in the correct location:
      3. div.mobile
{
    font-size: 140%;
    position: absolute;
    bottom: 0;
    right: 0;  
}

div.mobile a:link, div.mobile a:visited 
{
    color: #000;
    text-decoration: none;
}
    3. To get the hamburger icon located in a position off to the side, add this line to the header CSS in the style.css file:
      4. header 
{
    ...
    ...
    position: relative;
}
  2. Set up styling to hide/show the hamburger menu and the nav section
    1. In the style.css file, add a line to the nav styling so that it is not displayed when we're in "phone" mode:
      2. nav
{
    ...
    ...
    display: none;
}
    2. In style.css for the @media section at the end which describes styles for a desktop viewing environment, add these lines that will show the nav section and hide the hamburger menu in that view.
      3. @media (min-width: 600px) 
{
    ...
    ...
    nav { display: block; }
    .mobile { display: none; }
}
  3. Put in the JavaScript function toggleNav and make sure webpages know where it is.
    1. Place the following line in the <head> section on every webpage. (Not the header, but the head.) 
      <script src="script.js" type="text/javascript"></script>
    2. In the file script.js paste the code for the toggleNav script:
      3. function toggleNav() {
    var state = document.getElementsByTagName("nav")[0].style.display;
    if (state == 'block') {
        document.getElementsByTagName("nav")[0].style.display = 'none';
    } else {
        document.getElementsByTagName("nav")[0].style.display = 'block';
    }
}

Try running your project, and seeing how the navigation menu and the hamburger menu appear and disappear, depending on the orientation of the browser.