Предыдущая версия справа и слеваПредыдущая версияСледующая версия | Предыдущая версия |
software:development:demo:responsive_site_layout_book [2024/03/08 21:15] – [9. Стили блока aside] vladpolskiy | software:development:demo:responsive_site_layout_book [2024/03/08 21:19] (текущий) – [13. Код скрипта для мобильного меню] vladpolskiy |
---|
| |
| |
====2. Блок header==== | |
В блок заголовка <header> запишем следующие элементы блоков (контейнеров): логотип, кнопки меню и поиска по сайту, и открыв "Пояснительную записку блока <header>" разберем данный код: | |
| |
<code html HTML> | |
<header> | |
<!--начало блока логотип/меню веб страницы--> | |
<nav class="container"> | |
<a class="logo" href=""><img src="blender3d_demo/blender3d_demo.png" ></a> | |
<div class="nav-toggle"><span></span></div> | |
<form action="" method="get" id="searchform"> | |
<input type="text" placeholder="search..."> | |
<button type="submit"><i class="fa fa-search"></i></button> | |
</form> | |
<ul id="menu"> | |
<li><a href="">Features</a></li> | |
<li><a href="">Download</a></li> | |
<li><a href="">Support</a></li> | |
</ul> | |
</nav> | |
<!--конец блока логотип/меню веб страницы--> | |
</header> | |
</code> | |
#:Пояснительную записку блока <header> | |
- **%%<header>%%** <color #22b14c>- открывающий тег блока.</color> | |
- **%%<nav class="container">%%** <color #22b14c>- начало нашего блока колонтитула.</color> | |
- **%%<a class="logo" href="">%%****%%<img src="blender3d_demo/blender3d_demo.png" >%%****%%</a>%%** <color #22b14c>- блок логотипа с указанием месторасположения иконки.</color> | |
- **%%<div class="nav-toggle">%%****%%<span>%%****%%</span>%%****%%</div>%%** <color #22b14c>- блок кнопки показа/скрытия главного меню.</color> | |
- **%%<form action="" method="get" id="searchform">%%** <color #22b14c>- начало блока формы поиска</color>. | |
- **%%<input type="text" placeholder="search...">%%** <color #22b14c>- форма ввода текста поиска.</color> | |
- **%%<button type="submit">%%****%%<i class="fa fa-search">%%****%%</i>%%****%%</button>%%** <color #22b14c>- кнопка-иконка поиска по сайту.</color> | |
- **%%</form>%%** <color #22b14c>- закрывающий тег формы поиска.</color> | |
- **%%<ul id="menu">%%** <color #22b14c>- блок главного меню.</color> | |
- **%%<li>%%****%%<a href="">%%**Features**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Features".</color> | |
- **%%<li>%%****%%<a href="">%%**Download**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Download".</color> | |
- **%%<li>%%****%%<a href="">%%**Support**%%</a>%%****%%</li>%%** <color #22b14c>- кнопка меню "Support".</color> | |
- **%%</ul>%%** <color #22b14c>- конец блок главного меню.</color> | |
- **%%</nav>%%** <color #22b14c>- конец нашего блока колонтитула.</color> | |
- **%%</header>%%** <color #22b14c>- закрывающий тег блока.</color> | |
:# | |
====3. Блок main ==== | ====3. Блок main ==== |
В данный блок поместим предварительное содержимое анонса статей и открыв "Пояснительную записку блока main" разберем данный код: | В данный блок поместим предварительное содержимое анонса статей и открыв "Пояснительную записку блока main" разберем данный код: |
- **%%</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}} |