Duration: 10 to 15 minutes.
In this exercise, you will add navbars to pages for the Nan & Bob's Online site.
- Open WidgetsUI/Exercises/toolbars.html in a file editor.
- Add a navbar to the header of the #home page with links to "Home", "Books", and "Eats"; add appropriate icons to the top of each link.
- Add a navbar to the footer of each interior ("Books", "Eats") page; do not add icons to these navbars.
- Test your work in a mobile browser; the results should look like this:
We add a navbar to the header of the "Home" page, with appropriate
data-icon values to show an icon at the top of each link. We use
class="ui-btn-active" to make the "Home" link active for this page.
Each of the non-home pages gets a navbar in its footer, with
class="ui-btn-active" again used to make the relevant link active for each page.