Software Analytics Website

Contents  >

HTML Project 4: Menus

Introduction

In this task you will use template content to add desktop and mobile menus to the 'Software' project you created earlier and to which you then added an email sign-up form and a footer

You can display a finished version of the project web page on GitHub by clicking the image below.

Web Design Project: Software Analytics 2n2l.com Brendan Munnelly

Learning Goals

At the end of this Tutorial you will be able to:

Contents

Introduction

Download the website logo image for menus

Work with your two HTML files

Copy-and-paste the menus HTML and JavaScript

Work with your two CSS files

Copy-and-paste the menus CSS

Update the menu logo and hyperlink

Update the menu option hyperlinks

Create the hyperlink destinations

Control web page scrolling

Update the mobile menu content and hyperlinks

Update the hero block

Update the menu colours

Add the JavaScript menu style-swapping effect

Update the styles for flyout menus

Validate your HTML file

Validate your CSS file

Upload your project to GitHub

Work with your two HTML files

You will begin by working with two HTML files:

  1. In Visual Studio Code, from your websites\templates folder, open the following HTML file:   menus-template.html
  2. From your websites\portfolio\software folder, open the web page named index.html.. fa-icons-copy

If you have any other files open in Visual Studio Code, you may wish to close them.

fa-icons-copy

This will help you to focus only on the two HTML files you will be working with.

Copy-and-paste the menus HTML and JavaScript

Your next step is to copy content from the menus template file into your index.html web page.

  1. In the menus-template.html file, select and copy the menus HTML section. fa-icons-copy
  2. In your index.html web page, go to near the top of the web page, to just after the start of the <body> tag. fa-icons-copy
  3. Press the ENTER key a few times to open up some new lines of blank space.
  4. Paste the copied menus HTML.
  5. In the menus-template.html file, select and copy the JavaScript code for the menus. fa-icons-copy
  6. In your index.html web page, scroll down to near the end of the web page, to just before the JavaScript for Cookie Consent Popup Message. fa-icons-copy
  7. Press the ENTER key a few times to open up some new lines of blank space.
  8. Paste the copied JavaScript code for the menus.
  9. When finished, save your index.html web page.

You can now close the menus-template.html file.

Work with your two CSS files

Your next task is to work with two CSS files:

  1. In Visual Studio Code, from your websites\templates folder, open the following CSS file:   menus-template.css
  2. From your websites\portfolio\software\assets\css folder, open your stylesheet named style.css. fa-icons-copy

If you have any other files open in Visual Studio, you may wish to close them.

fa-icons-copy

This will help you to focus only on the two CSS files you will be working with.

Copy-and-paste the menus CSS

Your next step is to copy content from the template menus CSS file into your style.css web page.

  1. In the menus-template.css file, select and copy the menus section. fa-icons-copy
  2. In your style.css file, click just under the /* BROWSER RESETS */ section of the stylesheet. fa-icons-copy
  3. Press the ENTER key a few times to open up some new lines of blank space.
  4. Paste the copied CSS for the menus.
  5. When finished, save your style.css stylesheet.

You can now close the menus-template.css file.

Control web page scrolling

When you click on an option within the desktop or mobile menu, you can see that the top of the destination heading is partly 'hidden' behind the menu.

fa-icons-copy

This is because of the menu-sticky class attached to both the container-menu-desktop and the container-menu-bar-mobile parent containers.

In the style.css stylesheet, you can see that the .menu-sticky style has a position value of fixed. fa-icons-copy

As a result, the rest of the web page will not 'see' the container-menu-desktop and container-menu-bar-mobile sections and will act like they are not there.

To fix this issue, in the style.css file, add the scroll-padding-top property to the html selector for the entire web page.

fa-icons-copy

Give it a value of 72px, which is the same height as the height of your desktop and mobile menu containers.

When finished, save your style.css file and test your menus for both desktop and mobile screens. You can see that the menu containers no longer hide any of the web page content.

fa-icons-copy

Note that the scroll-padding-top effect works with the Google Chrome, Mozilla Firefoz, Apple Safari, Brave. Opera and Android Webview web browsers. However, it is not yet supported by the Microsoft Edge web browser. A new and major upgrade of Edge is planned for early 2020 and Microsoft are expected to fix this defect then. It also does not (yet) work with the Samsung Internet web browser.

Update the mobile menu content and links

In the lower part of the mobile menu, under the <hr> horizontal rule line, you can include some text about yourself, an image and some hyperlinks.

  1. If you want to include a profile image, the image should be located in your websites/assets/img folder.
  2. 
    <img src="../../assets/img/profile-pic.jpg" alt="Mary Smith web designer, Dublin">  
    
  3. If you wish to include an email address or social media hyperlinks, replace the template-provided details with your own. Delete ant details in the template you do not want to include.
  4. If you want to link your website's Home page, the link should be as follows.
    
    <a href="../../index.html">Home</a>
    
  5. If you want to link your website's Portfolio page, the link should be as follows.
    
    <a href="../index.html">Portfolio</a>
    
  6. And if you want to link your website's Contact Form page, the link should be as follows.
    
    <a href="../../contact/index.html">Contact</a>
    
  7. Save your index.html web page and view it in your web browser.

You are now finished working with this file and you can close it in Visual Studio Code.

Update the hero block

You need to make a few changes to the hero block at the top of your web page.

  1. In the style.css file, scroll down the line that sets the background-color of #fff for the container-flexbox.hero-block. class.
  2. Press the ENTER key a few times to open up some new lines of blank space. fa-icons-copy
  3. Copy-and-paste the following.
    
    /* Hero block height and spacing  */
    @media all and (min-width: 768px) {
       .container-flexbox.hero-block { margin-top: 5% }
       .container-flexbox.hero-block h1 { margin-top: 5% }
    
       .container-flexbox.hero-block .item-2:nth-child(2) { 
          display: flex;
          flex-direction: column;
          justify-content: center
       }
    }
    
    @media all and (max-width: 767px) {
       .container-flexbox.hero-block { margin-top: 10% }
       .container-flexbox.hero-block .item-2:nth-child(2) { padding-bottom: 5% }
    }
    
  4. Save the style.css file and view the web page in your web browser.

Update the menu colours

In the menus-template.html file you copied-and-pasted into your index.html web page, the desktop container DIV of container-menu-desktop and the two container DIVS for the mobile menu of container-menu-bar-mobile and flyout-menu are assigned a class of menu-light.

In the menus-template.css file you copied-and-pasted into your style.css stylesheet, this menu-light class sets text and hyperlinks red against a white background. You can see just a few examples of these colour properties and values below.

fa-icons-copy

Let's update this red colour to match the green colour of #5ba745 used in the web page.

  1. In the style.css stylesheet, scroll to the top of the file.
  2. On the Visual Studio Code menu, click the Edit menu and then click the Replace command.
  3. A new search-and-replace dialog box appears at the top-right of the Visual Studio Code screen. fa-icons-copy
  4. In the first field, enter red.
  5. In the second, enter #5ba745.
  6. Click the left icon for Replace. Do not click the right icon for Replace All.
  7. One by one, replace every occurrence of the colour red with #ff5000 in your stylesheet.   (If you choose the Replace All option, Visual Studio Code will replace the letters 'red' inside words such as 'centered' that may be written in comments.)
  8. Save the style.css file and view the web page in your web browser.

Add the JavaScript menu style-swapping effect

Your final step is to use some JavaScript code in the menus-template.html file you copied-and-pasted into your index.html web page to create the following effect:

To achieve this effect, follow these steps.

  1. In the index.html file, for both the container-menu-desktop and container-menu-bar-mobile containers, replace the class of menu-light with menu-dark class as shown below. fa-icons-copy
  2. Scroll down to near the bottom of the file. Under the comment of "// Code for menus with transparent background" is a line of JavaScript that begins with the // comment symbol.   In JavaScript code, the symbol "//" has the same effect as <!-- comment --> in HTML and /* comment */ in CSS.
  3. Remove the "//" from the beginning of this line as shown below. fa-icons-copy
  4. Next, edit the JavaScript code a shown below. fa-icons-copy
  5. Save the index.html file and view the web page in your web browser.
  6. One final change: for the flyout-menu, replace the menu-light class with the menu-dark class as shown below. fa-icons-copy
  7. Save the style.css file and view the web page in your web browser.

When the user scrolls down the web page:

When the user scrolls back up the web page:

That's it. You have now completed your 'Software' project. (Except for the possible next step.)

Update the styles for flyout menus

If you downloaded the templates.zip file before 12 May, 2020, you may want to make the following change to the flyout menu on mobile screens.

This update will ensure the text and image styles for flyout menu remain in effect in the 1-2 seconds it takes for the menu to 'slide out' to the right of the screen after the user taps the 'X' symbol.

  1. In Visual Studio Code, display the style.css stylesheet.
  2. Click the Edit menu and then click the Replace command.
  3. A new search-and-replace dialog box appears at the top-right of the Visual Studio Code screen. fa-icons-copy
  4. In the first field, enter the following:  .flyout-menu.flyout-menu-is-open
  5. In the second field, enter the following:  .flyout-menu fa-icons-copy
  6. Click the right icon for Replace All.
  7. When finished, save your style.css file.

That's it.

Validate your HTML file

To check your HTML is correct, use the official W3C Markup Validation Service. Follow these steps.

  1. Go to this web page: https://validator.w3.org.
  2. Click the Validate by Direct Input tab. validate-html
  3. Copy and paste your HTML file into the box named Enter the Markup to validate.
  4. Click the Check button.
  5. If you see any errors, return to your index.html file, fix the errors, save the file, and copy the entire file again.  In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Validate your CSS file

To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.

  1. Go to this web page: https://jigsaw.w3.org/css-validator.
  2. Click the By direct input tab. Project Hero Blocks
  3. Copy and paste your CSS file into the box named Enter the CSS you would like validated.
  4. Click the Check button.
  5. If you see any errors (other than those related to the fluid typographic equation or as shown below or to the 'overscroll-behavior' property), return to your style.css file in your text editor, fix the errors, save the file, and copy the entire file again. ypo-css-errors
  6. In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Upload your project to GitHub

The final step is to upload your project to GitHub.

All the files for this project are in a sub-folder named software of your websites/portfolio folder.

So you will need to upload this software sub-folder, which contains both files and other sub-folders, to your account on GitHub.

  1. Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now. github-signin
  2. On your GitHub home page, click the name of the repository ('repo') that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io   github-repo
  3. The next GitHub screen displayed should look as follows. Click on the portfolio folder. GitHub Upload
  4. On the next screen displayed, click the Upload files button. github-upload-portfolio
  5. In File/Windows Explorer on your computer, display your portfolio folder and then drag-and-drop the software folder to the GitHub tab in your web browser. github-upload-drag-drop
  6. After uploading the software folder, scroll down to the bottom of the GitHub screen, enter a short message in the Commit changes box, click the Commit changes button, and wait for the upload to complete. github-upload-progress

Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/portfolio/software/index.html

or, simply:

https://username.github.io/portfolio/software

It may take a few minutes for your uploaded files to appear on GitHub.



Return to Contents.