Contents  >

Software Project:
Menus

Introduction

In this task you will use template content to add desktop and mobile menus to the ‘Software Analytics’ 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 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

Downloading the website logo image

Working with your two HTML files

Copying-and-pasting the menus HTML and JavaScript

Working with the template CSS file

Copying and renaming the template CSS file

Removing browser resets from the new menus CSS file

About the font-family for the menus

Linking your web page to the new menus CSS file

Updating the menu logo and hyperlink

Updating the menu option hyperlinks

Creating the hyperlink destinations

Offsetting the hyperlink destinations

Updating the hero block spacing

Updating the mobile menu content and hyperlinks

Updating the menu colours

Adding the menu style-swapping effect

Uploading your project to GitHub

Working 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 fa-icons-copy
  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.

Copying-and-pasting 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-related HTML blocks. fa-icons-copy
  2. In your index.html web page, click just after the start of the opening <body> tag, and press the ENTER key a few times to open up some new lines of blank space.
  3. Paste the copied HTML for the menus.
  4. Switch back to the menus-template.html file, and select and copy the JavaScript code for the menus. fa-icons-copy
  5. In your index.html web page, scroll down to near the end of the web page, to just before the closing </body> tag.
  6. Press the ENTER key a few times to open up some new lines of blank space.
  7. Paste the copied JavaScript code for the menus.
  8. When finished, save your index.html web page.

You can close the menus-template.html file. You are now finished working with this template.

Working with the template CSS file

Your next set of tasks involves making a copy of the template stylesheet file, renaming it, and then linking the renamed copy to your index.html project web page. You will also make some changes to the copied and renamed stylesheet.

Copying and renaming the template CSS file

First, you will make a copy of the template stylesheet for menus.

  1. In VS Code, from your websites/templates folder, open the following CSS file:   menus-template.css fa-icons-copy
  2. From the File menu, choose the Save As command. fa-icons-copy
  3. Save the template stylesheet with the name menus.css in the following folder:   websites/portfolio/software/assets/css   This is the same folder that holds the style.css file for your ‘Software’ project. fa-icons-copy

You can close the menus-template.css stylesheet. You are now finished with this template CSS file.

Removing browser resets from the new menus CSS file

Now you will delete the web browser resets from your copied and renamed stylesheet.

  1. In VS Code, display the new menus.css stylesheet.
  2. Delete everything in the == WEB BROWSER RESETS == block. file-explorer-full
  3. Save the menus.css stylesheet.

About the font-family for the menus

In your project style.css stylesheet, at about line 9, you can see that the font-family for the entire web page is set to the Google Font of ‘Roboto’.

fa-icons-copy

This font is an easy-to-read at the small font sizes used for menu options. So you do not need to set a different font-family style for the text in the desktop and mobile menus.

Linking your web page to the new menus CSS file

Next, you will link the stylesheet you have just copied, renamed and edited to your project web page.

  1. In VS Code, display your index.html web page.
  2. Add a link to the new stylesheet in the <head> as shown below. fa-icons-copy
  3. Save your index.html file.

Updating the menu option hyperlinks

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

  1. In your index.html web page, go to near the top of the web page, to just after the opening <body> tag.
  2. In the desktop menu block, replace the template menu text and hyperlinks as follows. 
    <ul>
  <li><a href="#features">Features</a></li>
  <li><a href="#benefits">Benefits</a></li>
  <li><a href="#testimonials">Testimonials</a></li>
  <li><a href="#free-trial" class="btn-cta">Start Your Free Trial</a></li>  
</ul>
  3. Scroll down a few lines to the mobile menu block and copy-and-paste the new menu options from the desktop menu to here. Edit the text 'Start Your Free Trial' to the shorter 'Free Trial'. fa-icons-copy
  4. Save the index.html web page and view the result in your web browser for both desktop and mobile screen sizes.

Now that you have created hyperlinks in the desktop and mobile menus, you need to create the destinations in the web page that these links will bring the user to.

  1. In your index.html web page, for each of these three sections, add the following IDs that match the menu options. fa-icons-copy The Email Sign-up Form already has an ID named "free-trial".
  2. Save the index.html web page,

View the result in your web browser for both desktop and mobile screen sizes. Verify that the menu options all work correctly when clicked/tapped.

Offsetting the hyperlink destinations

Because both the desktop/laptop and mobile parent containers are ‘sticky’, the menus remain fixed at the top of the screen as the user scrolls down through the web page.

fa-icons-copy

This also means that the top 72px of whatever web page element immediately follows the parent menu containers is ‘hidden’ behind them.

When you click or tap a menu option, you can see that the top of the destination heading is partly ‘hidden’ behind the menubar.

fa-icons-copy

To fix this issue, follow these steps:

  1. In the style.css file, add the scroll-padding-top property to the html selector for the entire web page as shown below. fa-icons-copy Give this new property a value of 72px, which is the same height as the height of your desktop and mobile menu containers.
  2. 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

Updating the hero block spacing

Because of the ‘sticky’, menus that hide the upper 72px of the web page element follows them, you need to make a few changes to the spacing around and within the hero block at the top of your web page.

  1. In the style.css file, for desktop/laptop screens, increase the top padding value of the item-col-2 child columns as follows: fa-icons-copy
  2. And for mobile screens, edit the padding values as follows: fa-icons-copy
  3. Save the style.css file.

In your web browser, the web page should look as shown below.

fa-icons-copy

Updating 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 wish to include a profile picture, the link to the placeholder image is as follows. 
    <img src="assets/img/profile-pic.jpg" alt="Mary Smith, Web Designer">
  2. 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.
  3. If you want to link your website's Home page, the link should be as follows. 
    <a href="../../index.html">Home</a>
  4. If you want to link your website's Portfolio page, the link should be as follows. 
    <a href="../index.html">Portfolio</a>
  5. 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>
  6. Save your index.html web page.

In your web browser, the web page should look as shown below on mobile screens.

fa-icons-copy

Updating the menu colours

In the menus-template.html file you copied-and-pasted into your index.html web page, the CSS class of menu-light is assigned to the desktop and mobile menus. As a result:

Let’s replace this default colour of red with the green colour of #5ba745 used elsewhere in the web page.

  1. In the menus.css stylesheet, scroll to the top of the file.
  2. On the VS Code menu, click the Edit option 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 menus.css file.

In your web browser, the web page should look as shown below.

fa-icons-copy

Adding the 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 the menu-related blocks below, replace the class of menu-light with the menu-dark class. fa-icons-copy
  2. Scroll down to near the bottom of the web page, and remove the // ‘comment‘ characters from the beginning of the JavaScript code as shown below. fa-icons-copy
  3. Inside the JavaScript style-swapping code, replace the class name of menu-transparent with menu-light as shown below. fa-icons-copy
  4. Save the style.css file.

In your web browser, the web page should look as shown below as you scroll down and back up the screen.

fa-icons-copy

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 Analytics’ project.

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

Web Design Project: Travel Agency 2n2l.com Brendan Munnelly

Uploading your project to GitHub

The final step is to upload your project to GitHub.

All the files you have updated for this project are in the software sub-folder of your websites/portfolio folder.

So the easiest option is simply to upload the entire software sub-folder to your account on GitHub.

  1. If you are not already signed in to your GitHub account, sign in now.
  2. On the left of your GitHub home page, click the name of the repository that holds your web pages.
  3. On the next GitHub screen displayed, click the portfolio folder. GitHub Upload
  4. GitHub should now display your portfolio folder. github-upload-portfolio
  5. With the portfolio folder displayed on your GitHub screen, click the Add file button and, from the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  6. 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
  7. 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 updated ‘Software Analytics’ project 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.