Всем привет, это первый урок по созданию сайта. В этом уроке мы будем делать простое меню горизонтальное фиксированное меню с выпадающими списками, прибитое к верхнему, левому и правому краю. Начнём! 1) Сначала нужно написать структуру меню: Код
<div class="menu"> <a href="#"><div class="li">BUTTON</div></a> <a href="#"><div class="li">BUTTON</div></a> <a href="#"><div class="li">BUTTON</div></a> <a href="#"><div class="li">BUTTONDROP <div class="drop"><div class="dropli">DROPLIBUTTON</div><div class="dropli">DROPLI</div><div class="dropli">DROPLI</div><div class="dropli">DROPLI</div></div> </div></a> <a href="#"><div class="li">BUTTON</div></a> </div>
Классом "menu" обозначим само меню, "li" - пункты внутри меню, "drop" - выпадающий список, ну а классом "dropli" пункты внутри самого выпадающего списка. 2)Напишем стили для класса "menu": Код
.menu{ position:fixed; // фиксация меню, "absolute" - не будет фиксировано left:0; right:0; top:0; background:#ddd; // фон меню box-shadow:0 0 8px #a0a0a0; // тень от меню -moz-box-shadow:0 0 8px #a0a0a0; // тень от меню -o-shadow:0 0 8px #a0a0a0; // тень от меню -webkit-box-shadow:0 0 8px #a0a0a0 ;// тень от меню }
3)Пропишем стили для пунктов меню, т.е для "li": Код
.li{ display:inline-block; color:#404040; // цвет шрифта font-family:calibri; font-size:10pt; // размер шрифта padding:10px 20px 10px 20px; border-right:1px solid #ccc; // правая граница } .li:hover{ //при наведении cursor:pointer; background:#e1e1e1; // фон } .menu a{ text-decoration:none; } .menu a:hover{ text-decoration:none; }
4)Стили для выпадающего списка: Код
.drop{ opacity:0; display:none; position:absolute; border:1px solid #ddd;//границы background:#dfdfdf;//фон z-index:1; box-shadow:0 1px 6px #a0a0a0; -webkit-box-shadow:0 1px 6px #a0a0a0; -moz-box-shadow:0 1px 6px #a0a0a0; -o-box-shadow:0 1px 6px #a0a0a0; border-radius:3px; margin-top:19px; margin-left: -20px; }
И для его пунктов: Код
.dropli{ padding:5px; width:150px; color:#404040;//цвет шрифта font-family:calibri;//тип шрифта font-size:10pt;//размер шрифта border-top:1px solid #d0d0d0; } .dropli:hover{ // наведение на пункт cursor:pointer; background:#e3e3e3; }
5)Создадим анимацию для "drop": Код
.li:hover .drop{ // при наведении на пункт меню в котором находится "drop" сделать его видимым display:block; opacity:1; -webkit-animation-name: 'movement'; -webkit-animation-duration: 0.2s; -webkit-animation-timing-function: easy-out; -webkit-animation-direction:alternate; -moz-animation-name: 'movement'; -moz-animation-duration: 0.2s; -moz-animation-timing-function: easy-out; -moz-animation-direction:alternate; -o-animation-name: 'movement'; -o-animation-duration: 0.2s; -o-animation-timing-function: easy-out; -o-animation-direction:alternate; animation-name: 'movement'; animation-duration: 0.2s; animation-timing-function: easy-out; animation-direction:alternate; }
А вот и сама анимация: Код
@-webkit-keyframes 'movement' { from { top: 55px; opacity:0; -webkit-animation-timing-function: easy-in-out; } to { top: 25px; opacity:1; } } @-o-keyframes 'movement' { from { top: 55px; opacity:0; -webkit-animation-timing-function: easy-in-out; } to { top: 25px; opacity:1; } } @-moz-keyframes 'movement' { from { top: 55px; opacity:0; -webkit-animation-timing-function: easy-in-out; } to { top: 25px; opacity:1; } } @keyframes 'movement' { from { top: 55px; opacity:0; -webkit-animation-timing-function: easy-in-out; } to { top: 25px; opacity:1; } }
Почти готово! Осталось сделать небольшие штрихи. В самый первый пункт "dropli" приписываем style="border-top:none;" чтобы не было двойной линии. Добавляем уголок к "drop" Код
.ugol{ width: 0; height: 0; border-left: 6px solid transparent; border-bottom: 6px solid #dfdfdf; border-right: 6px solid transparent; margin-top: -6px; margin-left: 25px; }
, и прописываем
сразу после И последнее, нужно добавить небольшую прозрачную полоску чтобы "drop" раньше времени не исчезал:
(нужно вставить перед
)
Код
.drophover{ display:none; width:150px; height:10px; position:absolute; margin-top:10px; margin-left: -20px; } .li:hover .drophover{ display:block; }
Готово!
Вот так у вас должно получится -
демо Вот весь код:
Код
<style> .li:hover .drop{ display:block; opacity:1; -webkit-animation-name: 'movement'; -webkit-animation-duration: 0.2s; -webkit-animation-timing-function: easy-out; -webkit-animation-direction:alternate; -moz-animation-name: 'movement'; -moz-animation-duration: 0.2s; -moz-animation-timing-function: easy-out; -moz-animation-direction:alternate; -o-animation-name: 'movement'; -o-animation-duration: 0.2s; -o-animation-timing-function: easy-out; -o-animation-direction:alternate; animation-name: 'movement'; animation-duration: 0.2s; animation-timing-function: easy-out; animation-direction:alternate; } .ugol{ width: 0; height: 0; border-left: 6px solid transparent; border-bottom: 6px solid #dfdfdf; border-right: 6px solid transparent; margin-top: -6px; margin-left: 25px; } .li:hover .drophover{ display:block; } body{ background:#ccc; } .drop{ opacity:0; display:none; position:absolute; border:1px solid #ddd; background:#dfdfdf; z-index:1; box-shadow:0 1px 6px #a0a0a0; border-radius:3px; margin-top:19px; margin-left: -20px; } .dropli:hover{ cursor:pointer; background:#e3e3e3; } .li:hover{//наведение cursor:pointer; background:#e1e1e1; } .dropli{ padding:5px; width:150px; color:#404040; font-family:calibri; font-size:10pt; border-top:1px solid #d0d0d0; } .menu{ position:absolute; z-index:2; left:0; right:0; top:0; background:#ddd; box-shadow:0 0 8px #a0a0a0; } .drophover{ display:none; width:150px; height:10px; position:absolute; margin-top:10px; margin-left: -20px; } .li{ display:inline-block; color:#404040; font-family:calibri; font-size:10pt; padding:10px 20px 10px 20px; border-right:1px solid #ccc; } @-webkit-keyframes 'movement' { from { top: 55px; opacity:0; -webkit-animation-timing-function: easy-in-out; } to { top: 25px; opacity:1; } } @-o-keyframes 'movement' { from { top: 55px; opacity:0; -webkit-animation-timing-function: easy-in-out; } to { top: 25px; opacity:1; } } @-moz-keyframes 'movement' { from { top: 55px; opacity:0; -webkit-animation-timing-function: easy-in-out; } to { top: 25px; opacity:1; } } @keyframes 'movement' { from { top: 55px; opacity:0; -webkit-animation-timing-function: easy-in-out; } to { top: 25px; opacity:1; } } .menu a{ text-decoration:none; } .menu a:hover{ text-decoration:none; } </style> <div class="menu"><a href="#"><div class="li">BUTTON</div></a><a href="#"><div class="li">BUTTON</div></a><div class="li">BUTTON</div><div class="li">BUTTONDROP<div class="drophover"></div><div class="drop"><div class="ugol"></div><div class="dropli" style="border-top:none;">DROPLIBUTTON</div><div class="dropli">DROPLI</div><div class="dropli">DROPLI</div><div class="dropli">DROPLI</div></div></div><div class="li">BUTTON</div></div>
Моё портфолио