Download to read offline
More Related Content
Similar to Dropdown Menu or Combo List.pdf
More from Kongu Engineering College, Perundurai, Erode
![ANPARA THERMAL POWER STATION[1] sangam.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/anparathermalpowerstation1sangam-251121115219-9261cde4-thumbnail.jpg?width=640&height=640&fit=bounds)
Dropdown Menu or Combo List.pdf
- 1. CSS menu Dr.T.Abirami Associate Professor Departmentof IT Kongu Engineering College Perundurai
- 2. CSS menu • Websiteis 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 Categoriesof Menus / Navigation bar • Vertical menu • Horizontal menu • Drop down menu
- 4. Vertical menu • Thefirst 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
- 5. Example <ul id="navbar"> <li><a href="#">Home</a></li> <li><ahref="#">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; width: 100px; }
- 6. Horizontal menu <ul id="navbar"> <li><ahref="#">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.
- 7. <Html> <Head> <Title> Make a NavigationBar </Title> <style> #navbar { margin: 0; padding: 0; list-style-type: none; } #navbar li { display: inline; } </style> <body> <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> </body> </html>
- 8. Dropdown Menu orCombo List
- 9. Dropdown Menu orCombo 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 orCombo 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>