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

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

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

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

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

HTML-код

Код

<ul class="dernatumin">
<li><a href="#">ZORNET.RU</a></li>
<li><a href="#">ZORNET.RU</a></li>
<li><a href="#">ZORNET.RU</a></li>
<li><a href="#">ZORNET.RU</a></li>
</ul>

CSS-код (каскадная таблица стилей)

Код

.dernatumin {
padding:0; margin:0; list-style-type:none; white-space:nowrap; }
.dernatumin li {
float:left; min-width:100px; }
.dernatumin a {
position:relative; display:block; text-decoration:none; min-width:100px; float:left; }
* html .dernatumin a { width:100px; }
.dernatumin a span {
  display: block;
  color: #f5ecec;
  background: #62920d;
  border: 1px solid #efe9e9;
  border-width: 3px 2px;
  text-align: center;
  padding: 5px 17px;
  cursor: pointer;
}
* html .dernatumin a span { width:100px; cursor:hand; }
.dernatumin a b { display:block; border-bottom:2px solid #06a; }
.dernatumin a em { display:none; }
.dernatumin a:hover { background:#f1eaea; }
.dernatumin a:hover span { color:#ece7e7; background:#0b4663; }
.dernatumin a:hover em {
  display: block;
  overflow: hidden;
  border: 6px solid #09629e;
  border-color: #105a8c #f1eeee;
  border-width: 6px 6px 0 6px;
  position: absolute;
  left: 50%;
  margin-left: -6px;
}

Сама Навигация довольно прост и интересен, что для пользователей и гостей будет понятна в работе.

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

15 Декабря 2017 Просмотров: 1458 Комментариев: (6)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 6
Порядок вывода комментариев: -SAM- 20 Декабря 2017 06:26¹ 0 Исходник CSS содержит ошибки в кодах цвета (не 6-знак #). Как и идут ;; - стили будут отваливаться... w\idth:66px; - то же самое, ошибка, стиль этот перекрывается width:100px; (и демо ведь нерабочее - не такое оно, как на скрине, поскольку ошибки в стилях). Kosten 20 Декабря 2017 23:50² 0 Согласен, на старых браузерах не корректно показывает, но сейчас основном материал, кроме юкоз, все почти из зарубежных площадок нахожу, что сначало автоматически идет перевод, потом сам все переписываешь, чтоб понятно было. И главное, хороший контент из забугорских сайтов многие берут, так как проверяешь на оригинальность, то некоторые берут перевод и ставят. -SAM- 21 Декабря 2017 01:54⁴ 0 Но новых тоже некорректно показывает, поскольку такого кода цвета не существует. Kosten 21 Декабря 2017 06:33⁵ 0 А как правильно вывести, как понимаю, все цвета сменить и убрать лишнее, и здесь дополнение не нужно. Kosten 21 Декабря 2017 00:34³ +1 Можно этот кусок стиля убрать, который заключается в w\idth:66px;, что также корректно работает. Kosten 21 Декабря 2017 09:17⁶ 0 От души пользователю -SAM-, за полную доработку материала, что теперь корректно показывать будет.