<div id=”quick-menu”>

<h3>Quick Links</h3>

<ul>

<li><a href=”#tables”>Tables</a></li>

</ul>

</div>

CSS

For the CSS our aim is to create a floating menu that sits just below the main navigation menu, off to the left side of the page, and follows the user down the page as they scroll. Have a think quickly now before moving forward. How do you think we might do this? Give it a go yourself before even looking at the steps. If you are really struggling then feel free to use the steps below, but do try to give it a go yourself first – you might surprise yourself.

The steps:

Write rules to achieve the following desired output per element:

• #quick-menu
  1. –  make the element fixed in position
  2. –  give the element a z-index of a positive number
  3. –  position the element 20px from the left
  4. –  position the element 60px from the top
  5. –  give the element a width of 200px
  6. –  set the height as auto
  7. –  give the element a white background
  8. –  apply 20px of padding to the top and bottom and 10px to either side of the div
• #quick-menu h3
  1. –  remove all margin from the top of the tag
  2. –  align the text in the centre
  3. –  colour the text with #333
  4. –  change the font size to 18px

Expected result: wow, what a difference that makes. We now have a nice and easy way for our users to navigate through our webpage. At any point in the page, no matter how far they scroll, they can always navigate away from the page, or to a different section on the page. This is extremely important with a website like this as it’s very likely to have very long pages, once we have added all of our examples. Adding this navigation option enhances the user experience twofold. Remember, we must always consider the user when creating our websites.

Expected code: