Project Travel Agency - Menus | IBAT Web Design Portfolio Project

Introduction

In this task you will use template content to add desktop and mobile menus to the 'Travel 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.

Learning Goals

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

Copy-and-paste selected HTML with text content and JavaScript code from a template file to a sample web page.
Copy-and-paste selected CSS from a template file to a stylesheet for a sample web page.
Edit the copied template content, HTML and CSS as required.

Download the website logo image for menus

Your first step is to download the image file for this sample website's logo.

Right-click the image below and, from the pop-up menu displayed, choose Save Image As
Download the image file to your websites\portfolio\travel\assets\img sub-folder:

Work with your two HTML files

You will begin by working with two HTML files:

The template file you will copy from and
The web page you will copy to.

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

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

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.

In the menus-template.html file, select and copy the menus HTML section.
In your index.html web page, go to near the top of the web page, to just after the start of the <body> tag.
Press the ENTER key a few times to open up some new lines of blank space.
Paste the copied menus HTML.
In the menus-template.html file, select and copy the JavaScript code for the menus.
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.
Press the ENTER key a few times to open up some new lines of blank space.
Paste the copied JavaScript code for the menus.
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:

The template CSS file you will copy from and
The stylesheet you will copy to.

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

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

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.

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

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

Update the menu logo and hyperlink

For both the desktop and mobile menus, you need to update the website logo and its surrounding hyperlink.

In your index.html web page, go to near the top of the web page, to just after the start of the <body> tag.

Update the logo image and hyperlink as follows.


<a href="#"><img src="assets/img/travel-logo.png" alt="website logo"></a>

Scroll down a few lines to the mobile menu section and copy-and-paste the new logo and hyperlink from the desktop menu to here.
Save the index.html web page and view the result in your web browser for both desktop and mobile screen sizes.

Update the menu option hyperlinks

For both the desktop and mobile menus, you next need to update the hyperlinks for the various menu options.

In your index.html web page, go to near the top of the web page, to just after the start of the <body> tag.

In the desktop menu section, replace the template menu text and hyperlinks as follows.


<ul>
  <li><a href="destinations.html">Destinations</a></li>
  <li><a href="about-us.html">About Us</a></li>
  <li><a href="contact-us.html" class="btn-cta"><i class="fas fa-plane"></i> Contact Us</a></li>  
</ul>

Scroll down a few lines to the mobile menu section and copy-and-paste the new menu options from the desktop menu to here.
Save the index.html web page and view the result in your web browser for both desktop and mobile screen sizes.

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.

If you want to include a profile or other image, the image should be located in your websites/assets/img folder.


<img src="../../assets/img/profile-pic.jpg" alt="Mary Smith web designer, Dublin">

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.
If you want to link your website's Home page, the link should be as follows.
```
<a href="../../index.html">Home</a>
```
If you want to link your website's Portfolio page, the link should be as follows.
```
<a href="../index.html">Portfolio</a>
```
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>
```
Save your index.html web page and view it in your web browser.

Update the hero block

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

In the style.css file, edit the height of the container-hero class for mobile screens as shown below. Also, add some margin spacing above the main <h1> heading for desktops and mobiles.
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.

Let's update this red colour to match the orange colour of #ff5000 used in the web page.

In the style.css stylesheet, scroll to the top of the file.
On the Visual Studio Code menu, click the Edit menu and then click the Replace command.
A new search-and-replace dialog box appears at the top-right of the Visual Studio Code screen.
In the first field, enter red.
In the second, enter #ff5000.
Click the left icon for Replace. Do not click the right icon for Replace All.
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.)
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:

When the user displays the top of the web page, either on desktop or mobile screens, the menu has a transparent background. The hero image appears directly behind the text hyperlinks. These hyperlinks are displayed in white text.
When the user scrolls down the web page, the transparent background is replaced by a solid white colour. And the colour of the text hyperlinks changes to deep pink.

To achieve this effect, follow these steps.

In the index.html file, for both the container-menu-desktop and container-menu-bar-mobile containers, replace the class of menu-light with the menu-transparent class as shown below.
Scroll down to near the bottom of the web page. 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  in HTML and /* comment */ in CSS.
Remove the "//" from the beginning of this line as shown below.
Save the index.html file and view the web page in your web browser.
To make the menu text links easier to read against the transparent background on desktop screens, darken the overlay at the top of the hero image. In the style.css file, for the container-hero class, increase the upper value of the overlay opacity gradient of the background-image property to 0.6
One final change: to make the hamburger icon easier-to-read against the background image, change its colour from red to white as shown below.
Save the style.css file and view the web page in your web browser.

When the user scrolls down the web page:

This JavaScript code removes the menu-transparent class and replaces it with the menu-light class. It also adds the menu-drop-shadow class that places a drop shadow effect under the menu.

When the user scrolls back up the web page:

The JavaScript code removes the menu-light and menu-drop-shadow classes and replaces them with the original menu-transparent class.

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.

Open your destinations.html, about-us.html and contact-us.html web pages.
Open your index.html web page, and copy all the menu-related content from the top of the page.
Paste the menu-related content into the top of your destinations.html, about-us.html and contact-us.html pages, to just after the opening <body> tag.
Scroll to the bottom of your index.html web page, and copy all the JavaScript code for menus.
For your destinations.html, about-us.html and contact-us.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.
For your destinations.html, about-us.html and contact-us.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 'Travel' website).
Save all your web pages and view them in your web browser.

That's it. You have now completed your 'Travel' 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.

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

That's it.

Validate your HTML files

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

Go to this web page: https://validator.w3.org.
Click the Validate by Direct Input tab.
One after the other, copy and paste each of your four HTML files into the box named Enter the Markup to validate.
Click the Check button.
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.

Go to this web page: https://jigsaw.w3.org/css-validator.
Click the By direct input tab.
Copy and paste your CSS file into the box named Enter the CSS you would like validated.
Click the Check button.
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.
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 travel of your websites/portfolio folder.

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

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.
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
The next GitHub screen displayed should look as follows. Click on the portfolio folder.
On the next screen displayed, click the Upload files button.
In File/Windows Explorer on your computer, display your portfolio folder and then drag-and-drop the travel folder to the GitHub tab in your web browser.
After uploading the travel 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.

Your 'Travel Agency' web 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/travel/index.html

or, simply:

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

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

Return to Contents.

Travel Agency Website

Contents >

HTML Project 5: Menus