Site icon Vavik96

Простое анимированное меню

В этом примере я покажу, как сделать простое и красивое меню, которое больше подойдет для сайтов компаний, чем для обычных сайтов. Структура меню простая, переделать её под себя будет проще простого. К тому же, в стилях было создано лишь два селектора.

HTML

<div class="menu">
<a href="#">Link</a><br>
<a href="#">BlueCode</a><br>
<a href="#">Link</a><br>
<a href="#">BlueCode</a><br>
<a href="#">Link</a><br>
</div>

 

В меню лучше использовать тег переноса <br>, чем в стилях position: block, так как кликабильным будет лишь текст, а не пространство, которое отдается под него. Это и удобнее, и проще.

CSS

Для начала создадим сам блок:

.menu {
width:300px;                     /* Ширина */
border-left:5px solid #969799;    /* Обводка слева */
color:#478CFB;                    /* Цвет текст */
font:15pt Consolas, Verdana;    /* Размер, семейство шрифта */
padding:2px 0;                    /* Отступы, 2px сверху-снизу, 0 слева-справа */
}

Теперь оформим вид ссылки. Здесь у тоже все просто:

.menu a{
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
border-bottom:1px solid #969799;    /* Обводка снизу */
padding:2px 0 0 0;                    /* Отступы. Сверху 2px, по остальным сторонам 0 */
color:#478CFB;                        /* Цвет ссылки */
font-weight:bold;                    /* Толщина текста */
text-decoration:none;                /* Убираем нижнюю линию */
}

Теперь напишем стили к псевдоклассу :hover. Здесь мы просто изменим цвет, фон, сделаем отступ слева. С свойством transition это все будет выглядит красиво и плавно.

.menu a:hover{
background-color: #969799;            /* Фон */
padding:2px 2px 0 10px;                /* Отступы. Сверху 2px, справа 2px, слева 10px */
color:white;                        /* Цвет ссылки */
}

Вот и все, простая менюшка готова. Остальное можно добавить и изменить, как говорится, по вкусу.

Пример

Источник

Exit mobile version