css
DESCRIPTION
CSS. Menus and Rollovers. Agenda foil. Separating style from content 3 pages in one file Rollovers in CSS Horizontal drop-downs Vertical drop-downs. Separating style from content. It is considered good programming style to separate the information from its formatting. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/1.jpg)
CSS
Menus and Rollovers
![Page 2: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/2.jpg)
Agenda foil
• Separating style from content• 3 pages in one file• Rollovers in CSS• Horizontal drop-downs• Vertical drop-downs
![Page 3: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/3.jpg)
Separating style from content
• It is considered good programming style to separate the information from its formatting.
• The information goes into the HTML file.• The formatting goes into the CSS file.• A good demonstration of this can be found in
the site: http://www.csszengarden.com/
![Page 4: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/4.jpg)
![Page 5: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/5.jpg)
![Page 6: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/6.jpg)
![Page 7: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/7.jpg)
3 Pages in One File
![Page 8: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/8.jpg)
3 pages in one file
• In many web pages the masthead remains the same from page to page, as does the menu.
• All that changes is the content.• So we put the content for 3 pages onto the
one page and hide two of the “pages”.• We use CSS: – display: block;– display: none;
![Page 9: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/9.jpg)
3 pages in one file
• Demo what it does (a-switch)
![Page 10: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/10.jpg)
![Page 11: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/11.jpg)
![Page 12: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/12.jpg)
The menu links call a JavaScript routine
• When clicked, the link does not call a web page (“#”)
• Instead, it calls a JavaScript routine using a parameter (‘n0’ etc).
![Page 13: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/13.jpg)
Here are the JavaScript functions
• The links call the function “display()”.
![Page 14: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/14.jpg)
3 pages in one file
• The links call the JavaScript functions• First the function “killall()” sets all content
sections to invisible.• Then the function “display(x)” selects the
content section to make visible.
• That’s all folks:
![Page 15: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/15.jpg)
Rollovers in CSS
![Page 16: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/16.jpg)
Rollovers in CSS
• The key to making rollovers work is to use the:hover pseudoclassas in:
• a:link• a:visited• a:hover
![Page 17: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/17.jpg)
Rollovers with background colour
![Page 18: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/18.jpg)
Rollovers with background colour
• Demo (rollover, bgcolour)
![Page 19: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/19.jpg)
Rollovers with background images
![Page 20: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/20.jpg)
Rollovers with background images
• You simply define a different image in a:hover
• Demo
![Page 21: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/21.jpg)
Rollovers with background images
![Page 22: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/22.jpg)
Horizontal drop-downs
![Page 23: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/23.jpg)
Horizontal drop-downs
• By this I mean a horizontal menu, from which a second menu drops down
• Demo (horiz-6)
![Page 24: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/24.jpg)
Horizontal drop-downs
• We start off with a normal web page (demo html)
• We then use CSS to style everything except the menu (demo html+css). We want a horizontal menu, but we now have a vertical menu.
![Page 25: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/25.jpg)
Horizontal drop-downs
• Next we flatten the menu (html+css-1), using:list style: none;margin: 0;padding: 0;
![Page 26: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/26.jpg)
Horizontal drop-downs
• Next (html+css-2) we arrange the list elements horizontally by floating them to the left.
![Page 27: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/27.jpg)
Horizontal drop-downs
• Next (html+css-3) we display all links as blocks of width 200px and height 30px. This spreads the top line along the menu bar. We also remove the underlines of the links usingtext-decoration: none;
![Page 28: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/28.jpg)
Horizontal drop-downs
• Next (html+css-4) we stop the submenus from being displayed at all (we’ll get them back later). We also set the submenus to position absolute, so they will not disturb the rest of the layout when they do appear.
![Page 29: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/29.jpg)
Horizontal drop-downs
• Here is an example of what happens when you don’t set the dropdown elements to position absolute:
• (demo try-index)
![Page 30: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/30.jpg)
Horizontal drop-downs
• Next (css+html-5) we make the submenus appear when the menu elements are moused over. We use “hover” for that.
![Page 31: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/31.jpg)
Horizontal drop-downs
• Finally (html+css-6) we style the submenus to make them look better.
• That’s it!
![Page 32: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/32.jpg)
Vertical drop-downs
![Page 33: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/33.jpg)
Vertical drop-downs
• This section covers vertical menus with submenus which appear to the side. Perhaps “drop-down” is an inappropriate name.
![Page 34: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/34.jpg)
• We start with a standard HTML page (1-html)
![Page 35: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/35.jpg)
• We add CSS to put everything in the right place.
![Page 36: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/36.jpg)
• As usual, we put in CSS to hide the submenus normally, but display them when the main menu is moused over (demo 4-strict css).
![Page 37: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/37.jpg)
• We style the box, to give it a background colour.
• We give it a width and a position, which would cause it to interact with the content section,
• So we make the block absolute, so it sits on top of the content block. (5-strict css+style)
![Page 38: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/38.jpg)
• Finally we tidy up the page by adjusting the background colours. (6-tidy1)
![Page 39: CSS](https://reader036.vdocuments.mx/reader036/viewer/2022062501/56816726550346895ddbb972/html5/thumbnails/39.jpg)
Agenda foil
• Separating style from content• 3 pages in one file• Rollovers in CSS• Horizontal drop-downs• Vertical drop-downs