Strona z ćwiczeniami jest stroną archiwalną,
wiele materiałów jest już nieaktualnych,
ale jeżeli ktoś ma ochotę, to zapraszam... :)

Dzieła Człowieka

Bogactwo nie jest ulgą w kłopotach - jest tylko zmianą kłopotów

Zajęcia specjalizacyjne: III klasa TI
CSS

Ćwiczenie 18 - Menu w CSS

Wprowadzenie:

W tym ćwiczeniu omówione zostaną sposoby wykorzystania arkuszy stylów CSS do budowy menu nawigacyjnego na stronie internetowej.

  1. zadania do wykonania

Menu nawigacyjne buduje się w oparciu o listy wyliczeniowe.

Przykłady menu:


  1. menu pionowe
  2. menu pionowe rozwijane
  3. menu poziome
  4. menu poziome rozwijane


Menu pionowe

Budowę menu zaczyna się od przygotowania listy łączy do konkretnych podstron:


  1. <ul>
  2. <li><a href="#">Powrót</a></li>
  3. <li><a href="#">Drugi link</a></li>
  4. <li><a href="#">Trzeci link</a></li>
  5. <li><a href="#">Czwarty link</a></li>
  6. <li><a href="#">Piąty link</a></li>
  7. </ul>

Tak to wygląda na stronie (na wszystkich stronach z przykładami jest kolor tła: #dadada;):

menu pionowe - krok pierwszy

W następnym kroku należy, w arkuszu stylów, ustalić: wyświetlanie w bloku, marginesy i marginesy wewnętrzne, należy usunąć znaki wypunktowania i nadać kolory tekstowi jako linkowi aktywnemu i inny kolor tekstowi wskazanemu. Można, ewentualnie usunąć podkreślenie tekstu.


  1. ul
  2. {list-style: none;
  3. margin: 5px;
  4. padding: 0px;
  5. }
  6. ul a:link, ul a:visited
  7. {display: block;
  8. color: #005500;
  9. text-decoration: none;
  10. }
  11. ul a:hover
  12. {color: #ff00ff;
  13. text-decoration: underline;
  14. }

Tak to wygląda po pierwszych zmianach:

menu pionowe - krok drugi

Kolejnym zadaniem w formatowaniu jest nadanie odpowiedniego wyglądu łączom. W tym przykładzie łącza będą miały formę przycisków. Wobec tego trzeba nadać odpowiednią szerokość tych przycisków, marginesy wewnętrzne i obramowanie: inne dla łącza aktywnego i inne dla wskazanego. Dzięki wyświetlaniu w bloku cały przycisk będzie aktywny.

Dopisane właściwości są pogrubione.


  1. ul
  2. {list-style: none;
  3. margin: 5px;
  4. padding: 0px;
  5. display: block;
  6. width: 150px;
  7. }
  8. ul li
  9. {display: block;
  10. list-style: none;
  11. margin: 0px;
  12. padding: 0px;
  13. }
  14. ul a:link, ul a:visited
  15. {display: block;
  16. color: #005500;
  17. text-decoration: none;
  18. border: 2px outset #cccccc;
  19. padding: 5px;
  20. width: 120px;
  21. }
  22. ul a:hover
  23. {color: #ff00ff;
  24. text-decoration: underline;
  25. border-style: inset;
  26. padding: 7px 3px 3px 7px;
  27. }

Tak to wygląda po kolejnych zmianach:

menu pionowe - krok trzeci

W ostatnim kroku można jeszcze zmienić kolor tła przycisku - inny dla łącza aktywnego i inny dla wskazanego.


  1. ul
  2. {list-style: none;
  3. margin: 5px;
  4. padding: 0px;
  5. display: block;
  6. width: 150px;
  7. }
  8. ul li
  9. {display: block;
  10. list-style: none;
  11. margin: 0px;
  12. padding: 0px;
  13. }
  14. ul a:link, ul a:visited
  15. {display: block;
  16. color: #005500;
  17. text-decoration: none;
  18. border: 2px outset #cccccc;
  19. padding: 5px;
  20. width: 120px;
  21. background-color: #00ffff;
  22. }
  23. ul a:hover
  24. {color: #ff00ff;
  25. text-decoration: underline;
  26. border-style: inset;
  27. padding: 7px 3px 3px 7px;
  28. background-color: #0000ff;
  29. }

Tak wygląda gotowe menu pionowe:

menu pionowe - krok czwarty

do góry



Menu pionowe rozwijane

Przykład z menu pionowym rozwijanym również należy zacząć od przygotowania listy wyliczeniowej, tym razem zagnieżdżonej, której elementy będą łączami do podstron:


  1. <ul class="level1">
  2. <li class="submenu"><a href="#">Powrót</a>
  3. <ul class="level2">
  4. <li><a href="#">pierwszy a</a></li>
  5. <li><a href="#">pierwszy b</a></li>
  6. <li><a href="#">pierwszy c</a></li>
  7. <li><a href="#">pierwszy d</a></li>
  8. <li><a href="#">pierwszy e</a></li>
  9. </ul>
  10. </li>
  11. <li class="submenu"><a href="#">Drugi link</a>
  12. <ul class="level2">
  13. <li><a href="#">drugi a</a></li>
  14. <li><a href="#">drugi b</a></li>
  15. <li><a href="#">drugi c</a></li>
  16. <li><a href="#">drugi d</a></li>
  17. <li><a href="#">drugi e</a></li>
  18. </ul>
  19. </li>
  20. <li class="submenu"><a href="#">Trzeci link</a>
  21. <ul class="level2">
  22. <li><a href="#">trzeci a</a></li>
  23. <li class="submenu"><a href="#">trzeci b</a>
  24. <ul class="level3">
  25. <li><a href="#">trzeci b-1</a></li>
  26. <li><a href="#">trzeci b-2</a></li>
  27. <li><a href="#">trzeci b-3</a></li>
  28. <li><a href="#">trzeci b-4</a></li>
  29. <li><a href="#">trzeci b-5</a></li>
  30. </ul>
  31. </li>
  32. <li><a href="#">trzeci c</a></li>
  33. <li class="submenu"><a href="#">trzeci d</a>
  34. <ul class="level3">
  35. <li><a href="#">trzeci d-1</a></li>
  36. <li><a href="#">trzeci d-2</a></li>
  37. <li><a href="#">trzeci d-3</a></li>
  38. <li><a href="#">trzeci d-4</a></li>
  39. <li><a href="#">trzeci d-5</a></li>
  40. </ul>
  41. </li>
  42. <li><a href="#">trzeci e</a></li>
  43. </ul>
  44. </li>
  45. <li class="submenu"><a href="#">Czwarty link</a>
  46. <ul class="level2">
  47. <li><a href="#">czwarty a</a></li>
  48. <li><a href="#">czwarty b</a></li>
  49. <li><a href="#">czwarty c</a></li>
  50. <li><a href="#">czwarty d</a></li>
  51. <li><a href="#">czwarty e</a></li>
  52. </ul>
  53. </li>
  54. <li class="submenu"><a href="#">Piąty link</a>
  55. <ul class="level2">
  56. <li><a href="#">piąty a</a></li>
  57. <li><a href="#">piąty b</a></li>
  58. <li><a href="#">piąty c</a></li>
  59. <li><a href="#">piąty d</a></li>
  60. <li><a href="#">piąty e</a></li>
  61. </ul>
  62. </li>
  63. </ul>

Tak wygląda ta lista wyliczeniowa zagnieżdżona:

menu pionowe rozwijane - lista wyliczeniowa

W tym przykładzie, ze względu na jego dość wysoki stopień skomplikowania, podaję w całości wszystkie reguły arkusza stylów formatującego menu pionowe rozwijane:


  1. ul
  2. {float: left;
  3. width: 140px;
  4. background: #00ffff;
  5. margin: -1px 0 0 -1px;
  6. }
  7. ul
  8. {margin: 0;
  9. padding: 0;
  10. width: 140px;
  11. background-color: #00ffff;
  12. border: 1px solid #aaaaaa;
  13. }
  14. li
  15. {position: relative;
  16. list-style: none;
  17. margin: 0;
  18. border-bottom: 1px solid #cccccc;
  19. }
  20. ul ul
  21. {position: absolute;
  22. top: 0;
  23. left: 140px;
  24. display: none;
  25. }
  26. li.submenu
  27. {background: url(../grafiki/submenu.gif) 95% 50% no-repeat;
  28. }
  29. li a:link, li a:visited
  30. {display: block;
  31. padding: 5px;
  32. text-decoration: none;
  33. width: 140px;
  34. color: #005500;
  35. }
  36. ul a:link, ul a:visited
  37. {width: auto;
  38. color: #005500;
  39. }
  40. li a:hover
  41. {background-color: #0000ff;
  42. color: #ff00ff;
  43. text-decoration: underline;
  44. }
  45. li.submenu a:hover
  46. {background-color: #0000ff;
  47. color: #ff00ff;
  48. }
  49. ul.level1 li.submenu a:hover ul.level2
  50. {display: block;
  51. color: #ff00ff;
  52. }
  53. ul.level2 li.submenu a:hover ul.level3
  54. {display: block;
  55. color: #ff00ff;
  56. }

źródło skryptu: Eric A. Meyer, CSS według Erica Meyera. Kolejna odsłona


Tak wygląda gotowe menu pionowe rozwijane:

menu pionowe rozwijane

do góry



Menu poziome

Budowę menu zaczyna się od przygotowania listy łączy do konkretnych podstron - patrz tutaj.

Tak to wygląda na stronie (na wszystkich stronach z przykładami jest kolor tła: #dadada;):

menu poziome - krok pierwszy

Formatowanie należy zacząć od ustawienia listy w jednej linii. Można to uzyskać na dwa sposoby: ustalając wyświetlanie w linii lub blokowe. W poniższym przykładzie zastosowano drugi sposób w połączeniu z wyrównaniem w poziomie do lewej. Ponadto usunięto znaki wypunktowania, podkreślenie tekstu i nadano kolor czcionce - inny łącza aktywnego i inny wskazanego.


  1. ul, ul li
  2. {display: block;
  3. list-style: none;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. ul li
  8. {float: left;
  9. }
  10. ul a:link, ul a:visited
  11. {text-decoration: none;
  12. display: block;
  13. text-align: center;
  14. color: #005500;
  15. }
  16. ul a:hover
  17. {color: #ff00ff;
  18. text-decoration: underline;
  19. }

źródło: www.kurshtml.boo.pl


Tak wygląda menu poziome po formatowaniu:

menu poziome - krok drugi

Następnie łączom należy nadać formę przycisków:


  1. ul, ul li
  2. {display: block;
  3. list-style: none;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. ul li
  8. {float: left;
  9. }
  10. ul a:link, ul a:visited
  11. {text-decoration: none;
  12. display: block;
  13. text-align: center;
  14. color: #005500;
  15. width: 120px;
  16. border: 2px outset #cccccc;
  17. padding: 5px;
  18. }
  19. ul a:hover
  20. {color: #ff00ff;
  21. text-decoration: underline;
  22. border-style: inset;
  23. padding: 7px 3px 3px 7px;
  24. }

źródło: www.kurshtml.boo.pl


Tak wygląda menu poziome po kolejnych zmianach:

menu poziome - krok trzeci

W ostatnim kroku można jeszcze zmienić kolor tła przycisku - inny dla łącza aktywnego i inny dla wskazanego.


  1. ul, ul li
  2. {display: block;
  3. list-style: none;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. ul li
  8. {float: left;
  9. }
  10. ul a:link, ul a:visited
  11. {text-decoration: none;
  12. display: block;
  13. text-align: center;
  14. color: #005500;
  15. width: 120px;
  16. border: 2px outset #cccccc;
  17. padding: 5px;
  18. background-color: #00ffff;
  19. }
  20. ul a:hover
  21. {color: #ff00ff;
  22. text-decoration: underline;
  23. border-style: inset;
  24. padding: 7px 3px 3px 7px;
  25. background-color: #0000ff;
  26. }

źródło: www.kurshtml.boo.pl


Tak wygląda gotowe menu poziome:

menu poziome - krok czwarty

do góry



Menu poziome rozwijane

Przykład z menu poziomym rozwijanym również należy zacząć od przygotowania listy wyliczeniowej, tym razem zagnieżdżonej, której elementy będą łączami do podstron. Lista jest ta sama jak w przykładzie z menu pionowym rozwijanym - tutaj. Jedyna zmiana polega na tym, że cała lista ujęta jest w znaczniku <div>...</div>.

Tak wygląda ta lista wyliczeniowa zagnieżdżona:

menu poziome rozwijane - lista wyliczeniowa

W tym przykładzie, ze względu na jego dość wysoki stopień skomplikowania, podaję w całości wszystkie reguły arkusza stylów formatującego menu poziome rozwijane:


  1. div
  2. {float: left;
  3. border: 1px solid #aaaaaa;
  4. background: #00ffff;
  5. margin: 1px 0 0 0;
  6. width: 602px;
  7. }
  8. div ul
  9. {margin: 0;
  10. padding: 0;
  11. border: 1px solid #cccccc;
  12. border-width: 0 1px;
  13. background-color: #00ffff;
  14. }
  15. div li
  16. {position: relative;
  17. list-style: none;
  18. margin: 0;
  19. float: left;
  20. width: 120px;
  21. line-height: 1em;
  22. }
  23. div ul ul
  24. {position: absolute;
  25. width: 120px;
  26. display: none;
  27. }
  28. div ul ul li
  29. {border-bottom: 1px solid #cccccc;
  30. }
  31. div li.submenu
  32. {background: url(../grafiki/dropmenu.gif) 95% 50% no-repeat;
  33. }
  34. div li.submenu li.submenu
  35. {background: url(../grafiki/submenu.gif) 95% 50% no-repeat;
  36. }
  37. div li a:link, div li a:visited
  38. {display: block;
  39. padding: 0.25em 0 0.25em 0.5em;
  40. text-decoration: none;
  41. width: 120px;
  42. color: #005500;
  43. }
  44. div>ul a:link, div>ul a:visited
  45. {width: auto;
  46. color: #005500;
  47. }
  48. div li a:hover
  49. {background-color: #0000ff;
  50. color: #ff00ff;
  51. text-decoration: underline;
  52. }
  53. div li.submenu a:hover
  54. {background-color: #0000ff;
  55. color: #ff00ff;
  56. }
  57. div ul.level1 li.submenu a:hover ul.level2
  58. {display: block;
  59. color: #ff00ff;
  60. }
  61. div ul.level2 li.submenu a:hover ul.level3
  62. {display: block;
  63. color: #ff00ff;
  64. }
  65. div ul.level2
  66. {top: 1.5em;
  67. left: -1px;
  68. }
  69. div ul.level3
  70. {top: -1px;
  71. left: 120px;
  72. border-top: 1px solid #cccccc;
  73. }

źródło skryptu: Eric A. Meyer, CSS według Erica Meyera. Kolejna odsłona


Tak wygląda gotowe menu poziome rozwijane:

menu poziome rozwijane

do góry



Zadania do wykonania:

W tym ćwiczeniu należy zastosować własności CSS, które pozwolą zbudować menu pionowe i poziome. Zadanie polega na sformatowaniu jednego pliku HTML jednym plikiem CSS i drugiego pliku HTML drugim plikiem CSS. W pierwszym pliku HTML należy uzyskać menu pionowe, a w drugim menu poziome.

1. Należy zacząć od przygotowania struktury folderów i plików:


  1. foldery:
  2. cw_18 - główny
  3. pliki - zawarty w głównym
  4. style - zawarty w głównym

  1. pliki:
  2. plik_pion.html - w folderze pliki
  3. plik_poziom.html - w folderze pliki
  4. style_pion.css - w folderze style
  5. style_poziom.css - w folderze style

2. W obu plikach HTML należy umieścić taką samą treść:


  1. zawartość pliku HTML:
  2. szablon HTML 4.01 Transitional
  3. w sekcji <head>...</head>:
  4. łącze do arkusza stylów - patrz tutaj
  5. odpowiednio dla plików:
  6. plik_pion.html połączyć z style_pion.css
  7. plik_poziom.html połączyć z style_poziom.css
  8. w znaczniku <title>...</title> nazwa pliku
  9. w sekcji <body>...</body>:
  10. listę wyliczeniową z łączami:
  11. <ul>
  12. <li id="home"><a href="#">Home</a></li>
  13. <li><a href="#">Drugi link</a></li>
  14. <li><a href="#">Trzeci link</a></li>
  15. <li><a href="#">Czwarty link</a></li>
  16. <li><a href="#">Piąty link</a></li>
  17. </ul>

Po wpisaniu całej zawartości oba pliki powinny wyglądać tak - bez żadnego formatowania:

plik_pion.html

plik_poziom.html

3. W pliku CSS należy przygotować reguły formatujące oba pliki, tak by uzyskać menu pionowe i poziome.


  1. zawartość pliku CSS style_pion.css:
  2. kolor tła całej strony:
  3. body
  4. {background-color: #dadada;
  5. }
  7. reguły dla całej listy:
  8. ul
  9. {width: 250px;
  10. display: block;
  11. list-style: none;
  12. margin: 40px;
  13. padding: 0px;
  14. float: right;
  15. }
  17. reguły dla elementów potomnych listy - wierszy:
  18. ul li
  19. {display: block;
  20. list-style: none;
  21. margin: 0px;
  22. padding: 0px;
  23. text-align: right;
  24. }
  26. reguły dla łączy:
  27. li a:link, li a:visited
  28. {display: block;
  29. padding: 8px;
  30. width: 250px;
  31. color: #ffff00;
  32. background-color: #000080;
  33. border-top: 1px dotted #008000;
  34. text-decoration: none;
  35. font-family: 'Trebuchet MS';
  36. font-weight: bold;
  37. }
  39. reguły dla łączy wskazanych:
  40. li a:hover
  41. {color: #000080;
  42. background-color: #ffff00;
  43. text-decoration: underline;
  44. }
  46. reguły dla pierwszego łącza:
  47. li#home a:link, li#home a:visited
  48. {color: #000080;
  49. background-color: #ffff00;
  50. border-top: none;
  51. text-decoration: underline;
  52. }
  54. reguły dla pierwszego łącza wskazanego:
  55. li#home a:hover
  56. {color: #ffff00;
  57. background-color: #000080;
  58. border-top: none;
  59. text-decoration: none;
  60. }

Tak powinno wyglądać menu pionowe w pliku plik_pion.html:

plik_pion.html


  1. zawartość pliku CSS style_poziom.css:
  2. kolor tła całej strony:
  3. body
  4. {background-color: #dadada;
  5. }
  7. reguły dla całej listy:
  8. ul
  9. {height: 40px;
  10. margin: 40px;
  11. padding: 0;
  12. float: right;
  13. border-bottom: 3px double #008000;
  14. }
  16. reguły dla elementów potomnych listy - wierszy:
  17. ul li
  18. {display: inline;
  19. padding: 3px 25px;
  20. border-left: 3px double #008000;
  21. }
  23. reguły dla łączy:
  24. li a:link, li a:visited
  25. {color: #ff0000;
  26. text-decoration: none;
  27. font-family: 'Trebuchet MS';
  28. font-weight: bold;
  29. }
  31. reguły dla łączy wskazanych:
  32. li a:hover
  33. {color: #000000;
  34. text-decoration: underline;
  35. }
  37. reguła dla pierwszego wiersza:
  38. li#home
  39. {border-left: none;
  40. }
  42. reguły dla pierwszego łącza:
  43. li#home a:link, li#home a:visited
  44. {color: #000000;
  45. text-decoration: underline;
  46. }
  48. reguły dla pierwszego łącza wskazanego:
  49. li#home a:hover
  50. {color: #ff0000;
  51. text-decoration: none;
  52. }

Tak powinno wyglądać menu pionowe w pliku plik_poziom.html:

plik_poziom.html

Tak wyglądają oba pliki ze swoimi menu:

menu pionowe - plik_pion.html

menu poziome - plik_poziom.html


Oceniany będzie folder cw_18 z dwoma podfolderami: pliki i style, w których zawarte będą odpowiednio pliki: w folderze pliki: plik_pion.html i plik_poziom.html, w folderze style: style_pion.css i style_poziom.css.

Pliki HTML powinny być sformatowane zgodnie z poleceniami za pomocą zewnętrznych arkuszy stylów. Efektem formatowania winny być dwa menu: pionowe i poziome.




Strona Główna


do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki