{"draftJsState":{"blocks":[{"data":{"image":{"id":"6151edaa7b505c4168c66bb2"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фото автора olia danilevich Pexels","type":"atomic:image","key":"38t1v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание навигационного меню сайта не представляет из себя ничего сложного. Первое с чего нужно начать это создание элемента

(открывающий и закрывающий тег обязателен). Внутри этого элемента мы размещаем неупорядоченный список и пишем название для каждого элемента меню.","type":"unstyled","key":"6mjic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот так это должно выглядеть:","type":"unstyled","key":"6il76"},{"data":{"image":{"id":"6151e171f8c746561828be6e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"95dnp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обратите внимание что каждый пункт меню представляет собой ссылку на ту или иную страницу Вашего сайта (в моем случае они никуда не ведут поэтому вместо URL-адреса допустимо использовать \"решетку\").","type":"unstyled","key":"732me"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот что мы получаем на выходе:","type":"unstyled","key":"flc1a"},{"data":{"image":{"id":"6151e20461a4184fbb76c37b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"btu1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Однако это совсем не то меню, которое мы привыкли видеть на различных интернет-сайтах. Как же быть? Решение есть! Применяем к нашему меню css-стили:","type":"unstyled","key":"ae3ts"},{"data":{"image":{"id":"6151e7784b3fe513ce7f91fa"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"divth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Думаю что дополнительные комментарии к этому скриншоту будут излишними. Скажу только что все вышепредставленные стили применяются к трем элементам меню:

и . Сохраняем примененные css-файл, обновляем html-страницу и получаем следующее:","type":"unstyled","key":"85nad"},{"data":{"image":{"id":"6151e8f64b3fe513ce82333f"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"b7ob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поздравляю! Вы создали свое первое навигационное меню!)","type":"unstyled","key":"ajo0f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"К статье будет прикреплен исходный код для копирования.","type":"unstyled","key":"dl7gr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для меню:","type":"unstyled","key":"8dv1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"}],"text":"
","type":"unstyled","key":"coo2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"
- Стационарные компьютеры
- Ноутбуки
- Смартфоны
- Планшеты
- Аксессуары
","type":"unstyled","key":"d9idf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"
","type":"unstyled","key":"4evah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для стилей:","type":"unstyled","key":"934m3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"ul {","type":"unstyled","key":"j14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":44,"offset":0,"style":"BOLD"}],"text":"list-style: none; /*убираем маркеры списка*/","type":"unstyled","key":"3fu9q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"BOLD"}],"text":"margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/","type":"unstyled","key":"fdh2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":54,"offset":0,"style":"BOLD"}],"text":"padding-left: 0; /*убираем левый отступ, равный 40px*/","type":"unstyled","key":"dteqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"text-align: center; /*выравниваем меню по центру*/","type":"unstyled","key":"anmbh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":46,"offset":0,"style":"BOLD"}],"text":"font-family: Arial; /*выбираем нужный шрифт*/}","type":"unstyled","key":"4q5vs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":0,"style":"BOLD"}],"text":"ul > li {","type":"unstyled","key":"e7382"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":57,"offset":0,"style":"BOLD"}],"text":"display: inline-block;/*выравниваем меню по горизонтали*/","type":"unstyled","key":"1v10f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":56,"offset":0,"style":"BOLD"}],"text":"margin-right: 30px; /*задаем расстояние между словами*/}","type":"unstyled","key":"f3pdi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":66,"offset":0,"style":"BOLD"}],"text":"a {text-decoration: none; /*убираем подчеркивание текста ссылок*/}","type":"unstyled","key":"d97c6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":0,"style":"ITALIC"}],"text":"Спасибо за внимание!","type":"unstyled","key":"8eng5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":101,"offset":0,"style":"ITALIC"}],"text":"Появились вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)","type":"unstyled","key":"f4b5b"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":11,"offset":41}],"inlineStyleRanges":[{"length":62,"offset":0,"style":"ITALIC"}],"text":"Если статья оказалась полезной предлагаю подписаться на канал.","type":"unstyled","key":"c82ke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"7obf8N8EaNQLJRyP9KIA"}],"entityMap":{"0":{"data":{"href":"https://zen.yandex.ru/id/607b3cb2dca3153cbc0ef00f","url":"https://zen.yandex.ru/id/607b3cb2dca3153cbc0ef00f"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}