2. CSS menu
โข Website is not limited to a single web page
โข The menu section of the website is designed
to help the visitor navigate the site.
โข Any menu is a list of links leading to the
internal pages of the site.
โข To add a navigation bar (menu) to a site is to
create a menu using CSS and HTML.
โข Navigation means - to move around within a
website or between websites
3. Types or Categories of Menus /
Navigation bar
โข Vertical menu
โข Horizontal menu
โข Drop down menu
4. Vertical menu
โข The first step in creating a vertical menu is to
create a unordered list.
โข To identify the list, so we'll add an id attribute
with the identifier navbar to it.
โข Each <li> element of our list will contain one
link
6. Horizontal menu
<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">About us</a></li>
</ul>
#navbar {
margin: 0;
padding: 0;
list-style-type:
none;
}
#navbar li {
display: inline; }
The display property for the <li> elements
must be set to inline so that the list items
are placed one after the other.
9. Dropdown Menu or Combo List
โข use the HTML select tag to create drop-down
menus
โข that users can select the value they want
โข The select tag normally goes within a form
element, with the items to choose from coded
within another tag, <option>.
10. Dropdown Menu or Combo List
<html>
<body>
<form>
<Label ><center> Drop down menu</center> </label><br>
<label> Select Cars </label>
<select>
<option value = "BMW"> BMW
</option>
<option value = "Mercedes"> Mercedes
</option>
<option value = "Audi"> Audi
</option>
<option value = "Skoda"> Skoda
</option>
</select>
</form>
</body>
</html>
