Working with Menus

Creating menus for a web page - both a desktop navigation menu bar or 'navbar' and a mobile 'flyout' or 'off-canvas' menu.

Overview of navigation menubars

On desktop/laptop screens, the main navigation menu is commonly a horizontal bar that stretches left-to-right across the top of the screen. It is commonly called a menubar or navbar. Typically:

  • The logo is positioned at the left.
  • Various menu options are positioned at the right.
  • One menu option – named the Call-To-Action (CTA) – is usually highlighted by being styled as a button.

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

  • Light background, dark text: Black or other dark-coloured text is displayed against a white or other light-coloured background. Project Navigation Menus
  • Dark background, light text: White or other light-coloured text is displayed against a black or other dark-coloured background. Project Navigation Menus
  • Transparent background: In this case, the background image appears directly behind the text of the menu options. The text may be dark or light – what is important is that the text is readable against the colours in background image. Project Navigation Menus

Exercise folders and files

Your first task to obtain and open the files your need for this exercise.

  1. Download the following ZIP file to your 📁 exercises sub-folder.   menus.zip.
  2. Unzip the file. It will create a new sub-folder named 📁 menus inside your 📁 exercises folder.
  3. With your web browser, display the index.html web page inside the new 📁 menus folder.
  4. Next, with VS Code, open the same index.html file.
  5. Finally, with VS Code, open the assets/css/custom.css stylesheet inside the new 📁 menus folder.

UK-Kit files

For your desktop and mobile menus to work, you will ned the following two files for the UI-Kit web page buidler.

  • The lunadoge.css stylesheet file. This should be in your 'main' 📁 assets/css sub-folder.
  • The menu.js JavaScript file. This should be in your 'main' 📁 assets/js sub-folder.

That's it. You now have all the resources you need.

Creating a basic web page menu

Here are the steps.

  1. In your web browser, open the UI-Kit.
  2. Near the end of the list of layout options, choose the Menu option.
  3. On the Main Options menu, set the Hyperlinks colours.
    • For Passive Hyperlinks, choose the fourth Green. menus
    • For Passive Hyperlinks, choose the third Green. menus
  4. Next, also the Main Options menu, set the CTA BUTTON colours.
    • For Passive Background, choose the fourth Green.
    • For Passive Border, also choose the fourth Green.
    • For Active Background, choose the third Green.
    • For Active Border, choose the third Green.
  5. Finally, choose the Mobile Menu option and set the Hamburger Icon colour to the fourth Green.
  6. Use the Copy HTML button to copy-and-paste the new menu in the index.html web page, just after the opening <body> tag menus
  7. Use the Copy CSS buttons to copy-and-paste your style rules at the end of the custom.css stylesheet. menus
  8. In the menu you pasted into the index.html web page, edit the hyperlinks and the hyperlink text as follows. menus

Your web page with the new menu should now look similar to that below. Verify that the menu displays correctly on a mobile-sized screen.

menus

Uploading your files to GitHub

After finishing your updates, you are now ready to upload your files 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 ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io github-signin
  3. On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it. github-upload-portfolio
  4. From the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  5. In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop your 📁 exercises folder to upload it to your repository on GitHub.
  6. Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
  7. Finally, click the green Commit changes button to upload your files. Project Animation Google Fonts

Your portfolio web pages are now published on GitHub at web addresses similar to the following:

https://username.github.io/exercises/menus/index.html

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