×
Закрытие
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Создаем сайт для работы в Интернете

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

    Здравствуйте уважаемый посетитель!

    Наверное, многие задаются вопросом, как можно самому создать сайт для работы в Интернете или просто для реализации своих интеллектуальных способностей.

    Причем чтобы такой сайт был создан не в стандартном исполнении на основе какой-нибудь бесплатной СMS, а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Данный сборник статей и предназначен для того, чтобы показать на реальном примере, как можно самому с нуля создать интернет-ресурс, который в последствии можно использовать в качестве инструмента для своей работы.

    При этом в материалах сборника приводится не только подробное описание каждого этапа создаваемого самописного сайта, но и бесплатно предоставляются все исходные коды с соответствующими таблицами базы данных. Что существенно упрощает использования предоставляемого шаблона сайта под свои конкретные задачи.

    Следует к этому добавить, что при желании, после получения необходимых знаний и навыков в вопросах сайтостроения, вполне возможно заняться и созданием сайтов на заказ. Тем более, что эта работа очень интересна и достаточно хорошо оплачиваемая. И что немаловажно, ее можно выполнять удалено, занимаясь в любое время не выходя из дома. Для этого нужно всего лишь одно условие - подключение к сети Интернет, что в наше время не является какой-либо проблемой.

    И надеюсь, что данный материал позволит многим желающим не только создать свой сайт для работы в сети Интернет, но и поможет овладеть необходимой компетенцией для занятия профессиональным веб-программированием.

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние самописного сайта, который создается для работы в Интернете в рамках цикла статей Как сделать сайт.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Верстка → Делаем выпадающее меню на CSS


Автор: / Дата:

Как сделать выпадающее меню на CSS

Делаем выпадающее меню на CSS

Здравствуйте уважаемый посетитель!

Сегодня коснемся вопроса, который был задан одним из пользователей, а именно: как на сайте сделать выпадающего меню.

Действительно, многоуровневая система навигации довольно часто применяется для упорядочения поиска нужных разделов. Поэтому будет нелишним и в нашем сайте рассмотреть возможность использования такого решения.

При этом посмотрим, как можно создать выпадающее меню без использования JavaScript, применив только CSS. Так как зачем лишний раз использовать какие-либо скрипты, когда это достаточно просто можно сделать общедоступными свойствами CSS.

Содержание


  • Создаем HTML-структуру выпадающего меню
  • Трансформируем вложенный список в выпадающее меню
  • Оформляем элементы созданной системы навигации
  • Исходные файлы сайта

Создаем HTML-структуру выпадающего меню


В нашем случае выпадающее меню будем делать для раздела "Статистика угонов", в который непосредственно входят подразделы, соответствующие следующим страницам:

  • Статистика угонов автомобилей за 2016 год;
  • Статистика угонов автомобилей за 2017 год;
  • Статистика угонов автомобилей за 2018 год;
  • Статистика угонов автомобилей за 2019 год.

При этом второй уровень навигации будем использовать только для варианта работы устройствами с разрешением более 600px. Так как при меньшем разрешении у нас предусмотрено преобразование меню под мобильные устройства с его скрытием и вертикальным расположением его пунктов.

И чтобы это реализовать, в первую очередь необходимо сформировать HTML-структуру вложенного списка, который будет содержать соответствующие пункты выпадающего меню.

Для этого в файле menu.php папки blocks, в элемент <li>, соответствующий пункту меню "Статистика угонов", следует добавить дополнительный вложенный список.

Ниже показан код, в котором добавленные и измененные строки, определяющие структуру выпадающего меню, обозначены более светлым фоном относительно ранее используемых фрагментов.

  1. <?php

  2. //----Главное меню с вложенным списком----

  3. $data_bd = getAll('url');

  4. for ($i = 0; $i < count($data_bd); $i++) {

  5. $title = $data_bd[$i]['title'];

  6. if (!empty($title)){

  7. $id = $data_bd[$i]['id'];

  8. $section = $data_bd[$i]['section'];

  9. $rubric = $data_bd[$i]['rubric'];

  10. $page = $data_bd[$i]['page'];

  11. if (!empty($section)) $section_slash = "/".$section;

  12. else

  13. $section_slash = "";

  14. if (!empty($rubric)) $rubric_slash = "/".$rubric;

  15. else

  16. $rubric_slash = "";

  17. if (!empty($page)) $page_slash = "/".$page.'.html';

  18. else

  19. $page_slash = "/";

  20. if ((!empty($page) && ($get_array[0] == $page || $get_array[1] == $page || $get_array[2] == $page)) || (empty($page) && empty($get_array[0]) && empty($get_array[1]) && empty($get_array[2]))) $activ = 'activ';

  21. else

  22. $activ = "";

  23. if($page == 'stati'){

  24. ?>

  25. <li class="drop-menu <?php echo $activ;?>" ><a href="/stati.html">Статистика угонов</a>

  26. <ul>

  27. <li><a <href="/stati/ugon-avtomobilej-2016.html">Угоны за 2016 год</a></li>

  28. <li><a <href="/stati/ugon-avtomobilej-2017.html">Угоны за 2016 год</a></li>

  29. <li><a <href="/stati/ugon-avtomobilej-2018.html">Угоны за 2016 год</a></li>

  30. <li><a <href="/stati/ugon-avtomobilej-2019.html">Угоны за 2016 год</a></li>

  31. </ul>

  32. </li>

  33. <?php

  34. }

  35. else{

  36. echo '<li class="'.$activ.'"><a href="'.$section_slash.$rubric_slash.$page_slash.'">'.$title.'</a></li>';

  37. }

  38. }

  39. }

  40. ?>

Рис.1 Добавление вложенного списка в файле "menu.php"

Как видно, вложенный маркированный список <ul> (поз.26÷31) добавляется только для элемента <li> (поз.25,32), в котором адрес страницы соответствует значению stati (поз.23). И таким образом он будет относиться только к этому пункту меню. Для остальных, все остается по-прежнему без изменений (поз.36).

Кроме того в элементы вложенного списка включены навигационные ссылки <a> с соответствующими адресами страниц и наименованиями пунктов выпадающего меню (поз.27÷30).

После внесенных изменений обновим страницу и посмотрим, добавились ли новые пункты вложенного списка в меню.

Вид меню после добавления вложенного списка

Рис.2 Вид меню после добавления вложенного списка

На скриншоте видно, что в меню добавились новые пункты вложенного списка. Однако, это только промежуточный результат, не то, к чему мы стремились в конечном счете.

Поэтому в следующим шагом, используя свойства CSS, мы сделаем так, чтобы вложенный список появлялся только после наведения курсора на родительский элемент главного меню. И при этом его пункты располагались не в линию, а друг под другом. А затем, также стилями CSS оформим их под дизайн нашего сайта.

Трансформируем вложенный список в выпадающее меню


Для того, чтобы преобразовать вложенный список в выпадающее меню необходимо сделать следующие преобразования:

  • Для обычного состояния (без наведения курсора на панель главного меню) требуется скрыть вложенный список. А отображение его осуществлять только при наведении курсора на родительский элемент меню, в данном случае "Статистика угонов".
  • Расположить пункты вложенного списка вертикально, непосредственно под родительским элементом.

Ниже показан CSS-код главного меню для разрешения более 600px, где можно увидеть, каким образом можно это реализовать. Добавленные строки кода, которые выполняют указанные преобразования, обозначены более светлым фоном по сравнению с существующими до преобразований.

  1. /*----Главное меню-----*/

  2. .menu {

  3. display:table;

  4. width:95%;

  5. margin:0 auto;

  6. position:relative;left:0;top:0;

  7. z-index:10;

  8. }

  9. .menu ul {

  10. display:table-row;

  11. }

  12. .menu ul li {

  13. display:table-cell;

  14. width:20%;

  15. list-style-type:none;

  16. border:.0625em solid #2e376c;

  17. border-radius:0.375em 0.375em 0 0;

  18. vertical-align:middle;

  19. background-image:none;

  20. }

  21. .menu a {

  22. height:46px;

  23. width:1920px;

  24. display:table-cell;

  25. vertical-align:middle;

  26. text-align:center;

  27. font-size:.875em;

  28. font-weight:bold;

  29. text-align:center;

  30. line-height:1;

  31. color:#2e376c;

  32. text-decoration:none;

  33. color:#2e376c;

  34. padding:0 .3125em;

  35. }

  36. .menu ul .activ{

  37. background:#eeefcd;

  38. box-shadow:.0625em .125em .375em 0 #4c5150 inset;

  39. }

  40. .menu li:hover{

  41. background:#e1e0e2;

  42. box-shadow:.0625em .125em .375em 0 #4c5150 inset;

  43. }

  44. /*----Выпадающее меню-----*/

  45. .menu ul ul{

  46. display:none;

  47. position:absolute;left:0;top:46px;

  48. }

  49. .menu ul li{

  50. position:relative;

  51. }

  52. .menu ul li:hover ul{

  53. display:block;

  54. }

  55. .menu ul ul li{

  56. display:block;

  57. width:inherit;

  58. }

Рис.3 Преобразование вложенного списка в выпадающее меню

Для того, чтобы вложенный список .menu ul ul (поз.45) в обычном состоянии на веб-странице не был виден, для него применено свойство display:none (поз.46). (Чтобы вложенный список не отображался при работе с мобильными устройствами с минимальным, менее 600px разрешением, необходимо также применить это свойство в начале таблицы стилей CSS вместе со стилями, формирующими меню для работы в этом режиме.)

В то же время, назначение родительскому элементу главного меню .menu ul li псевдо-класса :hover (поз.52), обеспечивает отображение вложенного списка при наведении курсора на соответствующий пункт меню. Обусловлено это переводом списка из состояния display:none в display:block (поз.53).

Что касается вертикального расположения пунктов списка под родительским элементом главного меню, то это достигается следующим назначением свойств:

  • применение к вложенному списку .menu ul ul (поз.45) абсолютного позиционирования position:absolute (поз.47) относительно родительского элемента .menu ul li (поз.49), имеющего относительное позиционирование position:relative (поз.50);
  • сдвиг вниз вложенного списка на величину top:46px (поз.47), равную высоте родительского элемента;
  • преобразование элементов списка .menu ul ul li (поз.55) в блочные элементы display:block (поз.56).
  • задание ширины элементов списка .menu ul ul li (поз.55), равным родительскому элементу width:inherit.

После того, как мы добавим в таблицу стилей указанные свойства CSS, можно посмотреть на результат сделанных преобразований.

Вид меню без вложенного списка

Рис.4 Вид меню без вложенного списка

Как видно, в обычном состоянии, когда пункты меню не находятся под курсором, выпадающее меню скрыто. И отображается лишь только активный пункт меню, в данном случае "Статистика угонов".

А теперь попробуем навести курсор на этот пункт, который является, к тому же, родительским элементом добавленного вложенного списка.

Отображение выпадающего меню при наведении курсора на родительский элемент

Рис.5 Отображение выпадающего меню при наведении курсора на родительский элемент

И теперь, при наведении курсора на соответствующий пункт меню, открылись все элементы вложенного списка.

Правда, они сейчас отображаются без фона и с неправильным границами элементов. Поэтому следующим шагом будет приведение в порядок внешнего вида созданного второго уровня навигации.

Оформляем элементы созданной системы навигации


Следует отметить, что оформление элементов выпадающего меню в полной мере зависит от конкретного дизайна основной панели меню.

Поэтому в данном случае здесь будет показан CSS-код, который стилизует внешний вид его элементов конкретно для нашего создаваемого сайта. Естественно, в других случаях необходимо будет использовать иные варианты назначения свойств.

При этом стилизация элементов с помощью CSS не является основным вопросом, который рассматривается в данной статье. Этой теме уделялось достаточное внимание на ранних этапах создания сайта. И здесь мы не будем подробно разбирать строки CSS-кода, а ограничимся лишь общими комментариями и приведением конечного варианта соответствующего фрагмента.

В любом случае на этапе оформления следует предусмотреть определенные действия, которые обеспечат соответствие пунктов выпадающего меню к внешнему виду главной панели навигации. Для этого соответствующим образом следует:

  • задать размер шрифта, расположение и цвет текста.
  • назначить фон элементов в исходном состоянии и при появлении над ними курсора;
  • установить размеры элементов, а также ширину, стиль и цвет их границ;

В нашем случае некоторые CSS-свойства унаследованы от родительского элемента. Поэтому при оформлении выпадающего меню часть из них будет использована без изменений, такие как размер шрифта, расположение и цвет текста.

А вот что касается размера пунктов меню и их границ, то в данном случае потребуется определенное переназначение свойств. Обусловлено это тем, что для приведения в соответствие ширины пунктов выпадающего меню к родительским элементам, необходимо использовать внешние границы, отменив унаследованные внутренние рамки с их закруглённостью.

В общем, с учетом вышесказанного, ниже показан CSS-код с дополнениями (выделены светлым фоном), которые позволяют получить, на мой взгляд, вполне приемлемый вид элементов выпадающего меню. Конечно, могут быть и другие варианты реализации, но я здесь остановился на этом.

  1. /*----Главное меню-----*/

  2. .menu {

  3. display:table;

  4. width:95%;

  5. margin:0 auto;

  6. position:relative;left:0;top:0;

  7. z-index:10;

  8. }

  9. .menu ul {

  10. display:table-row;

  11. }

  12. .menu ul li {

  13. display:table-cell;

  14. width:20%;

  15. list-style-type:none;

  16. border:.0625em solid #2e376c;

  17. border-radius:0.375em 0.375em 0 0;

  18. vertical-align:middle;

  19. background-image:none;

  20. }

  21. .menu a {

  22. height:46px;

  23. width:1920px;

  24. display:table-cell;

  25. vertical-align:middle;

  26. text-align:center;

  27. font-size:.875em;

  28. font-weight:bold;

  29. text-align:center;

  30. line-height:1;

  31. color:#2e376c;

  32. text-decoration:none;

  33. color:#2e376c;

  34. padding:0 .3125em;

  35. }

  36. .menu ul .activ{

  37. background:#eeefcd;

  38. box-shadow:.0625em .125em .375em 0 #4c5150 inset;

  39. }

  40. .menu li:hover{

  41. background:#e1e0e2;

  42. box-shadow:.0625em .125em .375em 0 #4c5150 inset;

  43. }

  44. /*----Выпадающее меню-----*/

  45. .menu ul ul{

  46. display:none;

  47. position:absolute;left:0;top:46px;

  48. }

  49. .menu ul li{

  50. position:relative;

  51. }

  52. .menu ul li:hover ul{

  53. display:block;

  54. }

  55. .menu ul ul li{

  56. display:block;

  57. width:inherit;

  58. }

  59. .menu:hover .activ {

  60. background:none;

  61. box-shadow:none;

  62. }

  63. .menu ul .activ :hover{

  64. background:#e1e0e2;

  65. box-shadow:.0625em .125em .375em 0 #4c5150 inset;

  66. }

  67. .drop-menu ul li,.drop-menu ul a{

  68. border-radius:0;

  69. border:none;

  70. }

  71. .drop-menu ul li:last-child,.drop-menu ul li:last-child a{

  72. border-radius:0 0 0.375em 0.375em;

  73. }

  74. .drop-menu:hover a{

  75. background:#e6f7f0;

  76. box-shadow:.0625em .125em .375em 0 #4c5150 inset;

  77. }

  78. .drop-menu a:hover{

  79. background:#e1e0e2;

  80. box-shadow:.0625em .125em .375em 0 #4c5150 inset;

  81. }

  82. .drop-menu:hover ul a,.drop-menu ul li a:hover{

  83. box-shadow:0 0 0 .0625em #2e376c;

  84. }

  85. .drop-menu ul li a:hover {

  86. background:#e1e0e2;

  87. }

  88. .drop-menu ul a {

  89. height:43px;

  90. }

Рис.6 Конечный CSS-код выпадающего меню

После того, как данные изменения будут внесены в таблицу стилей, можно проверить, что в конечном итоге получилось.

Для этого обновим страницу и наведем курсор на родительский элемент вложенного списка. А затем, когда откроется выпадающее меню, переведем курсор на один из его пунктов.

Проверка выпадающего меню

Рис.7 Проверка выпадающего меню

Как показала проверка, созданный второй уровень навигации для заданного пункта главного меню работает, как и предусматривалось. А элементы выпадающего меню вполне вписались в существующий дизайн.

А как это выглядит вживую, можно посмотреть, установив на локальный веб-сервер последнюю версию исходных файлов из прилагаемых дополнительных материалов, либо воспользоваться тестовым сайтом, размещенном в интернете.

скриншот 75


Думаю, что на этом можно закончить, так как на мой взгляд, вопрос создания выпадающего меню не должен вызывать больших сложностей. Но если все же у кого-нибудь при реализации этого решения возникнут вопросы, обращайтесь, буду рад на них ответить.

В заключении могу лишь добавить, что CSS-код, который был сформирован по ходу статьи, можно найти в дополнительных материалах в файле "main.css" папки "styles". В таблице стилей этот фрагмент находится в строках с 1386 по 1432.

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

  • Файлы каталога www
  • Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.

Буду Вам за это очень признателен!

comments powered by HyperComments