Горизонтальное css - меню для сайта

661

В этом примере  мы создадим простое горизонтальное меню для сайта при помощи html и css.

Для этого сначала сделаем html - разметку нашего будущего меню:

<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Контакты</a></li>
</ul>

Отлично. После того, как разметка готова, необходимо задать меню необходимые свойства посредством css.

Для этого пропишем следующий код:

<style>
ul{width:700px;margin:0 auto;}
li{display:inline-block;border:1px solid rgb(95, 79, 17);padding:10px 20px;margin-right:5px;background:coral;color:white;text-transform:uppercase;}
li:hover{background:orange;color:black;}
a{color:white;text-decoration:none}
</style>

Давайте разберём подробно, что здесь написано.

ul {width:700px;margin:0 auto} - задаёт длину меню и выравнивает его по центру экрана.

display:inline-block  выводит элементы списка меню в одну строку друг за другом. Если отключить это параметр, то пункты меню  будут  располагаться друг под другом и оно станет вертикальным.

padding:10px 20px - задаёт необходимые отступы  от ссылки в блоке.

border:1px solid rgb(95, 79, 17) -задает границу пунктов.

margin-right:5px - отступ между пунктами меню.

background:coral -  цвет меню.

color:white - цвет ссылки.

text-transform:uppercase - преобразует строчные буквы в заглавные.

li:hover{background:orange;color:black;} задаёт параметры меню при наведении на него курсора мыши.

a{color:white;text-decoration:none} - задает параметры ссылок.

После проделанных действий наше меню будет выглядеть так:

 

css меню

Рис.1  CSS -  меню 

Выглядит немного скучновато, поэтому давайте немного украсим меню посредством css: заменим задний фон на градиент и добавим тень, для чего в его свойствах пропишем следующий код:

li{display:inline-block;padding:10px 20px;margin-right:5px;background: linear-gradient(to top,#b39919,#eaa60d);color:white;text-transform:uppercase;box-shadow:3px 5px 5px #ab9d9d;}

Теперь наше  меню будет выглядеть так:

 

css меню

Рис.2  Меню с тенью

Теперь сделаем меню еще немного красивей, добавив ему параметр transition, с помощью которого оно будет более плавно менять свой цвет при наведении курсора мыши..

li:hover{background:orange;color:black;transition:0.9s}.

В итого полный css - код меню будет выглядеть так:

<style>
body{background:url(ваш_задний_фон.jpg) no-repeat ;
background-size:cover;
background-attachment:fixed;}
ul{width:700px;margin:0 auto;}
li{display:inline-block;border:1px solid rgb(95, 79, 17);padding:10px 20px;margin-right:5px;background:linear-gradient(to top,#b39919,#eaa60d);color:white;text-transform:uppercase;box-shadow:3px 5px 5px #ab9d9d}
li:hover{background:orange;color:black;transition:0.9s}
a{color:white;text-decoration:none}
</style>

ДЕМО

css

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code