Сайт на HTML/CSS/JS с нуля - Урок 2 "Навигационное меню. Часть 2"

Добро пожаловать!

Зарегистрировавшись у нас, вы сможете обсуждать, делиться и отправлять личные сообщения другим участникам нашего сообщества.

Зарегистрироваться!
  • Если Вы желаете помогать развитию проекта, готовы заполнять раздел(-ы) и подсказывать другим пользователям на портале, есть возможность попасть в команду редакторов. Для этого следует обратиться в техническую поддержку
Пользователь
Регистрация
16 Дек 2023
Сообщения
16
Всем, привет!
Сегодня мы продолжим писать сайт с нуля для самп проекта - Florida Role Play, На прошлом уроке мы сделали навигационное меню для сайта, сегодня мы будем его дополнять разными стилями и анимациями, для начала открываем наш проект, затем index.html, и ишем:
<li><a href="index.html">Главная</a></li>

У меня она на 27 строке, после того как найдете ее - внутрь тега <a>, после href="index.html" пишем
style="color: yellow;"

Теперь, давайте делать анимации, пока анимации мы будем делать простые, используя :hover, чуть позже научу делать и на JavaScript
Открываем style.css, и находим:
.header .navbar a{}

Давайте сделаем так, чтоб при курсоре у него менялся цвет, для этого в конце файла пишем следующее:
.header .navbar a:hover{ color: yellow; }

Вместо yellow пишите любой другой цвет, теперь еще можно сделать так, чтоб при курсоре не только менялся цвет, но и текс увеличивался, для этого в эту же конструкцию пишем:
-webkit-transform: scale(1.13); -ms-transform: scale(1.13); transform: scale(1.13);

В scale() пишем число во сколько раз текст увеличится, сохраняем и смотрим, все работает, но не хватает плавности, для этого в:
.header .navbar a{}

Пишем:
-webkit-transition: all 1.3s ease; transition: all 1.3s ease;

После all пишем время в секундах, сохраняем - совсем другое дело, и вот, дорогие друзья, с навигационным меню мы закончили
Если возникли проблемы - vk.com/ebaniysamper
Мой CSS файл на момент урока
CSS:
#logofirst{
    color: yellow;
    font-size: 60px;
    position: absolute;
    top: 17px;
    left: 40px;
    font-family: 'Vina Sans', cursive;
}
#logosecond{
    color: white;
    font-size: 45px;  
    position: absolute;
    top: 54px;
    left: 70px;
    font-family: 'Dancing Script', cursive;
}
.header .navbar{
    margin: 0;  
    padding: 0;
    list-style-type: none;
    width: 550px;
    text-align: center;
    position: absolute;
    top: 7%;  
    right: 45px;  
}
.header .navbar li{
    display: inline;
}
.header .navbar a{
    color: #fff;  
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    width: 100px;
    font-size: 19px;
    font-family: 'Roboto Mono', monospace;
    -webkit-transition: all 1.3s ease;
          transition: all 1.3s ease;
}
.header .navbar a:hover{
    color: yellow;
    -webkit-transform: scale(1.13);
    -ms-transform: scale(1.13);
    transform: scale(1.13);
}

Мой HTML файл на момент урока
HTML:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="source/css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Roboto+Mono&family=Russo+One&family=Vina+Sans&display=swap" rel="stylesheet">
    <title>Florida Role Play - Главная</title>
</head>
<body>
    <style type="text/css">
        body {
            background: #000 url(source/img/back.png);
            color: #fff;
               background-attachment: fixed;
               background-repeat: repeat-x;
            background-size: 100%;
          }
    </style>
    <header class="header">
        <span id="logofirst">Florida</span>
        <span id="logosecond">Role Play</span>
        <div class="navbar">
            <ul>
            <li><a href="index.html" style="color: yellow;">Главная</a></li>
            <li><a href="//ссылку на форум с http://">Форум</a></li>
            <li><a href="//ссылку на группу вк с http://">Новости</a></li>
            <li><a href="donate.html">Магазин</a></li>
            </ul>
        </div>
    </header>
</body>
</html>
 
Сверху