Navigation Menus

See all Projects  >

HTML Project: 3

Introduction

In this project you will work with a group of eight responsive web pages and stylesheets that contain a range of desktop and mobile menu navigation options. You can display a finished version of this project on GitHub by clicking the image below.

Project Navigation Menus

Each one of the web pages contains links to all the other pages in the group of eight. See below.

Project Navigation Menus

Contents

Project folder and files

Overview of navigation menu bars

Desktop screen 1: Scrolling menu bar

Desktop screen 2: Sticky menu bar

Desktop screen 3: Scrolling menu bar above hero block

Desktop screen 4: Sticky menu bar above hero block

Mobile screen 1: Scrolling menu bar

Mobile screen 2: Sticky menu bar

Mobile screen 3: Scrolling menu bar above hero block

Mobile screen 4: Sticky menu bar above hero block

Update the meta tags

Add your Google Analytics tracking code

Validate your HTML file

Validate your CSS file

Upload your project to GitHub

Project folders and files

Your first step is to download the files you need for this project.

  1. Download the following compressed file to your computer:  menus.zip
  2. Uncompress the ZIP file into your websites folder as shown below. How to set up a website

This will create a sub-folder named menus within your websites folder. It will have the structure shown below.

Project Navigation Menus

Overview of navigation menu bars

In this project, you will work with various types of web page navigation menus.

In terms of how they work, navigation menus can be regarded as of two main types:

In terms of style, navigation menus can be regarded as of three main types:

Desktop screen 1: Scrolling menu bar

Follow these steps to review a typical navigation menu that is displayed on a desktop screen.

  1. In your web browser, open the following web page from the menus sub-folder of your websites folder:
    • menu-desktop-1.html
  2. In your text editor, open these two files:
    • menu-desktop-1.html located in your menus folder.
    • menu-desktop-1.css located in the assets/css sub-folder of your menus folder.
    Within the <body>...</body> of the HTML file, you can see two main sections. Each section is contained inside a div. Project Navigation Menus  Our focus here is not on the content of the page-wrapper div which contains placeholder text and images.  Let's look at the first div that contains the navigation bar for desktop screens. You can see that it has two CSS classes assigned to it. Project Navigation Menus  These two classes are:
    • container-menu-desktop: This creates the desktop menu and controls everything about its appearance - except its colours.
    • container-menu-dark: This class, and its alternative of container-menu-light, has just one purpose: to set the colours used in the desktop menu.
  3. Within the div named <div class="container-menu-desktop menu-desktop-dark"> are two child divs.
    • item-logo: This first div controls the display of the logo, which is positioned at the left of the desktop menu bar. Typically, the logo is wrapped in a hyperlink that, if clicked, takes users to the home page (index.html) of the website.
    • item-menu: This second div controls the display of the menu options, which are aligned in a horizontal list at the right of the desktop menu bar.
    Project Navigation Menus 
  4. To the item-menu div, add two more menu options as follows. Project Navigation Menus  Save the web page and view it in your browser. The desktop menu should now look as shown below. Project Navigation Menus 
  5. To the final option listed in the item-menu div, add a CSS class named btn-solid. This will style the menu option as a button with a solid, coloured background and square corners. Project Navigation Menus  Save the menu-desktop-1.html file and view it in your browser. It should look as shown below. Project Navigation Menus 
  6. To the final option listed in the item-menu div, add a second CSS class, named btn-rounded. This will add left and right curved edges to the button. Project Navigation Menus  Save the menu-desktop-1.html file and view it in your browser. It should look as shown below. Project Navigation Menus 
  7. The desktop menu bar currently displays light (white) text against a dark (blue) background. Change this by replacing the menu-desktop-dark CSS class with the alternative class named menu-desktop-light. Project Navigation Menus  Save the web page and view it in your web browser. It should now look as shown below. Project Navigation Menus 
  8. Next, view the menu-desktop-1.css stylesheet file for the web page.  You can see that the very first property set for the desktop menu is that the menu is not displayed on mobile screens - that is, on screens less than 767 pixels wide. Project Navigation Menus 
  9. The CSS class named container-menu-desktop controls the layout of the desktop menu. It is 60 pixels high (height: 60px) and fills the full width of the desktop screen (width: 100%). The content that follows the desktop menu bar is 'pushed down' by a spacing of 40 pixels (margin-bottom: 40px). Project Navigation Menus   The display: flex setting makes the div a flexbox. This enables you to use the flex-direction: row and align-items: center settings to ensure the content of the div - both the logo image and the list of menu options - is centred vertically (top-to-bottom) within the navigation bar.  The justify-content: space-between setting controls the spacing between the logo at the left and list of menu options at the right. Project Navigation Menus  Further down the CSS file you can see two further classes that control the visual appearance of the menu. One is for a dark style menu, the other for light style menu. Project Navigation Menus 
  10. Now, you will add a style feature to the dark and light menus styles: a small shadow effect that is displayed along the bottom of the navigation menu bar.  To both the menu-desktop-dark and menu-desktop-light CSS classes, add the following setting. Project Navigation Menus 
  11. Save the menu-desktop-1.css stylesheet, and view the web page in your web browser. Test that the shadow effect is visible for both the dark menu and light menu styles as shown below. Project Navigation Menus 

You have now finished working with the menu-desktop-1.html and menu-desktop-1.css files. You can close both files in your text editor.

Desktop screen 2: Sticky menu bar

Follow these steps to make a typical desktop navigation menu 'sticky' so that it remains fixed at the top of the screen when the user scrolls down through the web page.

  1. In your web browser, open the following web page from the menus sub-folder of your websites folder:
    • menu-desktop-2.html
    If you scroll down through the web page, you can see that the desktop menu scrolls out of view.
  2. In your text editor, open these two files:
    • menu-desktop-2.html located in your menus folder.
    • menu-desktop-2.css located in the assets/css sub-folder of your menus folder.
  3. In the menu-desktop-2.css stylesheet file, scroll down to just after the two styles for dark the light coloured menus. Press the Enter key a few times to open up some blank lines, and type the following new class.  Project Navigation Menus 
  4. In the menu-desktop-2.html file, add this new class to the desktop menu. Project Navigation Menus  Save the web page and view it in your web browser. You can see that the menu is now fixed to the top of the screen.
  5. Adding the CSS class with the property position: fixed has two effects:
    • It 'sticks' the div to a fixed position.
    • The 'sticky' div is ignored by the remainder of the content of the web page.
    As you can see below, the content that follows the navigation menu acts as if the menu is not there. The menu bar is 60 pixels in height. As a result, the top 60 pixels of this content, contained inside the page-wrapper div, is hidden behind the menu bar. Project Navigation Menus  One way to correct this is to add some additional spacing to the content on the web page that follows the sticky menu.
  6. In the CSS file, scroll down to the styles for the page wrapper for desktop screens, and add a padding of 100 pixels to the top of the div as shown below. Project Navigation Menus 
  7. Save the CSS file and view the web page in your browser. It should look as shown below. Project Navigation Menus 

You have now finished working with the menu-desktop-2.html and menu-desktop-2.css files. You can close both files in your text editor.

Desktop screen 3: Scrolling menu bar above hero block

Follow these steps to review a typical navigation menu that is displayed above a hero block on a desktop screen.

  1. In your web browser, open the following web page from the menus sub-folder of your websites folder:
    • menu-desktop-3.html
  2. In your text editor, open these two files:
    • menu-desktop-3.html located in your menus folder.
    • menu-desktop-3.css located in the assets/css sub-folder of your menus folder.
  3. In the menu-desktop-3.html file you can see three main sections. Each one is contained in a div.
    • Navigation menu: This is contained in a div with the two CSS classes named container-menu-desktop and menu-desktop-light.
    • Hero block: This is contained in a div with the CSS class named hero-block.
    • Other page content: This is contained in a div with the CSS class named page-wrapper.
    Project Navigation Menus 
  4. In the menu-desktop-3.css file you can see that the class named container-menu-desktop is different in one way from the previous two examples: the class does not have a margin-bottom: 40px style. As a result, the hero-block is positioned immediately beneath the desktop menu bar.  In your web browser, the web page looks as follows. Project Navigation Menus 
  5. In the desktop-menu-1.html file, for the div that contains the desktop menu, replace the CSS class named menu-desktop-dark with the class menu-desktop-dark as shown below. Project Navigation Menus 
  6. Save the CSS file and view the web page in your browser. It should now look as shown below.  Project Navigation Menus 

You have now finished working with the menu-desktop-3.html and menu-desktop-3.css files. You can close both files in your text editor.

Desktop screen 4: Sticky menu bar above hero block

Follow these steps to convert a typical desktop navigation menu above a hero block into a sticky, transparent menu.

  1. In your web browser, open the following web page from the menus sub-folder of your websites folder:
    • menu-desktop-4.html
  2. In your text editor, open these two files:
    • menu-desktop-4.html located in your menus folder.
    • menu-desktop-4.css located in the assets/css sub-folder of your menus folder.
  3. In your web browser, the web page looks as shown below. As you can see, the hero-block div is positioned immediately under the desktop menu bar.  Project Navigation Menus 
  4. In the desktop-menu-4.html file, add the following class to the navigation menu to make it 'sticky.'  Project Navigation Menus  Save the desktop-menu-4.html file and view the web page in your web browser. As in the previous two examples, the position: fixed setting causes the content that follows the desktop menu bar to flow upward so that it is positioned behind the navigation menu.  However, when the content that follows a sticky desktop menu is a hero-block with a large image, we can take advantage of this situation by making it a design feature.
  5. In the desktop-menu-4.css file, you can see that a third CSS class now follows the two classes menu-desktop-dark and menu-desktop-light. It is named menu-desktop-transparent as shown below. Project Navigation Menus 
  6. In the desktop-menu-4.html file, add this new menu-desktop-transparent class to the navigation menu in place of the menu-desktop-dark class as shown below. Project Navigation Menus 
  7. Save the desktop-menu-4.html file, and view the web page in your web browser. It should now look as shown below. Project Navigation Menus 
  8. However, when you scroll down the web page, you will notice that the white text of the desktop menu is invisible against the white background of the web page. Project Navigation Menus 
  9. To solve this issue, paste the following JavaScript code to the bottom of the menu-desktop-4.html file.
    
    <!-- Begin JavaScript code for menu styles on scrolling -->
    <script>
        window.onscroll = function() {scrollDesktop()};
        function scrollDesktop() {
            let headerDesktop = document.querySelector(".container-menu-desktop");
            let stickyDesktop = headerDesktop.offsetTop;
            if (window.pageYOffset > stickyDesktop) {
                headerDesktop.classList.add("menu-desktop-light");
                headerDesktop.classList.remove("menu-desktop-transparent");
            } else {
                headerDesktop.classList.add("menu-desktop-transparent");
                headerDesktop.classList.remove("menu-desktop-light");
            }
        }
    </script>
    <!-- End JavaScript code for menu styles on scrolling -->
    
    </body>
    </html>
    
    Note the following:
    • The JavaScript code is enclosed with the opening and closing <script> tags. These tags tell the web browser to process what's inside the tags as JavaScript code rather than HTML.
    • When the user first displays the web page and does not scroll, the desktop menu div of container-menu-desktop has the CSS class of menu-desktop-transparent assigned to it.
    • When the user scrolls down the page, the JavaScript code removes the menu-desktop-transparent class and replaces it with the menu-desktop-light class.
    • If the user scrolls back up to the top of the web page, the JavaScript replaces the menu-desktop-light class with the original menu-desktop-transparent class.
    In summary, the JavaScript code ensures that the menu text is always visible by attaching a solid background to the menu whenever the user scrolls down through the web page.
  10. Save the desktop-menu-4.html file, and view the web page in your web browser. As you scroll down the page, it should now look as shown below. Project Navigation Menus  The JavaScript code would work equally well if you replaced the menu-desktop-light class with the menu-desktop-dark class. The only difference would be that, on scrolling, the menu-desktop-transparent class would be replaced with the menu-desktop-dark class.

You have now finished working with the menu-desktop-4.html and menu-desktop-4.css files. You can close both files in your text editor.

Mobile screen 1: Scrolling menu bar

Follow these steps to review a typical navigation menu that is displayed on a mobile screen.

  1. In your web browser, open the following web page from the menus sub-folder of your websites folder:
    • menu-mobile-1.html
  2. In your text editor, open these two files:
    • menu-mobile-1.html located in your menus folder.
    • menu-mobile-1.css located in the assets/css sub-folder of your menus folder.
    In the menu-mobile-1.html, immediately after the opening <body> tag, you can see that the mobile menu consists of two main sections. Project Navigation Menus  Each of the two sections is contained inside a div. Together, these two divs control the display of the mobile menu:
    • container-menu-bar-mobile: This div, typically called the menu bar, contains the logo at the left and the three-bar icon at the right. The icon, typically called a hamburger icon, transforms into the close icon (X) when tapped by the user.
    • container-menu-options-mobile: This second div contains the menu options in a vertical, bulleted list. It is only displayed when the user taps the hamburger icon, when it slides into view from the right of the mobile screen. It disappears again when the user taps the close (X) icon. This type of menu is often called a slide-in/slide-out menu.
    For both divs, there are two styling options available from the CSS file. These are two classes named menu-mobile-light and menu-mobile-dark.  You can apply the same or different classes the two divs for the mobile menu. For example, you could apply a dark background to the mobile menu bar, but a light background to the slide-out menu options list. See the four possible combinations of dark/light styles below. Project Navigation Menus  Try the above combinations of styles in the menu-mobile-1.html file. In each case, save the file and view the result in your web browser.
  3. Now, you will add one style feature to the dark and light menus styles: a small shadow effect that is displayed along the bottom of the mobile navigation menu.  In the mobile-menu-1.css stylesheet, add this shadow style to both the menu-mobile-dark and menu-mobile-light classes as shown below. Project Navigation Menus 
  4. Save the CSS file, and view the web page in your web browser. Test that the shadow effect is visible for both the dark menu and light menu styles. Project Navigation Menus 

You have now finished working with the menu-mobile-1.html and menu-mobile-1.css files. You can close both files in your text editor.

Mobile screen 2: Sticky menu bar

Follow these steps to make a typical mobile navigation menu 'sticky' so that it remains fixed at the top of the screen when the user scrolls down through the web page.

  1. In your web browser, open the following web page from the menus sub-folder of your websites folder:
    • menu-mobile-2.html
    If you scroll down through the web page, you can see that the mobile menu scrolls out of view.
  2. In your text editor, open these two files:
    • menu-mobile-2.html located in your menus folder.
    • menu-mobile-2.css located in the assets/css sub-folder of your menus folder.
  3. In the menu-mobile-2.css stylesheet file, scroll down to just after the two styles for dark the light coloured menus for mobile screens. Press the Enter key a few times to open up some blank lines, and type the following new class.  Project Navigation Menus 
  4. In the menu-mobile-2.html file, add this new class to the container-menu-bar-mobile div for the mobile menu bar.  You do not need to add this menu-mobile-sticky class to the container-menu-options-mobile div that contains the list of menu options. Project Navigation Menus  Save the web page and view it in your web browser. You can see that the menu is now fixed to the top of the screen.
  5. Adding the CSS class with the style position: fixed to the container-menu-bar-mobile div has two effects:
    • It 'sticks' the container-menu-bar-mobile div to a fixed position at the top of the web page.
    • The 'sticky' div, because of its fixed position, is ignored by the remainder of the web page that is contained within the page-wrapper div.
    As you can see below, the content that follows the mobile menu acts as if the menu is not there. As a result, all content within the page-wrapper div is partly hidden behind the menu. Project Navigation Menus  One way to correct this is to add some additional spacing to the top of the page-wrapper div that follows after the sticky menu.
  6. In the CSS file, scroll down to the page-wrapper selector for mobile screens, and add a padding of 80 pixels to the top of the div as shown below. Project Navigation Menus 
  7. Save the CSS file and view the web page in your browser. It should look as shown below Project Navigation Menus 

You have now finished working with the menu-mobile-2.html and menu-mobile-2.css files. You can close both files in your text editor.

Mobile screen 3: Scrolling menu bar above hero block

Follow these steps to review a typical navigation menu that is displayed above a hero block on a mobile screen.

  1. In your web browser, open the following web page from the menus sub-folder of your websites folder:
    • menu-mobile-3.html
  2. In your text editor, open these two files:
    • menu-mobile-3.html located in your menus folder.
    • menu-mobile-3.css located in the assets/css sub-folder of your menus folder.
  3. In the menu-mobile-3.html file you can now see three main sections, each one contained in its own div.
    • Navigation menu: This is contained in two divs, one following after the other: container-menu-bar-mobile and container-menu-options-mobile.
    • Hero block: This is contained in a div named hero-block.
    • Other page content: This is contained in a div named page-wrapper.
    Note the following two points:
    • On mobile screens, the div that contains the desktop menu (container-menu-desktop) is not displayed (display: none), and so has no effect on the positioning of those divs that are displayed on mobile screens.
    • The two mobile menu divs are now followed by the hero-block div rather than the page-wrapper div.
    Project Navigation Menus 
  4. In the menu-mobile-3.css file you can see that the class named container-menu-bar-mobile is different in one way from the previous two examples: the class does not have a margin-bottom: 40px style.   As a result, the hero-block is positioned immediately beneath the mobile menu bar.  Project Navigation Menus  In your web browser, the web page looks as follows. Project Navigation Menus  You do not need to make any changes to the HTML or CSS file.

You have now finished working with the menu-mobile-3.html and menu-mobile-3.css files. You can close both files in your text editor.

Mobile screen 4: Sticky menu bar above hero block

Follow these steps to convert the scrolling navigation menu above a hero block on a mobile screen.

  1. In your web browser, open the following web page from the menus sub-folder of your websites folder:
    • menu-mobile-4.html
  2. In your text editor, open these two files:
    • menu-mobile-4.html located in your menus folder.
    • menu-mobile-4.css located in the assets/css sub-folder of your menus folder.
  3. In the menu-mobile-4.html file, add the class menu-mobile-sticky to the container-menu-bar-mobile div for the mobile menu bar. This will make the mobile menu bar 'sticky'  You do not need to add this menu-mobile-sticky class to the container-menu-options-mobile div that contains the list of menu options. Project Navigation Menus  Save the menu-mobile-4.html file and view the page in your web browser.  As before, the position: fixed setting within the menu-mobile-sticky class has caused the web page content (the hero-block div) that follows the mobile menu divs to be positioned behind the 'sticky' mobile menu bar. See below. Project Navigation Menus  As with desktop screens, we can take advantage of this situation by making it a design feature.
  4. In the mobile-menu-4.css file, you can see that a third CSS class now follows the two classes menu-mobile-dark and menu-mobile-light. It is named menu-mobile-transparent as shown below. Project Navigation Menus 
  5. In the mobile-menu-4.html file, add this new menu-mobile-transparent class to the mobile menu bar in place of the menu-mobile-dark class as shown below. Project Navigation Menus  You do not need to add this menu-mobile-transparent class to the container-menu-options-mobile div that contains the list of menu options. To this div, you can assign the dark or light classes menu-mobile-dark or menu-mobile-light, as required.
  6. At the bottom of the menu-mobile-4.html file is some JavasScript code that ensures the mobile menu bar is always readable regardless of which part of the web page is displayed on the mobile screen. It does this by attaching a solid white background to the menu bar whenever the user scrolls down the web page. Project Navigation Menus  This JavaScript code works for mobile menus in a similar way to how it works for menus on desktop screens:
    • When the user first displays the web page and does not scroll, the mobile menu bar div of container-menu-mobile has the CSS class of menu-mobile-transparent assigned to it.
    • When the user scrolls down the page, the JavaScript code removes the menu-mobile-transparent class and replaces it with the menu-mobile-light class.
    • If the user scrolls back up to the top of the web page, the menu-mobile-light class is replaced with the menu-mobile-transparent class.
  7. Save the HTML and CSS files, and view the web page in your web browser. It should now look as shown below. Project Navigation Menus  The JavaScript code would work equally well if you replaced the menu-mobile-transparent class with the menu-mobile-dark class, as shown below. The only difference would be that, on scrolling, the menu-mobile-transparent would be replaced with the menu-mobile-dark class.

Update the meta tags

In the <head> of your web page, within the <title>, <keywords> and <author> meta tags, is the name 'Mary Smith.' Replace this with your own name, and save the HTML file.

Project Hero Blocks

Add your Google Analytics tracking code

Near the top of your HTML file, just before the closing </head> tag, paste your website's unique tracking code from Google Analytics.

Google Analytics Tracking Code

Each Google Tracking Code will have a unique ID in its first and last line. When finished, save the HTML file.

Uploading 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 menus of your websites folder. So you will need to upload this menus sub-folder, which contains both files and other sub-folders, to your account on GitHub.

However, GitHub will not allow you to upload only a folder (such as menus) from your computer.

For this reason, you need to upload a file along with your menus folder. It can be any file. Follow these steps.

  1. Sign in to your account at GitHub.com. Upload to GitHub
  2. On your GitHub home page, click the name of the repository that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io   GitHub Upload
  3. On the next screen displayed, near the centre of the screen, click the Upload files button. Project Animation Google Fonts
  4. On your computer, display your websites folder. You should see that it contains the sub-folder named menus.
    • On a Windows computer, click on the menus folder to select it.   Next, press and hold down the CTRL key, and then click on any file in your websites folder to select it.
    • On an Apple Mac, press and hold down the COMMAND key, and then click on the menus folder and any file in your websites folder.
  5. Drag-and-drop the menus folder and whatever file you have selected to upload them to your GitHub account. In the example below, the file selected along with the menus folder is named base-0.html. Project Animation Google Fonts You do not need to select this particular file. You can use any file. But you cannot upload the menus folder (or any other folder) on its own.
  6. After uploading the menus folder and your selected file, 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. Project Setup
  7. Your main repository screen should now contain a folder named menus. Click on this folder. Project Animation Google Fonts
  8. The menus folder should contain eight HTML files and the assets sub-folder. Project Setup
  9. Click on the assets sub-folder to view its contents. You should see that it contains the two sub-folders named css and img. GitHub upload files
  10. Within the assets sub-folder, click on the css sub-folder. Check that it contains the eight stylesheet files. GitHub upload files
  11. Within the assets sub-folder, click on the img sub-folder. Check that it contains all the image files. GitHub upload files

Your web page will display correctly online only when:

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/menus/index.html

or, simply:

https://username.github.io/menus



Return to All Tutorials.