В этом примере мы создадим простое горизонтальное меню для сайта при помощи html и css.
Для этого сначала сделаем html - разметку нашего будущего меню:
<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.
Для этого пропишем следующий код:
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} - задает параметры ссылок.
После проделанных действий наше меню будет выглядеть так:
Рис.1 CSS - меню
Выглядит немного скучновато, поэтому давайте немного украсим меню посредством css: заменим задний фон на градиент и добавим тень, для чего в его свойствах пропишем следующий код:
Теперь наше меню будет выглядеть так:
Рис.2 Меню с тенью
Теперь сделаем меню еще немного красивей, добавив ему параметр transition, с помощью которого оно будет более плавно менять свой цвет при наведении курсора мыши..
В итого полный css - код меню будет выглядеть так:
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>