ДИАГОНАЛЬНОЕ МЕНЮ НА CSS


ДИАГОНАЛЬНОЕ МЕНЮ НА CSS

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

ДИАГОНАЛЬНОЕ МЕНЮ НА CSS

HTML

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

 

CSS

Теперь «украсим» нашу разметку. Начнем от малых размеров экрана и по возрастающей. Точка останова (breakpoint) будет при ширине экрана 690px. На больших мониторах увидим меню во всей красе, со скосами и фоном. На маленьких экранах уберем и фон и перекосы, можно конечно было все сохранить, уменьшив лишь размер шрифта и отступы — но тут вы сами решите, как будет лучше именно для вас.
Элементам списка назначим свойство display:inline-block, для анкоров — display:block (чтобы заполнить все пространство), SPAN — также будет блочным.
В точке 690px мы применяем свойство transform:skewX(deg) к элементам списка (LI), где n — угол скоса. Анкоры будут наследовать это свойство, а вот текст мы выровняем — не нужно, чтобы он был перекошен — для этого нам и нужен SPAN — которому задаем skew(10deg) (в противовес отрицательному):

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

ДЕМО     СКАЧАТЬ

 

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

Previous Атрибуты товара на странице категории Opencart
Next Самые классные JQuery плагины за последние месяца

Suggested Posts

18 советов и техник HTML5(Часть2)

Галерея для сайта в виде табов CSS3

Вертикальное многоуровневое меню для сайта

АДАПТИВНЫЕ ВКЛАДКИ — RESPONSIVE TABS

50 бесплатных ресурсов для дизайнера

Создаем собственный шрифт из иконок для сайта