Mobile Navigation Examples

Follow the links below to see examples of different types of mobile navigations. Download the zip files to try it yourself. Test to see if these are built using progressive enhancement techniques:

http://dan-wong.com/mobilenav/css-only/css-nav.html
http://dan-wong.com/mobilenav/css-only.zip
http://www.dan-wong.com/mobilenav/multitoggle/
http://www.dan-wong.com/mobilenav/multitoggle.zip
http://www.dan-wong.com/mobilenav/Respond-Menu/
http://www.dan-wong.com/mobilenav/Respond-Menu.zip
http://www.dan-wong.com/mobilenav/responsiveslideout/
http://www.dan-wong.com/mobilenav/responsiveslideout.zip
http://www.dan-wong.com/mobilenav/slideoutcss3translate/
http://www.dan-wong.com/mobilenav/slideoutcss3translate.zip
http://www.dan-wong.com/mobilenav/topdown/
http://www.dan-wong.com/mobilenav/topdown.zip

Test Questions

  1. Name 1 block element.
  2. Name 1 inline element.
  3. What is the difference between an inline element and a block element?
  4. What is the difference between an ID and a CLASS? When is it appropriate to use each?
  5. Describe and/or write the code for an inline style.
  6. Describe and/or write the code to link an external stylesheet.
  7. Describe and/or write the code for an embedded style.
  8. What is a contextual selector?
  9. What is a class selector?
  10. What is a child selector?
  11. What is a sibling selector?
  12. Describe 1 technique to center a layout in a browser.
  13. Describe the differences between a fixed and liquid layout.
  14. Describe a technique to position 2 columns so they sit next to each other.
  15. Write the css code that will force a block element (e.g., div) to fall below a series of floated block elements?
  16. What is the most important tag on a page for search engine optimization?
  17. Describe why duplicate content is a concern for search engine spiders?
  18. Describe one strategy to resolve a duplicate content issue.
  19. Describe when it best to use the “font-weight:bold” style, when it is best to use an <h2> tag, and when it is best to use the <strong> tag.
  20. Write the css and html for a 3-column fixed layout. You must specify a header, footer, main content, secondary content, sidebar.
  21. Write the css and html for a 2-column liquid layout. You must specify a header, footer, main content, sidebar.