<MyRusakov.ru />

Разработчик игр на Unreal Engine

Разработчик игр на Unreal Engine

Этот комплект с нуля всего за 7 месяцев сделает Вас Unreal-разработчиком. И при этом учиться достаточно 1 час в день.

Начнёте Вы с основ программирования, постепенно перейдя к C++. Затем очень подробно изучите Unreal Engine, и после научитесь программировать на C++ в Unreal Engine. В конце создадите крупный проект на C++ в Unreal Engine для своего портфолио.

Комплект содержит:

- 416 видеоуроков

- 95 часов видео

- 1024 задания для закрепления материала из уроков

- 3 финальных тестирования

- 4 сертификата

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Горизонтальное выпадающее меню на CSS

Горизонтальное выпадающее меню на CSS

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

Привожу HTML-код:

<ul class="menu">
  <li>
    <a href="#">Главная</a>
  </li>
  <li>
    <a href="#">Меню 1</a>
    <ul>
      <li>
        <a href="#">Подменю 1</a>
      </li>
      <li>
        <a href="#">Подменю 2</a>
      </li>
      <li>
        <a href="#">Подменю 3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Меню 2</a>
    <ul>
      <li>
        <a href="#">Подменю4</a>
      </li>
      <li>
        <a href="#">Подменю 5</a>
      </li>
      <li>
        <a href="#">Подменю 6</a>
      </li>
      <li>
        <a href="#">Подменю7</a>
      </li>
      <li>
        <a href="#">Подменю 8</a>
      </li>
    </ul>
  </li>
</ul>

И CSS-код:

ul.menu {
  display: inline-block;
  margin: 0;
  padding: 0;
}
ul.menu li {
  float: left;
  list-style: none;
}
ul.menu li a {
  display: block;
  padding: 8px 20px 10px;
  text-decoration: none;
}
ul.menu li ul {
  display: none;
  padding-left: 10px;
}
ul.menu li:hover ul {
  display: block;
  position: absolute;
}
ul.menu li:hover ul li {
  float: none;
}
ul.menu li:hover ul li a {
  padding: 6px 0 8px;
}

Безусловно, здесь дан чуть ли не минимум свойств. Чтобы это всё украсить, нужно менять стили. Что касается HTML-кода, то он идентичен и для горизонтального, и для вертикального меню.

Теперь у Вас не должно быть проблем с созданием горизонтального выпадающего меню на CSS.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (28):

lev_100rus lev_100rus 06.03.2013 18:36:33

Скопировал код. Открыл в Браузере Internet Explorer 9 и... ничего не выпадает при наведении/нажатии

Ответить

malina95 malina95 06.03.2013 19:35:59

<< Открыл в Браузере Internet Explorer 9 >> Это однако плохо, даже мой сайт в Internet Explorer 9 выглядит прилично, хотя вёрстка там просто ужассная, так как я не верстальщик, и не дизанер, то что уж говорить об этом шаблоне, над которым я мучался 3 недели, верхнее меню выпадающее, сейчас там просто нечему выпадать http://malinichev.ru/. Михаил, может будете писать не просто примеры в статьях, а полностью разбирать все приёмы, дизайн и принципы? Это касается только лишь вёрстки, просто вот вы пишите статьи про меню например, а при подключении на сайт всплывает куча багов, которые исправить не совсем просто, у меня иногда слаживается такое чувство, как будто вы нас учите только лишь исправлять ошибки в коде... А как же правильность написания, а как же грамотность, таже концекпция MVC, вы же про неё толком ничего не рассказали, а сделали бы статью про универсальную систему MVC для сайта в минимальных объёмах, и народ бы на эту статью повалили бы толпами, не говоря уже о поднятии рейтинга вашего сайта в ПС. Прислушивайтесь к нам всем, мы плохого не посоветуем если мы читаем ваши статьи с большим удовольствием. И запишите парочку видеоуроков про ооп, и вёрстку. Уж больно нужные темы... Это было моё мнение за последний год посещения вашего сайта ежедневно. Судите как хотите, хоть в бан ставьте, но моё мнение - это моё мнение. Прислушайтесь пожалуйста и вашему сайту будет огромное счастье

Ответить

Admin Admin 06.03.2013 23:21:09

Проверил в IE8 и IE9 - всё прекрасно работает.

Ответить

cyber93 cyber93 08.03.2013 21:25:59

На хабре статья недавно появилась, очень интересная. Советую всем почитать http://habrahabr.ru/post/171905/

Ответить

kutep kutep 12.04.2013 18:31:08

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

Ответить

Admin Admin 12.04.2013 21:18:37

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

Ответить

kutep kutep 12.04.2013 21:36:29

Спасибо! А кроме движка есть другие варианты?

Ответить

Admin Admin 12.04.2013 21:38:53

Самый простой вариант был рассмотрен в этом курсе: http://srs.myrusakov.ru/html - где-то в последних уроках (9 или 10).

Ответить

kutep kutep 12.04.2013 21:48:10

Большое спасибо)

Ответить

kutep kutep 12.04.2013 22:07:54

Я слышал еще как-то можно через java script это сделать?

Ответить

Admin Admin 13.04.2013 10:38:03

Да, можно.

Ответить

sergkosm sergkosm 13.04.2013 00:23:42

ого, спасибо) код понятный и еще узнал про display: none;

Ответить

kutep kutep 13.04.2013 12:54:23

то как это сделать?

Ответить

sergkosm sergkosm 15.04.2013 00:46:50

Михаил, есть такая проблема. Под меню навигации находится контент-блок. При наведении мышью на пункт меню подменю всплывает, но часть его прячется под контентный блок. Как это исправить?

Ответить

sergkosm sergkosm 15.04.2013 00:55:13

Добавил z-index: 2; все нормально. Можно таким способом выводить блоки наружу?

Ответить

Admin Admin 15.04.2013 11:30:00

Можно.

Ответить

Web-дизайнер. Web-дизайнер. 06.11.2013 09:58:25

Доброго времени суток всем читателям! Тут кто-то спрашивал про создание меню на JavaScript'e. Есть программка для этого, называется Agama Web Menus. Для создания меню используются шаблоны в программе, которых вполне достаточно для вставки на любой сайт с различным оформлением. Вот есть вопрос к Михаилу по поводу того, как подключить созданное меню в этой программе? Меню создаётся в трёх файлах *.js , один из которых и отвечает за показ меню. Данный вопрос будет иметь продолжение, а именно: Если такое меню можно вставить через блок, то вопрос в следующем: При входе на сайт, незарегистрированный пользователь видит часть меню, а войдя под своим логином он увидит меню полностью. Вот как это реализовать?.

Ответить

Admin Admin 06.11.2013 11:53:06

Для создания меню надо использовать HTML+CSS, а не программы. Если понравился дизайн меню из этой программы, переверстайте его нормально и всё. А что касается вывода части меню, то тут надо делать проверку через if на авторизацию пользователя. И если он авторизован, то внутри if вывести дополнительные пункты, видимые только для авторизованного пользователя.

Ответить

Web-дизайнер. Web-дизайнер. 06.11.2013 15:57:43

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

Ответить

__vrag__ __vrag__ 10.11.2013 19:22:31

привет! у меня блок, внутри него таблица, в ней меню горизонтальное, на одной из кнопок - выпадающее меню при наведении мыши. Так вот когда появляется выподающее меню, то нижняя грань толи блока, толи таблицы оттягивается вниз, при этом ломая еще и фоновою картинку всей страницы. Как сделать чтоб поверх всего выскакивало. Пробовал z-index вообще не реагирует. мож че не так делаю. И это, Михаил у вас на вашем сайте снизу где надпись "Получать уведомление на E-mail об ответах на Ваш комментарий" на Google Chrome галочку не как не поставить он кнопку(checkbox) не видит, пришлось с другого браузера комментарий писать.

Ответить

Admin Admin 10.11.2013 21:33:54

Тут могут помочь position и z-index. Попробуйте их поменять, наблюдая за изменениями через firebug.

Ответить

m773ma@gmail.com [email protected] 30.12.2013 17:39:20

Привет! Подскажите: есть горизонтальное меню с выпадающими подменю. И проблема: так как названия пунктов меню разной длины, выпадающее меню при hover выпадает и сдвигает остальные пункты главного меню чуть дальше вправо. Как сделать так, чтобы они оставались на своих местах? И второе: нужны разные padding для пунктов меню, если задавать через :nth-child(), то это свойство срабатывает и на пункты подменю соответствующей нумерации. Можно ли как-то задать свойство только для прямого n-ного child в документе? Или придётся прописывать style="padding..." атрибутом в нужных строках?

Ответить

mmgfs mmgfs 21.04.2014 02:12:09

Приведите пример ХОТЬ РАЗ как и куда это всё сохранять чтобы оно работало? Даже нельзя это проверить на практике, посмотреть визуально. Вы дали два куска кода И ВСЁ. Вот я создал index.html и my.css вписал в них эти два куска кода. Запускаю и естественно выполняется только первый файл.

Ответить

littus littus 02.12.2014 14:38:09

Не получилось создать новый уровень выпадающего списка. В HTML прописал, внутри очередного <li> (уровня ПодМЕНЮ), новый <ul> с ячейками <li>.Это понятно. Оно отобразилось. Но в SCC не понял как правильно прописать свойства для вновь добавленных элементов списка. Попробовал скопировать свойства для li ul и сделать новый класс для вновь созданного списка с ячейками по аналогии с предыдущими, но не работает или работает совсем не корректно. Михаил, не могли бы Вы привести пример как прописать для уровня подМЕНЮ дополнительное выпадающее меню. Спасибо.

Ответить

aneryadov aneryadov 10.12.2014 14:46:05

Михаил, приветствую.. Правильно я понимаю что между "Подменю" можно убрать <li> и </li>. Код от этого же ничего не теряет? К примеру: ...<ul> <li> <a href="#">Подменю 1</a> <a href="#">Подменю 2</a> <a href="#">Подменю 3</a> </li> </ul>...

Ответить

Maks4ever Maks4ever 31.12.2014 14:40:17

убрал display: inline-block; - ничего не изменилось

Ответить

Maks4ever Maks4ever 31.12.2014 14:42:27

на странице http://myrusakov.ru/css-submenu.html ни слово что оно вертикальное, может стоит добавить?

Ответить

kabachok1502 kabachok1502 25.08.2016 08:52:13

Здравствуйте! Подскажите, пожалуйста, как в выпадающем меню сделать активную кнопку, допустим, чтобы кнопка"главная" всегда была выделенной?

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.