| Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
| software:development:demo:responsive_site_layout_book [2024/03/08 21:15] – [2. Блок header] vladpolskiy | software:development:demo:responsive_site_layout_book [2024/03/08 21:19] (текущий) – [13. Код скрипта для мобильного меню] vladpolskiy |
|---|
| - **%%</div>%%** <color #22b14c>- конец контейнера всего контента веб страницы.</color> | - **%%</div>%%** <color #22b14c>- конец контейнера всего контента веб страницы.</color> |
| :# | :# |
| ====5. Блок <footer>==== | |
| В подвале страницы разместим информацию о копирайте и открыв "Пояснительную записку блока <footer>" разберем данный код: | |
| |
| <code html HTML> | |
| <!--начало контейнера подвал веб страницы--> | |
| <footer> | |
| <div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div> | |
| </footer> | |
| <!--конец контейнера подвал веб страницы--> | |
| </body> | |
| </html> | |
| <!--конец веб страницы--> | |
| </code> | |
| #:Пояснительная записка блока <footer>: | |
| - **%%<footer>%%** <color #22b14c>- начало блока "подвал".</color> | |
| - **%%<div class="footer-col"><span>The Free and Open Source 3D Creation Suite © 2023</span></div>%%** <color #22b14c>- блок текста копирайта.</color> | |
| - **%%</footer>%%** <color #22b14c>- конец блока "подвал".</color> | |
| - **%%</body>%%** <color #22b14c>- конец блока хранения содержания веб-страницы (контента).</color> | |
| - **%%</html>%%** <color #22b14c>- закрывающий тег, является концам блока (контейнера), который заключает в себе все содержимое веб-страницы.</color> | |
| :# | |
| ====6. Общие CSS-стили==== | ====6. Общие CSS-стили==== |
| Все нижеприведенные стили вынесены в один внешний файл CSS. | Все нижеприведенные стили вынесены в один внешний файл CSS. |
| - **%%</script>%%** <color #22b14c>- конец подключение файла скрипта.</color> | - **%%</script>%%** <color #22b14c>- конец подключение файла скрипта.</color> |
| :# | :# |
| ====13. Код скрипта для мобильного меню==== | |
| Данный скрипт работает при ширине окна браузера менее 768px, откройте "Пояснительную записку" для понимания кода скрипта. | |
| |
| |
| <code javascript JS> | |
| $('.nav-toggle').on('click', function(){ | |
| $('#menu').toggleClass('active'); | |
| }); | |
| </code> | |
| #: Пояснительная записка | |
| - **%%$('.nav-toggle').on('click', function(){ | |
| $('#menu').toggleClass('active'); | |
| });%%** <color #22b14c>- в теле **%%<header>%%** -> таблицы стиля CSS **%%.nav-toggle%%** -> блока скрытого меню **%%<div class="nav-toggle"><span></span></div>%%** имеет значение таблицы стиля CSS **%%display: none;%%** (т.е. скрыт по умолчанию и появляющейся при ширине странице меньше 768px) -> нажатие кнопки блока показа/скрытия главного меню -> стиль CSS **%%#menu%%** активный, т.е. будет показано скрытое меню -> (стиль CSS **%%#menu.active%%**).</color> | |
| :# | |
| ====14. Архив файлов примера==== | ====14. Архив файлов примера==== |
| Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\ | Все файлы данного примера включая все скрипты и таблицы шрифтов и иконок упакованы в архив и доступны для скачивания.\\ |
| <color #ed1c24>Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере.</color>\\ | <color #ed1c24>Вам необходимо поменять пути к файлам, согласно будущего месторасположения папок и файлов на вашем сервере.</color>\\ |
| {{:software:development:demo:book.rar|rar arhiv book 409kb}} | {{:software:development:demo:book.rar|rar arhiv book 409kb}} |
