ZorNet.Ru — сайт для вебмастера » HTML и CSS » Горизонтальное меню списка на HTML и CSS

Горизонтальное меню списка на HTML и CSS

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

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

Поскольку меню это просто списки в одну линии, давайте начнем процесс.

Горизонтальная навигация сайта

Демонстрация:

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

HTML

Код

<ul>
  <li>ZorNet.Ru</li>
  <li>Скрипты</li>
  <li>Шаблоны</li>
</ul>

CSS

Код

li {
display: inline-block;
margin: 0 12px;
}

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

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

Демонстрация:

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

Список навигационного меню
Где все начинается с каркаса под разные тематические запросы, где под каждым закреплена ссылка перехода на материал.

HTML

Код

<nav class="zornet_ru_rasungan">
  <ul>
  <li><a href="http://zornet.ru/">ZorNet.Ru</a></li>
  <li><a href="http://zornet.ru/load/142">Шаблоны uCoz</a></li>
  <li><a href="http://zornet.ru/load/81">Скрипты uCoz</a></li>
  <li><a href="http://zornet.ru/load/84">Меню сайта</a></li>
  </ul>
</nav>

CSS

Код

.zornet_ru_rasungan ul {
  font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
.zornet_ru_rasungan li {
  display: inline-block;
}
.zornet_ru_rasungan a {
  background: #395870;
  background: linear-gradient(#426b8c, #2a3c4a);
  border-right: 1px solid rgba(10, 10, 10, 0.3);
  color: #efeded;
  padding: 12px 20px;
  text-decoration: none;
}
.zornet_ru_rasungan a:hover {
  background: #2f4556;
  box-shadow: inset 0 0 10px 1px rgba(16, 15, 15, 0.26);
}
.zornet_ru_rasungan li:first-child a {
  border-radius: 4px 0 0 4px;
}
.zornet_ru_rasungan li:last-child a {
  border-right: 0;
  border-radius: 0 4px 4px 0;
}

PS - эта функция создаются с помощью функции HTML и при помощи стилей CSS, что идут под оформление. Хотя они изначально идут в горизонтальном положение, а не вертикальные, как и обычные, но все же являются списком. Стили CSS позволяют нам установить список для запуска в одной строке для каждого элемента списка.

12 Декабря 2017 Просмотров: 2253 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0