Web Agency Website

Contents  >

HTML Project 6: Menus

Introduction

In this task you will use template content to add desktop and mobile menus to the 'Web Agency' project you created earlier and to which you then added a contact form page and a footer.

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

Web Design Project: Web Agency 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

Update the mobile menu content and hyperlinks

Update the hero block

Update the menu colours

Add the JavaScript menu style-swapping effect

Update the other three web pages

Validate your HTML files

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\web-agency 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\web-agency\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 display the index.html web page in your web browser, you can see that the top of the page 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 a padding-top property to the body 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

Update the mobile menu content and hyperlinks

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 or other 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 any 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.

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 purple colour of #500294 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 #ff5000.
  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 #500294 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 style.css stylesheet, for both the container-menu-desktop and container-menu-bar-mobile containers, replace the class of menu-light with menu-transparent class as shown below. fa-icons-copy
  2. In the index.html web page, 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 as 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:

Update the other three web pages

You need to apply the menu-related updates you have made to your index.html web page to the three other web pages in your 'Travel' project. Follow these steps.

  1. Open your services.html, team.html and contact.html web pages.
  2. Open your index.html web page, and copy all the menu-related content from the top of the page.
  3. Paste the menu-related content into the top of your services.html, team.html and contact.html pages, to just after the opening <body> tag.
  4. Scroll to the bottom of your index.html web page, and copy all the JavaScript code for menus.
  5. For your services.html, team.html and contact.html web pages, scroll to near the end of the web pages, to just before the JavaScript for Cookie Consent Popup Message, and then paste the JavaScript code.
  6. For your services.html, team.html and contact.html web pages, change the link destination for the website logo from # (which simply brings the user to the top of the web page) to index.html (which brings the user to the home page of the four-page 'Web Agency' website). fa-icons-copy
  7. Save all your web pages and view them in your web browser.

That's it. You have now completed your 'Web Agency' project.

Validate your HTML files

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. One after the other, copy and paste your four HTML files into the box named Enter the Markup to validate.
  4. Click the Check button.
  5. If you see any errors, return to your 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 web-agency of your websites/portfolio folder.

So you will need to upload this web-agency 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 web-agency folder to the GitHub tab in your web browser. github-upload-drag-drop
  6. After uploading the web-agency 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 Agency' project with desktop and mobile menus 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/web-agency/index.html

or, simply:

https://username.github.io/portfolio/web-agency

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



Return to Contents.