Меню создавалось с 6 разными цветами на ваш вкус. Ну а теперь давайте создадим его.
Что бы работали наши иконки подключите стили для их реализации
HTML
Начнем мы с разметки. Мы напишем блок с навигацией nav и разметим в нем 2 списка, для основного меню и соц.сетей.
А теперь дело за малым и остается добавить немного красок.
CSS
Сначала оформим сам блок навигации. Я назвал его blue т.к. у нас несколько цветов, каждый из них имеет свой класс
.blue {
background: #0099FF;
height: 51px;
border: 1px solid #0099FF;
padding: 1px 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 6px 1px rgba(0,0,0,.15),inset 0 -1px 0 rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 6px 1px rgba(0,0,0,.15),inset 0 -1px 0 rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 6px 1px rgba(0,0,0,.15),inset 0 -1px 0 rgba(0,0,0,.05);
}
Зададим размер и отступ иконке домика, она играет роль главной страницы
Оформим начальный список ссылок
.menu li {
position: relative;
float: left;
display: block;
padding: 13px 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
cursor: pointer;
}
.menu li a {
display: block;
color: #fff;
}
.menu li:hover {
background: #0082D8;
}
Теперь осталось под меню. Сделаем его плавно появляющимся при наводке
.menu ul {
position: absolute;
top: 45px;
left: 0;
opacity: 0;
border: 2px solid #0099FF;
background: #fff;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s;
-moz-transition: opacity .25s;
-o-transition: opacity .25s;
-ms-transition: opacity .25s;
transition: opacity .25s;
}
.menu li:hover > ul { opacity: 1; }
И остались ссылки в нашем выпадающем списке
.menu ul li {
height: 0;
overflow: hidden;
padding: 0;
}
.menu li:hover > ul li {
height: 40px;
line-height: 35px;
overflow: visible;
-webkit-border-radius: none;
-moz-border-radius: none;
border-radius: none;
}
.menu ul li a {
width: 170px;
padding-left: 15px;
margin: 0;
height: 40px;
font-size: 12px;
color: #C5B0CB;
text-transform: uppercase;
}
.menu ul li a:hover {
color: #fff;
background: #20A6FF;
}
Все готово. Но осталось меню с соц.иконками, давайте доделаем его
.social {
float: right;
margin-right: 10px;
}
.social li {
float: left;
display: block;
padding: 13px 20px;
cursor: pointer;
}
.social li a {
color: #fff;
font-size: 14px;
}
.social li:hover {
background: #0082D8;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
Всего комментариев: 0 | |