<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

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

Подписавшись по 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 m773ma@gmail.com 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

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

Ответить

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