1 / 14

Mastering Navigation Menus with CSS: Enhance User Experience

Elevate your web design skills with advanced navigation menu techniques using CSS. Learn how to style menus, create clickable buttons, adjust margins, add borders, and integrate iframes for a seamless user experience. Dive deep into CSS attributes to customize your website's navigation efficiently.

yolanda-terrell
Télécharger la présentation

Mastering Navigation Menus with CSS: Enhance User Experience

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML CSS Intermediate Group Week 3, National Software Centre, Mahon

  2. Week Two - Recap HTML CSS • Tables <table>, <th>, <tr> and <td> • Sections <section> • Navigation Menus <nav>, <ol>/<ul>, <li> and <a> • Tables (borders, background colours, colours, text align) • Sections (background colours, borders) • Navigation Menus (links, colours, horizontal/vertical)

  3. Question Time! A Recap on New Tags From Week 2

  4. Question Time! • What is this? • What do the individual tags mean? • What is its function?

  5. Question Time! • What does this add to our page? • What do the following tags mean?: - <imgsrc> - <alt>

  6. Question Time! What is this? What do the individual tags mean? What is its function?

  7. Question Time! What does this affect? What do the letters “th” and “td” mean? What do the individual lines mean?

  8. Question Time! • What does this affect? • What do the letters “ul” and “li” mean? • What does “display: inline” do?

  9. Week 3 Navigation Menus and Iframes

  10. Nav Menus - CSS • Today we’re going to start by doing some CSS • display: block makes the whole button of our link ‘clickable’ and not just the text • display: inline makes our links (a) horizontal

  11. Nav Menus - CSS • Next, we’re going to specify the space around and between the links. • The space between the links is called a ‘margin’.

  12. Nav Menus - CSS • Our menus look really cool, but still a bit hard to read. Let’s add a background colour to make it stand out more. • I’ve added black as my background colour.

  13. Nav Menus - CSS • Now let’s add a border to our navigation menu. • Adding a border to a menu is the same as adding one to a page or a table. • I also added the “display: inline” tag to the nav > ul > li to make sure everything is inline.

  14. Iframes • Iframes allow us to integrate another website into our own webpage (it’s really cool). • To make an iframe, we use the <iframe> and <src> tags. • The <height> and <width> tags can be used to make the frame bigger or smaller.

More Related