en:web_development:lists:menus
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
en:web_development:lists:menus [2021/11/29 12:26] mag created |
en:web_development:lists:menus [2023/08/16 09:33] (current) |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ====== Web Development Lesson | + | ====== Web Development Lesson |
| ===== Menus ===== | ===== Menus ===== | ||
| + | ==== Objectives ==== | ||
| + | In this exercise you will display lists as menus, create links to other pages and learn some basic layout properties. | ||
| ==== Setup ==== | ==== Setup ==== | ||
| * In this activity, we're going to start building a web site. | * In this activity, we're going to start building a web site. | ||
| Line 12: | Line 14: | ||
| ==== Sidebar ==== | ==== Sidebar ==== | ||
| * Many web sites use a sidebar for navigation or links. It's essentially a list of links, so a list structure is most effective. | * Many web sites use a sidebar for navigation or links. It's essentially a list of links, so a list structure is most effective. | ||
| - | * Let's create a list of the activities we've done so far. Add this code inside the < | + | * Let's create a list of the activities we've done so far. Add this code to ' |
| < | < | ||
| < | < | ||
| Line 44: | Line 46: | ||
| * Try these links to make sure they work as expected. Then we'll look at creating lists dynamically. | * Try these links to make sure they work as expected. Then we'll look at creating lists dynamically. | ||
| - | [[en: | + | ==== Block vs Inline ==== |
| + | * The other type of menu often used in web pages is across the page below the header. | ||
| + | * We can keep the list we've been using, but edit the CSS to make it look different. | ||
| + | * The first thing we need to do is to make the list horizontal. | ||
| + | * There are two basic modes for all HTML elements. | ||
| + | * Block elements stack vertically on top of each other. < | ||
| + | * Inline elements sit side by side horizontally. Examples include < | ||
| + | * These can be controlled, though, so you can make list items sit side by side. | ||
| + | * Add the following code to your ' | ||
| + | < | ||
| + | display: inline; | ||
| + | }</ | ||
| + | * < | ||
| + | * Open your ' | ||
| + | * If you're still seeing the bullets in your menu, it doesn' | ||
| + | < | ||
| + | list-style-type: | ||
| + | }</ | ||
| + | * Just for fun, let's make it look a little prettier. | ||
| + | < | ||
| + | list-style-type: | ||
| + | background-color: | ||
| + | padding-top: | ||
| + | padding-bottom: | ||
| + | } | ||
| + | |||
| + | li { | ||
| + | display: inline; | ||
| + | border-right: | ||
| + | } | ||
| + | |||
| + | a { | ||
| + | text-decoration: | ||
| + | color: #ccc; | ||
| + | padding: 10px; | ||
| + | font-weight: | ||
| + | font-family: | ||
| + | }</ | ||
| + | * You might not understand all these styles. We'll look at padding and borders in the next lesson on tables. Similarly, we'll look at different ways of specifying colours later in the course. | ||
| + | * Feel free to adjust some of these values to see what they do. | ||
| + | |||
| + | ==== Final Code ==== | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| + | * [[https:// | ||
| + | |||
| + | [[en: | ||
en/web_development/lists/menus.1638217586.txt.gz · Last modified: 2023/08/16 09:33 (external edit)
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
