fluart-studio.ru

Как сделать меню в html и css

Как сделать меню в html и css 112
Как сделать меню в html и css 373
Как сделать меню в html и css 213

Уроки // самоучитель CSS // как сделать ниспадающее меню

Задача

Создать низпадающее меню инструментами CSS и HTML.

CSS: как сделать ниспадающее меню: исходный вид Рисунок 1. Исходный вид меню. CSS: как сделать ниспадающее меню: вид №1 Рисунок 2. Вид меню при наведении на пункт Файл. CSS: как сделать ниспадающее меню: вид №2 Рисунок 3. Вид меню при наведении на пункт Правка.

Решение

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

Если вы уверены в своих знаниях, тогда приступим.

Сначала создадим основу нашего меню:

<!DOCTYPE html> <html> <head> <title>Выпадающее меню</title> <style> / Обнуляем все отступы в документе и устанавливаем шрифт / { font-family: Arial; padding: 0; margin: 0; } / удаляем маркеры списка и сдвигаем для удобства от угла окна используя margin / .menu { list-style-type: none; margin: 50px 200px; } / распологаем горизонтально используя float и увеличиваем отступ справаы / .menu > li { float: left; margin-right: 50px; } / прописываем стиль ссылок основного меню / .menu > li > a { color: blue; padding: 4px; } / прописываем стиль ссылок основного меню при наведении курсора / .menu > li:hover > a { color: black; text-decoration: none; border-radius: 5px 5px 0 0; box-shadow: 0 0 8px 0 rgba(0,0,0,0.6); } / Прячем вложенные списки / .menu-inner{ display: none; } </style> </head> <body> <ul class="menu"> <li> <a href="#">Файл</a> <ul class="menu-inner"> <li><a href="#">Новый</a></li> <li><a href="#">Открыть</a></li> <li><a href="#">Сохранить</a></li> <li><a href="#">Закрыть</a></li> </ul> </li> <li> <a href="#">Правка</a> <ul class="menu-inner"> <li><a href="#">Копировать</a></li> <li><a href="#">Вырезать</a></li> <li><a href="#">Вставить</a></li> <li><a href="#">Удалить</a></li> </ul> </li> </ul> </body> </html>

смотреть пример

Итак, у нас получилось вот такого вида меню:

CSS: как сделать ниспадающее меню: вид №2 Рисунок 4. Первый этап разработки ниспадающего меню.

Теперь нам нужно активировать вложенные списки, чтобы они появлялись при наведении курсора мыши.

<!DOCTYPE html> <html> <head> <title>Выпадающее меню</title> <style> { font-family: Arial; padding: 0; margin: 0; } .menu { list-style-type: none; margin: 50px 200px; } / сюда добавляем position: relative / .menu > li { position: relative; float: left; margin-right: 50px; } .menu > li > a { color: blue; padding: 4px; } .menu > li:hover > a { color: black; text-decoration: none; border-radius: 5px 5px 0 0; box-shadow: 0 0 8px 0 rgba(0,0,0,0.6); } / Прячем вложенные списки / .menu-inner{ display: none; } / Активируем вложенные списки / .menu > li:hover > .menu-inner{ display: block; background-color: white; position: absolute; left: 0; top: 26px; list-style-type: none; box-shadow: 0 0 8px 0 rgba(0,0,0,0.6); width: 120px; padding: 3px; } </style> </head> <body> <ul class="menu"> <li> <a href="#">Файл</a> <ul class="menu-inner"> <li><a href="#">Новый</a></li> <li><a href="#">Открыть</a></li> <li><a href="#">Сохранить</a></li> <li><a href="#">Закрыть</a></li> </ul> </li> <li> <a href="#">Правка</a> <ul class="menu-inner"> <li><a href="#">Копировать</a></li> <li><a href="#">Вырезать</a></li> <li><a href="#">Вставить</a></li> <li><a href="#">Удалить</a></li> </ul> </li> </ul> </body> </html>

смотреть пример

Теперь мы имеем следующий вид меню:

CSS: как сделать ниспадающее меню: второй этап разработки Рисунок 5. Второй этап разработки ниспадающего меню.

Срузу бросается в глаза что присвоены ещё не все стили вложеному меню. Также видна пустота между верхним меню и выпадающим. Поэтому выпадающее меню исчезает при попытке навести на него курсор, так как как только курсор покидает область тега <li> горизонтального меню, на вложенное меню накладывается правло CSS {display: none}. Эти два блока нужно состыковать друг с другом. Ну и добавить стили для выпадающего меню.

Также на стыке вернего блока (Файл или Правка) и ниспадающего меню образуется серая полоса от тени. Её нужно зарисовать. Мы это сделаем наложив заплатку - белый блок шириной 100%, он будет создан как псевдоэлемент :before для ссылки горизонтального меню.

Продолжаем работу над нашим стилем:

<!DOCTYPE html> <html> <head> <title>Выпадающее меню</title> <style> { font-family: Arial; padding: 0; margin: 0; } .menu { list-style-type: none; margin: 50px 200px; } .menu > li { position: relative; float: left; margin-right: 50px; } .menu > li > a { color: blue; padding: 4px; } .menu > li:hover > a { color: black; text-decoration: none; border-radius: 5px 5px 0 0; box-shadow: 0 0 7px 0 rgba(0,0,0,0.6); } / Этот стиль должен убирать серую полосу / .menu > li:hover > a:before { content:''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 7px; background: white; z-index: 5; cursor: pointer; } .menu-inner{ display: none; } .menu > li:hover > .menu-inner{ display: block; background-color: white; / обязательно, зарисовываем тень / position: absolute; left: 0; top: 22px; / подняли блок немного вверх / list-style-type: none; box-shadow: 0 0 7px 0 rgba(0,0,0,0.6); width: 120px; padding: 3px; } / Спили для ниспадающего меню / .menu-inner > li{ padding: 4px 0; } .menu-inner > li:hover{ background-color: blue; } .menu-inner > li:hover > a{ color: white; padding: 2px; text-decoration: none; } </style> </head> <body> <ul class="menu"> <li> <a href="#">Файл</a> <ul class="menu-inner"> <li><a href="#">Новый</a></li> <li><a href="#">Открыть</a></li> <li><a href="#">Сохранить</a></li> <li><a href="#">Закрыть</a></li> </ul> </li> <li> <a href="#">Правка</a> <ul class="menu-inner"> <li><a href="#">Копировать</a></li> <li><a href="#">Вырезать</a></li> <li><a href="#">Вставить</a></li> <li><a href="#">Удалить</a></li> </ul> </li> </ul> </body> </html>

смотреть пример

Ну вроде всё работает.

До новых встреч!


Как сделать меню в html и css 226
Как сделать меню в html и css 768
Как сделать меню в html и css 704
Как сделать меню в html и css 438
Как сделать меню в html и css 630
Как сделать меню в html и css 7
Как сделать меню в html и css 792
Как сделать меню в html и css 143
Как сделать меню в html и css 756
Как сделать меню в html и css 790
Как сделать меню в html и css 825
Как сделать меню в html и css 359
Как сделать меню в html и css 414
Как сделать меню в html и css 947
Как сделать меню в html и css 442
Как сделать меню в html и css 378

Советуем почитать

  • Питательна маска для поврежденных волос в домашних условиях
  • Гребные тренажеры своими руками
  • Самое лучшее поздравление для жены
  • Поздравление для мамы от сына и его жены
  • Как снять монтажную пену в домашних условиях