Меню
Спросить
*.{ }

Урок 4. Выпадающее меню

30 октября 2016
Урок 4. Выпадающее меню

Всем привет, сегодня мы напишем стили для предыдущего урока, а именно, создадим выпадающее меню и навигацию, так же разберем выравнивание текста.

Выпадающее меню css

Первое меню

Заходим на страницу "Категории" или просто наблюдаем и кодим =). У нас есть, созданный список в предыдущем уроке, и два пункта в нем. Это и будет наша первая жертва.

Начнем с блока с классом content_wrapper. Прижмем его к левому краю, при помощи свойства float, с параметром left. Внешние и внутренние отступы зададим по нулям. Если вы забыли, что такое внешние и внутренние отступы или не знали этого, то посмотрите соответствующий урок. Ширину зададим с помощью свойства width, с параметром 100%. И уберем рамку, на всякий случай =), border:none;.
Удалим позиционирование у элемента div с классом footer.

Элементы с классами content_wrapper_row, content_wrapper_row_spisok, content_wrapper_row_menublock, content_wrapper_row_head стилизуем аналогично.
Элементу content_wrapper_row_head задаем свойство text-align, с параметром center, о нем узнаете ниже.
Элементу content_wrapper_row_menublock задаем свойство border-bottom, с параметром 2px solid black.

Стилизуем список ul с классом content_wrapper_row_spisok точно так же, за исключением, внешних отступов. Отступ слева 10 пикселей(px).
У ссылки убираем нижнее подчеркивание:

  1. .content_wrapper_row_spisok a{
  2. text-decoration:none;
  3. }

Теперь теги li.

  1. .content_wrapper_row_spisok li{
  2. float:none;
  3. list-style:none;
  4. padding:5px;
  5. margin:2px;
  6. background:white;
  7. color:black;
  8. border-radius:5px;
  9. width:150px;
  10. }
  11. .content_wrapper_row_spisok li:hover{
  12. background:#cecece;
  13. }

Открываем следующую страницу "Менюшки" и добавляем стили для них. Каждый новый стиль будет подробнее рассмотрен в отдельных статьях =).

  1. .content_wrapper_row_menublock{
  2. float:left;
  3. margin:0;
  4. padding:0;
  5. width:100%;
  6. border:none;
  7. border-bottom:2px solid black;
  8. }
  9. #content_wrapper_row_menublock_one{
  10. float:left;
  11. margin:0 0 0 10px;
  12. padding:0;
  13. width:100%;
  14. border:none;
  15. }
  16. #content_wrapper_row_menublock_one li{
  17. float:none;
  18. list-style:none;
  19. padding:5px;
  20. margin:2px;
  21. background:white;
  22. color:black;
  23. border-radius:5px;
  24. width:150px;
  25. cursor:pointer;
  26. }
  27. #content_wrapper_row_menublock_one li:hover{
  28. background:#cecece;
  29. color:white;
  30. }
  31. #content_wrapper_row_menublock_two{
  32. float:left;
  33. margin:0 0 0 10px;
  34. padding:0;
  35. width:100%;
  36. border:none;
  37. }
  38. #content_wrapper_row_menublock_two li{
  39. float:left;
  40. list-style:none;
  41. padding:5px;
  42. margin:2px;
  43. background:black;
  44. color:white;
  45. border-radius:5px;
  46. cursor:pointer;
  47. }
  48. #content_wrapper_row_menublock_two li:hover{
  49. background:red;
  50. }
  51. #content_wrapper_row_menublock_two_podmenu{
  52. position:absolute;
  53. float:left;
  54. margin:5px 0 0 0;
  55. padding:0;
  56. border:none;
  57. display:none;
  58. }
  59. #content_wrapper_row_menublock_two_podmenu li{
  60. float:none;
  61. width:100px;
  62. }
  63. #content_wrapper_row_menublock_two li p{
  64. margin:0;
  65. padding:0;
  66. }
  67. #content_wrapper_row_menublock_two li:hover #content_wrapper_row_menublock_two_podmenu{
  68. display:block;
  69. }

Выравнивание текста

Открываем страницу "Тексты" и добавляем стили:

  1. .content_wrapper_row_textblock#one{
  2. text-align:center;/*Выравнивание текста по центру*/
  3. }
  4. .content_wrapper_row_textblock#two{
  5. text-align:left;/*Выравнивание текста по левому краю*/
  6. }
  7. .content_wrapper_row_textblock#three{
  8. text-align:right;/*Выравнивание текста по правому краю*/
  9. }
  10. .content_wrapper_row_textblock#fourth{
  11. text-align:justify;/*Выравнивание текста по ширине*/
  12. }

- У блока с id one текст выравнен по центру;
- У блока с id two текст выравнен по левому краю;
- У блока с id three текст выравнен по правому краю;
- У блока с id fourth текст выравнен по ширине;

Заключение

Вот и все. Более подробно узнать про не знакомые свойства можно внизу на видео или же в соответствующих статьях =).
Всем спасибо. Пока!

Следующая статьяПредыдущая статья