Добрый день!
Сегодня я хотел бы рассказать о том, как сделать красивое меню, как показано на картинке:
Приступим!
HTML РАЗМЕТКА
<!-- основной контейнер для меню и иконок --> <div class="navbar-inner"> <!-- разметка меню --> <ul class="nav"> <li class="first"> <a href="#">Главная</a> <div class="rightBorder"></div> </li> <li> <a href="#">Услуги</a> <div class="leftBorder"></div> <div class="rightBorder"></div> </li> <li class="active"> <a href="#">О проекте</a> <div class="leftBorder"></div> <div class="rightBorder"></div> </li> <li> <a href="#">Об авторе</a> <div class="leftBorder"></div> <div class="rightBorder"></div> </li> <li> <a href="#">Контакты</a> <div class="leftBorder"></div> <div class="rightBorder"></div> </li> <li> <a href="#">Информация</a> <div class="leftBorder"></div> <div class="rightBorder"></div> </li> </ul> <!-- иконки соц-сетей --> <div class="soc-icons"> <a href="#"><div class="soc-icon odnocl"></div></a> <a href="#"><div class="soc-icon vk"></div></a> <a href="#"><div class="soc-icon facebook"></div></a> </div> </div>
Структура HTML весьма проста. У каждого пункта меню есть 2 боковых бордера, которые будут отображаться у активного элемента или при наведении на пункт меню. У первого элемента левого бордера нет!
В правой части меню выведем иконки социальных сетей.
CSS СТИЛИ
Для начала установим следующие стили:
* { padding: 0px; margin: 0px; font-family: 'Tahoma'; text-decoration: none; } body { width: 1000px; margin: 0 auto; } /* стиль для основного контейнера меню */ .navbar-inner { position: relative; min-height: 42px; background-image: url('../img/nav_bg.png'); background-repeat: repeat-x; border: 1px solid #d4d4d4; border-top: none; border-left: none; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; text-transform: uppercase; font-size: 12px; font-weight: bold; } /* стили для пунктов меню */ .nav { float: left; } .nav > li { list-style: none; float: left; height: 42px; position: relative; border-right: 1px solid #c9c9c9; } .nav > li > a { padding: 14px 25px 14px; color: black; display: block; }
Первоначально сбрасываем все отступы, устанавливаем начальные стили и прописываем стиль для основного контейнера меню.
Прописываем стиль для каждого элемента li и устанавливаем отступы для тега a.
В результате у нас получится следующее:
Теперь приступим к самому интересному! Заданию стиля для наведения на пункт меню и стиля активного пункта.
СТИЛИ АКТИВНОГО ПУНКТА МЕНЮ
.nav > .active > a, .nav > .active > a:hover, .nav > .active > a:focus, .nav > li > a:hover { background-color: #cae285; background-image: -moz-linear-gradient(top, #cae285, #9fcb56); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#cae285), to(#9fcb56)); background-image: -webkit-linear-gradient(top, #cae285, #9fcb56); background-image: -o-linear-gradient(top, #cae285, #9fcb56); background-image: linear-gradient(to bottom, #cae285, #9fcb56); border: 1px solid #9fcb56; border-left: none; border-right: none; border-color: #aec671 #9fbb62 #87ac4a; -moz-box-shadow: inset 0px 1px #d7e9a4; -webkit-box-shadow: inset 0px 1px #d7e9a4; box-shadow: inset 0px 1px #d7e9a4; /* т.к. при наведении появляется бордер сверху, то уменьшаем верхний падинг на 1px */ padding: 13px 25px 14px; }
Придаем активному пункту меню зеленый бэкграунд в виде градиента и задаем верхний и нижний бордер. При наведении появляется появляется бордер сверху, поэтому уменьшаем верхний падинг на 1px.
В результате получим следующий вариант:
Но у нас пока что нет боковых бордеров. Если их добавить обычным CSS стилем, то при переключении меню, пункты меню будут прыгать примерно на 1 пиксель. А это плохо. Поэтому воспользуемся нашими искусственными бордерами.
Пропишем для них стили:
/* стили для боковых бордеров */ .leftBorder, .rightBorder { display: none; position: absolute; width: 1px; height: 43px; background-color: #9fbb62; top: 0px; z-index: 1000; } .leftBorder { left: -1px; } .rightBorder { right: -1px; } /* при наведении на пункт и у активного пункта показываем боковые бордеры */ .active .leftBorder, .active .rightBorder, .nav > li:hover > .leftBorder, .nav > li:hover > .rightBorder { display: block; }
Теперь наши бордеры будут прекрасно отображаться при наведении.
Остался последний момент. Необходимо дописать стиль для первого пункта меню. Ему мы дадим закругление снизу-слева и немного иначе обработаем бордеры:
/* стили для первого пункта меню */ .first, .first a { -webkit-border-bottom-left-radius: 5px; /* уголок снизу-слева */ -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; } .first a { border-left: 1px solid #d4d4d4; } .first.active, .first a:hover { border-left: 1px solid #9fbb62!important; } .first.active a:hover { border-left: 0px solid #9fbb62!important; }
Теперь и первый пункт меню отображается корректно!
ИКОНКИ
Перед тем, как закончить, сделаем стили для наших иконок соц-сетей.
/* стили для соц-иконок */ .soc-icons { float: right; padding: 9px 7px 0 10px; } .soc-icon { float: right; margin-left: 4px; width: 24px; height: 24px; background-repeat: no-repeat; } .odnocl { background-image: url('../img/odnocl.png'); } .vk { background-image: url('../img/vk.png'); } .facebook { background-image: url('../img/facebook.png'); }
Тут все предельно просто.
ЗАКЛЮЧЕНИЕ
В текущем уроке мы научились делать красивое меню с эффектами наведения. Воспользовались многими свойствами CSS и узнали, как сделать искусственные бордеры.