Содержание

Меню многоуровневое горизонтальное и вертикальное CSS

Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
— Купить пыльцу —

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

Для того чтоб переделать вертикальное меню в горизонтальное, достаточно изменить лишь одно значение в стилях. О чём я укажу в комментариях в коде.

Я даю только эскиз меню. Оформлять и наводить красоту, каждый будет по своему вкусу.

1. Вертикальное

 

 

2. Горизонтальное

 

Код:

HTML


<div>
<ul>
<li><a href="">Meny1</a>
<ul>
<li><a href="">Meny 1-2</a>
<ul>
<li><a href="">Meny 1-2-1</a></li>
<li><a href="">Meny 1-2-2</a></li>
</ul>
</li>

<li><a href="">Meny 1-3</a>
<ul>
<li><a href="">Meny 1-3-1</a></li>
<li><a href="">Meny 1-3-2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Meny 2</a>
<ul>
<li><a href="">Meny 2-1</a>
<ul>
<li><a href="">Meny 2-1-1</a></li>
<li><a href="">Meny 2-1-2</a></li>
</ul>
</li>
<li><a href="">Meny 2-2</a>
<ul>
<li><a href="">Meny 2-2-1</a></li>
<li><a href="">Meny 2-2-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

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

Стили для всех блоков, имеющихся и добавленных, будут одинаковыми.

CSS


.nav {
background: white;
text-align: center;
}
.nav a {
text-decoration: none;
display: block;
transition: .5s linear;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.topmenu > li {
display: block;
/*Если вместо block задать inline-block,
меню будет горизонтальным*/
position: relative;
width: 200px;
}
.topmenu > li > a {
font-weight: bold;
padding: 10px 30px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: #1c1c1c;
border: 1px solid #999;
}
.submenu {
position: absolute;
left: 10px;
z-index: 5;
width: 240px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: .5s ease-in-out;
}
.submenu li {
position: relative;
border: 1px solid #999;
margin:2px;
}
.submenu a {
background: white;
color: #1c1c1c;
text-align: center;
font-size: 14px;
letter-spacing: 1px;
padding: 10px 20px;
}
.submenu .submenu {
position: absolute;
top: 0;
left: 200px;

}
.nav li:hover > .submenu {
visibility: visible;
opacity: 1;
transform: translateY(0px);
}

Желаю творческих успехов.

В раздел > > >

Запись опубликована в рубрике CSS основы, HTML основы. Добавьте в закладки постоянную ссылку.

CSS: интерфейс вкладок

Смотрите также указатель всех приёмов работы.

На этой странице:

Псевдокласс ‘:target’

URL (унифицированный указатель ресурса) обычно указывает на страницу. Но если URL оканчивается на «#что-то», тогда он указывает на определенный элемент на данной странице. Браузеры обычно стараются убедиться, что целевой элемент виден и, если это возможно, расположен в верхней части экрана.

С помощью селектора ‘:target’ вы можете добавить особый стиль целевому элементу страницы, чтобы он привлекал больше внимания.

Но вы можете сделать даже больше. Вы можете скрывать или отображать элементы на основании того, являются ли они целевыми или нет. Ниже дан пример. Он показывает небольшое меню с четырьмя пунктами и каждый пункт ссылается на какой-то текст. Но сначала никакой текст не показывается. Каждый пункт — это ссылка на элемент с целевым ID (#item1, #item2…) и эти элементы видны только тогда, когда являются целью текущего URL.

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

Это — элемент, соответствующий пункту 1. Он не должен быть видимым до тех пор, пока вы не последуете по ссылке в «#item1».

Если вы перешли к пункту 2, тогда этот элемент должен быть видимым.

Этот элемент виден, если вы щёлкните на третий пункт меню. Этот элемент имеет URL, который вы можете использовать где угодно. Вы можете вставить его в любую другую страничку и перейти прямо к этому пункту.

Вот, как это работает. Есть две важных части: источник HTML и свойство ‘display’. Сначала документ HTML. У него есть несколько ссылок и элементов с соответствующими ID:

<p>
  <a href="#item1">пункт 1</a>
  <a href="#item2">пункт 2</a>
  <a href="#item3">пункт 3</a>
  <a href="#default">очистить</a>

<div>
  <p>... пункт 1...
  <p>... пункт 2...
  <p>...
  <p><!-- по умолчанию не показывать текст -->
</div>

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

div.items p {display: none}
div.items p:target {display: block}

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

На самом деле, мы добавили ‘:not(:target)’, для того, чтобы убедиться, что браузеры CSS3 будут скрывать элементы. Следовательно, эти правила более подходящие:

div.items p:not(:target) {display: none}
div.items p:target {display: block}

Интерфейс вкладок

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

Вот пример. Он использует не ‘display: none’, а ‘z-index’. Если вы хотите знать, как это работает, просто выполните «посмотреть исходный код страницы»…

Как сделать оглавление (содержание, меню) для статьи на сайте

Обновлено 9 января 2021 Просмотров: 57 835 Автор: Дмитрий Петров
  1. Для чего и как можно создать оглавление статьи в Html
  2. Оформляем содержание статьи с помощью CSS свойств

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Решил написать совсем маленький пост на тему создания оглавления для статьи, если она получилась большой или вы ожидаете заходы пользователей с несколько различными интересами. В этом случае краткое содержание и возможность перейти сразу к нужному фрагменты статьи на вашем сайте может оказаться полезным, как мне кажется.

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

В любом случае постараюсь объяснять, ориентируясь на начинающих и еще мало знающих пользователей (сам таким был и во многих вопросах остаюсь до сих пор).


Для чего и как можно создать оглавление статьи в Html

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

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

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

Примером может служить материал про поисковую систему Яндекса и все с ней связанное.

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

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

<a name="nazvanie-ykory"></a>

В атрибуте name прописывается уникальная для этой статьи метка. Однако сейчас такой метод вставки якорей считается невалидным (нежелательным) и в качестве якорей предлагается использовать значения атрибута ID, который можно будет прописать, например, в тегах h2-H6 тех самых промежуточных заголовков в статье.

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

Давайте для примера рассмотрим статью про Гогетлинкс, где первый подзаголовок выглядит в коде примерно так:

<h4>Продвижение сайтов в Gogetlinks и заработок на ссылках</h4>

У меня это теги h4, хотя по логике должны быть h3 (ступил на начальном этапе создания блога, а сейчас переделывать уже не вижу особого смысла, да и опасаюсь, ибо поисковики и их действия не всегда идут в ногу с обычной человеческой логикой). Вот.

Как видите, там у меня стоит уникальный идентификатор ID с уникальным для этой статьи значением ggl. Для наглядности приведу код и второго подзаголовка:

<h4>Настройка кампании в ГогетЛинкс для продвижения сайта</h4>

Думаю, что логика понятна. Теперь на эти места в Html коде страницы можно ссылаться, чтобы статья открывалась или же прокручивалась (в случае, если вы находитесь в ее начале, где и расположено оглавление) до этого подзаголовка.

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

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

Ну вот, самое сложно сделали, теперь можно и, собственно, оглавление добавлять. В нашем примере оно будет выглядеть так:

<div>
<ol>
<li><a href="https://ktonanovenkogo.ru/zarabotok_na_saite/birzha-ssylok-gogetlinks-ggl-vechnye-ssylki-prodvizheniya-sajta-zarabotok-na-gogetlinks.html#ggl">Что такое ГоГетЛинкс и регистрация в нем</a></li>

<li><a href="https://ktonanovenkogo.ru/zarabotok_na_saite/birzha-ssylok-gogetlinks-ggl-vechnye-ssylki-prodvizheniya-sajta-zarabotok-na-gogetlinks.html#ggl-2">Создание кампании в ГГЛ для продвижения сайта</a></li>

<li><a href="https://ktonanovenkogo.ru/zarabotok_na_saite/birzha-ssylok-gogetlinks-ggl-vechnye-ssylki-prodvizheniya-sajta-zarabotok-na-gogetlinks.html#ggl-4">Поиск оптимальных площадок</a></li>
<li><a href="https://ktonanovenkogo.ru/zarabotok_na_saite/birzha-ssylok-gogetlinks-ggl-vechnye-ssylki-prodvizheniya-sajta-zarabotok-na-gogetlinks.html#ggl-6">Как начать зарабатывать в Gogetlinks</a></li>
</ol></div>

Гиперссылки все ведут на одну и ту же страницу, где и расположена эта статья, но в конце у них через решетку (# — ее иногда называют хеш) стоит уникальная метка, каждая из которых ведет на свой якорь.

В принципе, можно было бы вместо этого написать более коротко:

<div>
<ol>
<li><a href="#ggl">Что такое ГоГетЛинкс и регистрация в нем</a></li>

<li><a href="#ggl-2">Создание кампании в ГГЛ для продвижения сайта</a></li>

<li><a href="#ggl-4">Поиск оптимальных площадок</a></li>
<li><a href="#ggl-6">Как начать зарабатывать в Gogetlinks</a></li>
</ol></div>

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

Но проблема заключается в том, что данное оглавление будет выводиться и на главной (а у кого-то и в рубриках, тегах или других архивах), а там уже такие ссылки никуда не приведут. Поэтому оставляем первый вариант с полными Урлами.

Оформляем содержание статьи с помощью CSS свойств

Все, теперь только остается прописать CSS свойства для селектора класса ogl и дело в шляпе. Обычно, все стили выносятся в отдельный файл или несколько файлов. В случае Вордпресс он живет в папке с используемой темой:

/wp-content/themes/название темы/style.css

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

Чтобы получить такой же вид оглавления (содержания) для статьи как у меня, достаточно будет добавить в него эту строчку кода:

.ogl {float:right;border:1px dotted black;padding:5px 5px 0 5px;margin:5px;}

Разберем по порядку CSS свойства:

  1. float:right — делает блок с оглавлением плавающим и заставляет его прижаться к правому краю (подробнее читайте в статье про инструменты блочной верстки Float и clear
  2. border:1px dotted black — задает рамку по всем сторонам блока шириной в один пиксел, нарисованную прерывистой линией черного цвета. Про рамки и упомянутые чуть ниже отступы читайте в статье — Задаем в CSS внутренние (Padding) и внешние (Margin) отступы, а так же рамки (Border)
  3. padding:5px 5px 0 5px — задаются отступы в 5 пикселей от верхнего, правого и левого края рамки до заключенного в нее текста (пунктов списка).
  4. margin:5px — отступы в пять пикселей от внешнего края рамки оглавления до соседних элементов

Кроме этого вы вольны будете добавить сюда и отдельную настройку для шрифтов с помощью свойства Font (Weight, Family, Size, Style) или еще что-то, но лично мне показалось и этого достаточно.

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

<div>
<ol>
<li>-"-</li>
<li>-"-</li>
<li>-"-</li>
<li>-"-</li>
</ol></div>

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

P.S. Недавно добавил еще и слово «Оглавление», чтобы было понятнее, что это такое. Понятное дело, что для шести сотен статей делать это вручную было бы весьма утомительно, поэтому использовал богатый инструментарий CSS, а именно псевдоэлемент before. В файле СSS была добавлена соответствующая строчка:

.ogl:before {content: " Оглавление:";color:#ccc;line-height:2em;}

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Выпадающее меню на HTML и CSS

Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным. Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же. В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.

  1. Вертикальное выпадающее меню
  2. Горизонтальное выпадающее меню с одним уровнем вложенности
  3. Горизонтальное меню с несколькими уровнями вложенности

Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось.

<ul>
  <li><a href="#">пункт 1</a>
    <ul>
      <li><a href="#">пункт 1.1</a></li>
      <li><a href="#">пункт 1.2</a></li>
    </ul>
  </li>
  <li><a href="#">пункт 2</a>
    <ul>
      <li><a href="#">пункт 2.1 многа букаф</a></li>
      <li><a href="#">пункт 2.2</a>
        <ul>
          <li><a href="#">пункт 2.2.1</a></li>
          <li><a href="#">пункт 2.2.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">пункт 3</a></li>
  <li><a href="#">пункт 4</a></li>
  <li><a href="#">пункт 5</a></li>
</ul>

HTML файл мы больше трогать не будем. Все дальнейшие изменения производятся только за счёт CSS. Первое что нам нужно сделать — скрыть вложенные пункты.

ul.nav li ul {display: none;}

Ещё нужно убрать маркеры но это дело вкуса.

ul.nav li {list-style: none;}

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

ul.nav li:hover > ul {display: block;} 

В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее. Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности. Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.

С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute. При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute. В этом случае отсчёт ведётся от края родительского элемента.

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

/* Вертикальное выпадающее меню*/
body{
  background: #DCDCDC;
}
/*блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border: 1px solid #FFFFFF;
  list-style: none;
  width: 150px;         /*ширина блока меню*/
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}

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

ul.nav li:hover {
  /* позиционирование вложенных элементов
   * будет расчитыватьться относительно
   * родительского элемента
   */
  position: relative;
  background: yellow;
}
ul.nav li:hover > ul {
  display: block;
}
ul.nav li:hover ul{
  position: absolute;
  top: 0;       /*Задаём координаты для вложенных пунктов*/
  left: 150px; /*меню раскрывается вправо*/
}

Вот что должно получиться в результате. демка

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

/*Горизонтальное выпадающее меню с одним уровнем вложенности*/

body{
  background: #DCDCDC;
}

/* Блок меню*/

ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav li:hover {
  background: yellow;
}
/*Выпадающее меню*/
ul.nav {
  position: relative;
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}
ul.nav li:hover > ul {
  background: #D0E0FF;
  border-top: 1px solid white;
  display: block;
  width: 600px;
  position: absolute;
  top: 30px;
  left: 0;
}

Вот что получиться в итоге демка.

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

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

body{
  background: #DCDCDC;
}

/* Блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav { /*задаём высоту и ширину меню*/
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}

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

ul.nav li:hover {
  background: yellow;
  position: relative;
}
ul.nav li:hover > ul {
  border-top: 1px solid white;
  display: block;
  position: absolute;
  top: 30px; /*первый уровень меню раскрывается вниз*/
  left: 0;
}
/*Второй и последующие уровни вложенности*/
ul.nav li ul li{
  border-bottom: 1px solid white;
  height: auto;
  width: 150px;
}
ul.nav li:hover ul li ul{
  position: absolute;
  top: 0;
  left: 150px; /*второй и последующие уровни расскрываются вправо*/
}

Вот так будет выглядеть наше многоуровневое меню демка.

Как сделать плавное выпадающее меню на CSS • ЭРА ТЕХНОЛОГИЙ

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

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

Верстаем меню HTML + CSS

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

Что мы имеем? Самый обыкновенные ненумерованный список с идентификатором «top_menu» и со ссылками, обернутыми в элементы этого самого списка. Все банально и просто. При наведении пункты меню меняют цвет… это все вы уже знаете и понимаете, как это сделать (я надеюсь).

Добавляем меню второго уровня

Чтобы сделать многоуровневое меню, нам нужно добавить второй ненумерованный список внутрь первого. Думаю, это вы проходили где-то на начальных уроках. А также то, что его вставить нужно не просто внутри нашего списка, а именно внутри элемента списка, то есть тега «li», сразу после закрывающего тега «a».

Позиционируем вложенные списки абсолютно по отношению к «li», в которые они вложены. А все «li» верхнего уровня позиционируем относительно (relative). Чтобы выпадающее меню находилось СРАЗУ же после нашего меню верхнего уровня, ему (выпадающему – “inner_menu”) нужно задать

position: absolute;
top: 100%;

То есть отступ от верхней границы родителя будет равен высоте родителя. Очень логично, по-моему.

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

Как видите, наше выпадающее меню пока выглядит не выпадающим, а выпавшим и висящим. Но ничего, это мы скоро исправим.

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

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

Выпадающему меню добавляем:

display: none;

А чтобы его отобразить, нужно прописать:

#top_menu > li:hover > ul {
   display: block;
}

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

Надеюсь, я выразился понятно. Если нет, попробуйте прочитать несколько раз. А еще лучше просто понимать это, глядя на код. Смотрим, что у нас получилось:

Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.

Ну что же, давайте еще немного поколдуем над ним.

Плавное выпадающее меню – это просто

Итак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!

Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block;).

Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.

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

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

Что нам понадобилось для анимации? Два состояния пунктов нашего меню, а также свойство transition, которое проинтерполировало эти состояния, то есть заполнило все промежуточные значения за отведенный промежуток времени. Вот и все!

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

Вывод:

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

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

Спасибо за внимание и до скорых встреч!

Выпадающее меню на HTML / CSS без использования JavaScript

Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство веб-девелоперов используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS.

Вот простой пример HTML-кода меню:

<ul>
    <li><a href=#>Menu 1</a>
        <ul>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
        </ul>
    </li>
</ul>

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

Теперь давайте как-нибудь минимально оформим наше меню стилями:


body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}

Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.

Теперь добавим в CSS такой код:


ul.menu > li:hover > ul.submenu {
    display: block;
}

Это позволит показывать подменю при наведении.

Вот и все. Просто и легко без JavaScript.

🗓 20.04.2013 19:48     👀 114.3 тыс.

Как сделать выпадающий список в HTML (ТОП 16)

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

Ранее, чтобы создать выпадающий список в html (на англ. — dropdown), мы просто использовали <select> и <option>. Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности.

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

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

 

Посмотреть в песочнице — http://codepen.io/silverdrop/pen/msrcE

Написан на CSS3 и JavaScript. Обычный выпадающий список.

Посмотреть в песочнице — http://codepen.io/pedronauck/pen/fcaDw

Прозрачный выпадающий список со стилистикой станций метро.

Посмотреть в песочнице — http://codepen.io/carlcalderon/pen/KhwDH

Посмотреть в песочнице — http://codepen.io/Tombek/pen/JAvHC

Отличное решение для длинных выпадающих меню.

Посмотреть в песочнице — http://codepen.io/larrygeams/pen/feoDc

Выпадающее меню, которое написано на чисто CSS без использования каких-либо скриптов.

Посмотреть в песочнице — http://codepen.io/Thibaut/pen/Jasci

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

Посмотреть в песочнице — http://cssdeck.com/labs/navigation-dropdown-with-flip-effect

 

Посмотреть в песочнице — http://codepen.io/jakestuts/pen/nEFyw

Посмотреть в песочнице — http://codepen.io/daniesy/pen/pfxFi

Сделано в стиле UI, подойдет под UI стилистику сайта.

Посмотреть в песочнице — http://codepen.io/Jeplaa/pen/IzAvx

 

Посмотреть в песочнице — http://codepen.io/Dianatomic/pen/HqICG

Dropdown в стиле выбора страны. 

Посмотреть в песочнице — http://codepen.io/abhishek/pen/bkfLi

Посмотреть в песочнице — http://codepen.io/Metty/pen/dglwH

 

Посмотреть в песочнице — http://codepen.io/DKunin/pen/EIobp

Посмотреть в песочнице — http://codepen.io/MrBambule/pen/jIseg

Довольно интересный и простой дизайн.

Посмотреть в песочнице — http://codepen.io/mingger/pen/hdtiD

 

Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы!

Как сделать выпадающий список в html (подборка ТОП 16) от bologer

WebD2: Создание меню навигации

Обзор

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

Результаты учащегося

По завершении этого упражнения:

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

Деятельность

  1. Вернитесь к index.html на веб-сайте вашего портфолио. Добавьте новый элемент навигации. Поместите его после элемента div, который содержит информацию о школьном курсе, и перед элементом div, который содержит серию заголовков и абзацев, созданных для каждого раздела. Когда вы создаете новый элемент навигации, не забудьте включить его закрывающий тег .
  2. Внутри этой новой навигации создайте еще один неупорядоченный список. Он должен содержать следующие элементы (каждый элемент представляет собой отдельную веб-страницу, которую вы будете создавать в своем портфолио):
    • Дом
    • Доступность
    • Удобство использования
    • Графика
    • Javascript
    • Инструменты
    • Видео
  3. Сохраните и обновите страницу в браузере, чтобы проверить свою работу.Отображается ли новый контент в виде маркированного списка? Если это так, поздравляем! Вы создали меню навигации. Итак, это пока не выглядит и не функционирует как навигационное меню. Это придет позже. В следующем модуле вы научитесь создавать ссылки, чтобы каждый пункт меню можно было превратить в ссылку на другие страницы вашего сайта-портфолио. Наконец, в Разделе 3 вы узнаете, как стилизовать список с помощью CSS, чтобы он выглядел так, как вы ожидаете от меню навигации.

Ресурсы/Онлайн-документы

Все готово?

После сохранения изменений в файле index.html, покажите преподавателю свои результаты перед началом модуля 4.

Как создать горизонтальное навигационное меню с помощью CSS

В этом руководстве вы узнаете, как создать горизонтальное навигационное меню.

  1. Начните со следующего HTML-документа, содержащего неупорядоченный список:
     
    
    
    <голова>
    <мета-кодировка="UTF-8">
    Горизонтальное меню навигации
    
    <тело>
    <основной>
    <заголовок>
     

    Горизонтальное меню навигации

    <навигация> <ул>
  2. Главная
  3. Сервисы
  4. Товары
  5. Поддержка
  6. Блог
  7. О нас
  8. Контакты
  9. Без CSS он будет отображаться следующим образом:
  10. Создайте файл для внешней таблицы стилей и создайте ссылку на него из HTML, используя следующий тег:
     
    
     
  11. Внутри таблицы стилей начните с удаления стиля списка по умолчанию:
      ол,ул {
    стиль списка: нет;
    }  
  12. Установите ширину и поля меню:
      #главное меню {
    поле: 10 пикселей;
    ширина: 900 пикселей;
    семейство шрифтов: без засечек;
    }  
    Установка ширины предотвращает перенос меню, когда пользователь сжимает окно браузера.
  13. Установите элементы списка для отображения в виде блоков, задайте им ширину и сдвиньте их влево, чтобы они каждый дисплей справа от предыдущего элемента.
     
    #mainMenu li {
    дисплей:блок;
    ширина: 120 пикселей;
    плыть налево;
    поле слева: 2px;
    граница: 1px сплошная #000;
    }
      
  14. Замените элементы a на блочные элементы. Мы также добавим несколько стилей форматирования и удалите подчеркивание с помощью text-decoration: none .
     
    #mainMenu {
    дисплей:блок;
    отступ: 3px;
    текстовое оформление: нет;
    цвет фона: #fff;
    цвет:#009;
    }
     
  15. Наконец, измените состояние зависания ссылок, чтобы они подсвечивались, когда на них указывает пользователь.
     
    #mainMenu а: наведите {
    цвет фона:#009;
    цвет:#fff;
    }
      
  16. Готовый CSS должен выглядеть следующим образом:
     
    #главное меню {
    поле: 10 пикселей;
    ширина: 900 пикселей;
    семейство шрифтов: без засечек;
    }
    #mainMenu li {
    дисплей:блок;
    ширина: 120 пикселей;
    плыть налево;
    поле слева: 2px;
    граница: 1px сплошная #000;
    }
    
    #mainMenu {
    дисплей:блок;
    отступ: 3px;
    текстовое оформление: нет;
    цвет фона: #fff;
    цвет:#009;
    }
    
    #mainMenu а: наведите {
    цвет фона:#009;
    цвет:#fff;
    }
     
    Откройте HTML-страницу в браузере.Этот код отображает следующее:

Как сделать меню для одностраничного сайта

Из этого руководства вы узнаете, как создать одностраничный веб-сайт с меню, которое ссылается на блоки на странице, а не на другие страницы. Вы можете создать одностраничный веб-сайт, используя приложения Nicepage для Windows или Mac OS, плагин WordPress или расширение Joomla.

Посмотрите также видео о создании меню с помощью приложения Nicepage.

На каждой странице Nicepage есть блоки. Вы создадите меню с переходом к блокам страниц.

Связывание пунктов меню с блоками

  1. Создайте новую страницу или откройте существующую.
  2. Выберите Меню.
  3. Откройте редактор меню.
  4. Нажмите на элемент, который нужно изменить.
  5. Выберите параметр «Блокировать якорь» справа.
  6. Выберите «Блок 1» из списка для свойства «Блок».
  7. Введите «Дом» в поле «Метка».
  8. Нажмите Готово.

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

Исправление меню при прокрутке

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

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

  1. Выберите заголовок.
  2. На панели свойств установите флажок «Прилипать к прокрутке».
  3. Добавьте белую заливку для фона заголовка.
  4. Щелкните значок предварительного просмотра.
  5. Выберите любой браузер из списка, например, Google Chrome.
  6. В браузере щелкните ссылки меню, чтобы проверить навигацию к блокам.

Редактирование якорей блока

Вы можете изменить якоря блоков по умолчанию, чтобы сделать их релевантными пунктам меню. Это важно для прямых ссылок на Блоки и SEO.

  1. Вернитесь к приложению Nicepage.
  2. В Навигаторе слева выберите Блок 1.
  3. Перейти на панель свойств.
  4. Найдите свойство «Привязка к блоку».
  5. Введите «Home», заменив значение во вводе.
  6. Нажмите Enter.
  7. Аналогичным образом отредактируйте привязки для других блоков.

Проверка анкеров

  1. Щелкните значок предварительного просмотра.
  2. Выберите любой браузер.
  3. В браузере наведите курсор на ссылки меню, чтобы проверить якоря блоков.

Вы создали одностраничный веб-сайт. И теперь вы видите соответствующие идентификаторы в URL-адресах.

Резюме

Вы узнали:

  • Как создать одностраничный сайт со ссылками на блоки в меню.
  • Как исправить шапку при прокрутке.
  • Как модифицировать якоря блоков.
# Из этого руководства вы узнаете, как создать одностраничный веб-сайт с меню, которое ссылается на блоки на странице, а не на другие страницы.Вы можете создать одностраничный веб-сайт, используя приложения Nicepage для Windows или Mac OS, плагин WordPress или расширение Joomla. Также посмотрите видео о [создании меню с помощью приложения Nicepage] (страница: 82280). На каждой странице Nicepage есть блоки. Вы создадите меню с переходом к блокам страниц. ## Связывание пунктов меню с блоками 1. Создайте новую страницу или откройте существующую. 2. Выберите Меню. 3. Откройте редактор меню. 4.Нажмите на элемент, чтобы изменить его. 5. Выберите параметр «Блокировать якорь» справа. 6. Выберите «Блок 1» из списка для свойства «Блок». 7. Введите «Дом» в поле «Метка». 8. Нажмите Готово. Таким же образом добавьте новые пункты меню, ссылающиеся на блоки на странице. ## Исправление меню при прокрутке На одностраничных веб-сайтах обычно, когда вы нажимаете на пункт меню, меню остается на экране, поэтому вы сможете перейти к другим блокам. Для этого вам нужно использовать опцию «Прилипание к прокрутке».Чтобы текст оставался видимым и читабельным поверх содержимого, вы можете добавить фоновую заливку для заголовка. 1. Выберите заголовок. 2. На панели свойств установите флажок «Прилипать к прокрутке». 3. Добавьте белую заливку для фона заголовка. 4. Щелкните значок предварительного просмотра. 5. Выберите любой браузер из списка, например, Google Chrome. 6. В браузере щелкните ссылки меню, чтобы проверить навигацию к блокам. ## Редактирование якорей блоков Вы можете изменить якоря блоков по умолчанию, чтобы сделать их релевантными пунктам меню.Это важно для прямых ссылок на Блоки и SEO. 1. Вернитесь в приложение Nicepage. 2. В Навигаторе сайта слева выберите Блок 1. 2. Перейдите на панель свойств. 3. Найдите свойство «Привязка блока». 4. Введите «Home», заменив значение на входе. 5. Нажмите «Ввод». 6. Аналогичным образом отредактируйте якоря для других блоков. ## Проверка якорей 1. Щелкните значок предварительного просмотра. 2. Выберите любой браузер. 3. В браузере наведите курсор на ссылки меню, чтобы проверить привязки блоков.Вы создали одностраничный веб-сайт. И теперь вы видите соответствующие идентификаторы в URL-адресах. ## Резюме Вы узнали: — Как создать одностраничный сайт со ссылками на блоки в меню. — Как исправить шапку при прокрутке. — Как модифицировать якоря блоков.

Как сделать веб-сайт, часть 6, стиль веб-ссылок и навигация

Даже если до этого момента все шло хорошо, меню может не работать.Если это произойдет, суровая правда состоит в том, что вы совершили ошибку. Браузеры (и в некоторой степени Dreamweaver Live View) прощают ошибки в HTML. Они также неплохо справляются со случайными ошибками в CSS. Это не относится к JavaScript. Единственная ошибка, и это не сработает.

Сценарий в menu.js использует то, что известно как IIFE (произносится как «iffy»), мгновенно вызываемое функциональное выражение. Это означает, что функция выполняется немедленно. Он принимает три аргумента: идентификатор триггерной ссылки, идентификатор неупорядоченного списка и число, указывающее точку останова, в которой меню должно быть скрыто при изменении размера области просмотра браузера.Если вы дали элементам разные идентификаторы или написали их по-разному, функция не будет работать. Это также не сработает, если вы написали имена начального, свернутого и отображаемого классов. JavaScript чувствителен к регистру, поэтому он рассматривает menulink и menuLink как совершенно разные значения.

Другие вещи, которые могут пойти не так, включают ошибки в вашем CSS. В последних трех определенных вами селекторах не должно быть пробелов: #navlink.displayed , #navlink.start и #navlink.рухнул . Также проверьте, не забыли ли вы поставить точку с запятой в конце каждой строки в правилах стиля, которые вводили вручную.

Если вы по-прежнему не можете заставить меню работать, сравните свои файлы с файлами в папке part6 файлов примеров. Не имеет значения, отличаются ли номера строк. Ищите отличия в коде. Dreamweaver можно интегрировать со сторонней утилитой сравнения файлов, что упрощает поиск различий. См. файлы справки, чтобы узнать больше о настройке и использовании File Compare.

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

Это завершает одноколоночный дизайн веб-сайта Bayside Beat. Следующим этапом является адаптация дизайна в виде двухколоночного макета и изменение внешнего вида навигационного меню.

Самый простой способ создать его для своего сайта!

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

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

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

Скачать полную шпаргалку по CSS

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

Шаг 1. Создание файла с кодом HTML

Для начала создайте файл HTML для фактического содержания и синтаксиса раскрывающегося меню. Перейдите к диспетчеру файлов с панели управления hPanel и создайте новый файл с именем menu.html в каталоге public_html .

Файл menu.html будет содержать элементы выпадающего меню — один родительский элемент с пятью пунктами меню.Каждое подменю будет перенаправлять пользователей на разные страницы вашего сайта.

Добавьте в файл menu.html следующий код:

 <дел>
  
  <дел>
    Подменю 1
    Подменю 2
    Подменю 3
    Подменю 4
    Подменю 5
  

Классы dropdown, mainmenubtn, и dropdown-child представляют разные элементы HTML. CSS будет использовать их для доступа к определенному элементу и изменения его дизайна.

Вот как будет выглядеть HTML-меню без правил CSS:

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

Шаг 2. Добавление CSS и создание эффекта раскрывающегося списка

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

Создайте внутреннюю таблицу стилей в файле menu.html , поместив следующий код в элемент