In this lesson we will learn how to create and design navigation bars. There are more ways to create one: we will use unordered lists in one exercise and simple links and button in another one. To achieve this, we need to study the possibilities to change the default position and visibility of an HTML element.
<button> - this tag can be used in forms too, but outside a form we can use it to attach actions to it. The content of this tag is usually short and has some design settings as default, which we did not experience in the case of lists or links (for example: centered content).
display – this property is used to change the display mode of an element. The basic display modes are block and inline. Some tags are displayed inline as default, like <a> and <img>, others as block, like <div> and <p>. The commonly used values for this property are: block, inline, inline-block and none.
float – this property is used for positioning too. A floated element is aligned to the left or right side leaving its originally occupied place, leaving no blank places. Possible values: left, right.
:not – this selector is used to add formatting in a “negative” way, or to add exceptions to a CSS description.
Possible forms:
p :not(.p1) – we apply to every paragraph, that does not have a class .p1
:not(p) – apply to every element, that is not a paragraph
- The block value for the display property means that the content appears in a separate row.
- The inline value means that the content of the tag melds between the other inline content in the row. We cannot add a margin or padding above or below. We cannot use height or width.
- The elements displayed as inline-block appear inline, but can implement sizing, margins and paddings without restriction.
- The none value is used to hide elements.
Example on display property:
The picture above contains a few types of contents with the default display settings: the paragraphs and the sections (marked with <div> tag) are by default displayed as block – each of them appear one above the other; the images appear inline-block as default, they appear in a line.
On the picture above we see the element with modified display settings: the sections are displayed as inline-block to place them in a row, the images are one above the other displayed as block and the paragraphs are displayed inline, in one row.
When using inline on a section it loses its height and width.
Example on showing hidden element:
On the picture above there is a webpage in two states: at first, the button with the identifier box2 does not appear, then when we move the mouse over the first button it appears.
It is not self-evident how to do this because the box2 should appear when we select the box1. We used :hover before, but the settings were applied to the selected element not to another: we use a + sign and mention the element we want to change as shown on the picture.
The + sign works if we have two neighboring elements (box2 must be after box1), we use ~ sign if the elements are on the same level but not neighbors, or > sign, if the hidden element is inside of the other (it is his child).
This unordered list should not have bullets. Remove them (list-decoration). Remove the default margin and padding, add the value 0 for the properties.
For every list item in the navigation bar the contained text should be aligned to the center (text-align). The list items appear one below the other, align them in a row, with inline-block display.
Every link in the list should have 20 pixel distance on top and bottom and 40 pixel distance on left and right (padding), remove the underline (text-decoration) and color it to black. The link is higher this way than the list item that contains it: use block display mode to force the links back to the list item.
If we move the cursor over a link, the color for the link should change. (:hover)
Define a CSS class named active, adding background color to the link referring to the current page. The links marked by this class should not change their background color when selected. Use the :not selector.
Set the active class in every HTML file for the correct link. (ex: in toplangs.html, only the link which refers in the href to toplangs.html should have the active class, and so forth in the other files)
Wrap these links in a <div> tag with the id drop and remove the <br> tags. Add a button before with the text with the text Dropdown menu. Wrap both of them in a <div> tag with the identifier menu2.
The menu2 section should slide (float) to right, its content (button and links) should be aligned (text-align) to the right too.
To the button in the menu2 section add a font color, background-color, padding and remove the border.
Format the four links adding border, padding, background color, font color, block display, remove the underline (text-decoration). The link having the cursor above should change its background color.
The drop section should not be displayed as default, but when we move the cursor over the menu2 section it should appear.
div:not(#box2) {
color: red;
}
https://www.w3schools.com/cssref/pr_class_display.asp;
https://www.w3schools.com/css/css_display_visibility.asp;
https://www.w3schools.com/html/html_blocks.asp;
https://www.w3schools.com/howto/howto_css_dropdown.asp;
https://www.w3schools.com/Css/css_navbar.asp.
