« Диагональное меню на CSS »

Описание материала:

Используя возможности CSS3 в этом уроке сделаем диагональное меню, и напишем media queries, чтобы придать ему адаптивности.

HTML

Разметка не представляет из себя ни чего сложного. Но следует обратить внимание, что внутри анкора мы текст дополнительно помещаем в тег SPAN. Зачем так поступили увидим, когда посмотрим стили.
Ставим по месту.

Код

<nav>
  <ul>
  <li><a href="#"><span>Главная</span></a></li>
  <li><a href="#"><span>Статьи</span></a></li>
  <li><a href="#"><span>Портфолио</span></a></li>
  <li><a href="#"><span>Новости</span></a></li>
  <li><a href="#"><span>Услуги</span></a></li>
  <li><a href="#"><span>Контакты</span></a></li>
  </ul>
</nav>

CSS

Теперь "украсим" нашу разметку. Начнем от малых размеров экрана и по возрастающей. Точка останова (breakpoint) будет при ширине экрана 690px. На больших мониторах увидим меню во всей красе, со скосами и фоном. На маленьких экранах уберем и фон и перекосы, можно конечно было все сохранить, уменьшив лишь размер шрифта и отступы - но тут вы сами решите, как будет лучше именно для вас.

Элементам списка назначим свойство display:inline-block, для анкоров - display:block (чтобы заполнить все пространство), SPAN - также будет блочным.

В точке 690px мы применяем свойство transform:skewX(n deg) к элементам списка (LI), где n - угол скоса. Анкоры будут наследовать это свойство, а вот текст мы выровняем - не нужно, чтобы он был перекошен - для этого нам и нужен SPAN - которому задаем skew(10deg) (в противовес отрицательному):
Это ставим в Таблицу стилей CSS
Код

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
nav li {
  display: inline-block;
  margin: 0 5px;
  transition: all 0.3s;
}
nav a {
  display: block;
  color: #285064;
  transition: all 0.3s;
}
nav a:hover {
  color: #12242d;
}
nav span {
  display: block;
}
   
@media all and (min-width: 690px) {
  nav li {
  margin: 0;
  transform: skewX(-10deg);
  }
  nav a {
  padding: 10px 20px;
  color: #fff;
  background-color: #285064;
  }
  nav a:hover {
  color: #fff;
  background-color: #12242d;
  }
  nav span {
  transform: skewX(10deg);
  }
}

Эффект увидим только в современных браузерах, которые поддерживают CSS3 transition/transform.

Источник - http://pcvector.net/

Скачать ( Размер архива 7.6 Kb )

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

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

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт

Добавил: maksim | Категория: Меню и навигация | Просмотров: 969 | Загрузок: 18
Теги к материалу: css, ДИАГОНАЛЬНОЕ, на, МЕНЮ
Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
Войдите:
avatar