<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Анимированное круговое меню на JavaScript

Анимированное круговое меню на JavaScript

В свернутом виде меню навигации из себя представляет кнопку с иконкой плюс. При клике по кнопке меню разворачивается - иконки образуют круг вокруг кнопки.

HTML код

Для иконок воспользуемся библиотекой ionicons: вставим теги ion-icon с названиями нужных иконок и две ссылки на саму библиотеку.

<div class="menu">
    <div class="toggle"><ion-icon name="add-outline"></ion-icon></div>
    <li style="--i:0;">
        <a href="#"><ion-icon name="home-outline"></ion-icon></a>
    </li>
    <li style="--i:1;">
        <a href="#"><ion-icon name="person-outline"></ion-icon></a>
    </li>
    <li style="--i:2;">
        <a href="#"><ion-icon name="settings-outline"></ion-icon></a>
    </li>
    <li style="--i:3;">
        <a href="#"><ion-icon name="mail-outline"></ion-icon></a>
    </li>
    <li style="--i:4;">
        <a href="#"><ion-icon name="key-outline"></ion-icon></a>     </li>
    <li style="--i:5;">
        <a href="#"><ion-icon name="videocam-outline"></ion-icon></a>
    </li>
    <li style="--i:6;">
        <a href="#"><ion-icon name="game-controller-outline"></ion-icon></a>
    </li>
    <li style="--i:7;">
        <a href="#"><ion-icon name="camera-outline"></ion-icon></a>
    </li>
</div>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>


Анимированное круговое меню на JavaScript.


CSS стили

Расположим меню в центре страницы, зададим для контейнера menu размеры и сделаем его гибким. Теперь все элементы контейнера встали в один ряд.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;/*гибкий контейнер*/
    justify-content: center;/*центрирование по горизонтали*/
    align-items: center;/*центрирование по вертикали*/
    min-height: 100vh;/*на всю высоту*/
    background: linear-gradient(45deg,#8460ed,#ff1252);/*линейный градиент*/
}
.menu{
    position: relative;/*относительное позиционирование*/
    width: 200px;/*ширина меню*/
    height: 200px;/*высота меню*/
    display: flex;
    justify-content: center;
    align-items: center;
}


Анимированное круговое меню на JavaScript.


Состояние свернутого меню

Соберем все пункты меню в одну точку и спрячем их за кнопкой-переключателем.

.menu li {
    position: absolute;/*абсолютное позиционирование*/
    left: 0;
    list-style: none;/*убираем черные маркеры*/
    transform-origin: 100px;/*направление трансформации*/
    transition: 0.5s;/*плавный переход*/
    transition-delay: calc(0.1s * var(--i));/*формула задержки*/
    transform: rotate(0deg) translateX(80px);/*трансформация по оси X*/
}
.menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;/*ширина иконки*/
    height: 40px;/*высота иконки*/
    background: #fff;/*цвет фона*/
    border-radius: 50%;/*получение круга*/
    transform: rotate(calc(360deg / -8 * var(--i)));/*формула расчета местоположения иконок*/
    box-shadow: 0 3px 4px rgba(0,0,0,0.15);/*тень*/
    color: #111;
    transition: 0.5s;
}
.toggle{
    position: absolute;
    width: 60px;
    height: 60px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;/*на верхнем слое*/
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(0,0,0,0.15);
    font-size: 2em;
    transition: transform 1.25s;
}


Анимированное круговое меню на JavaScript.


Состояние развернутого меню

.menu.active li {
    transform: rotate(calc(360deg / 8 * var(--i)));
}
.menu li a:hover {
    color: #ff1252;
}
.menu.active .toggle {
    transform: rotate(315deg);
}


Анимированное круговое меню на JavaScript.


JavaScript код

Напишем функцию, которая при наступлении события клика по кнопку будет разворачивать меню. Добавлять кнопке класс activeactive.

let toggle = document.querySelector('.toggle');
let menu = document.querySelector('.menu');
toggle.onclick = function(){
    menu.classList.toggle('active')
}

Начинающие разработчики часто жалуются, что они достаточно хорошо умею верстать и понимают базовые принципы программирования, но не могут самостоятельно написать не одной строчки кода на JavaScript. Чтобы не отвечать каждому лично, я специально написал статью "5 советов для начинающих разработчиков". Если вам по прежнему трудно справиться с программированием, тогда проще делегировать эту область разработки другим людям. Создать собственную веб-студию стало невероятно просто, когда расписан каждый шаг в моем видеокурсе.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

Silver78 Silver78 21.02.2022 17:59:32

почему перестали размещать примеры на CodePen ???

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.