Веб-дизайн и верстка. ЖСО-201. Лабораторное занятие №5. Сайдбар с навигацией

Вам нужно создать сайдбар с четырьмя вкладками и закладками навигации. При этом в сайдбаре должен быть использован линейный градиент (горизонтальный переход цвета), а в основном тексте – радиальный градиент (круговой переход цвета).

Для создания страницы потребуется конфигурация стилей в CSS и подключение этих стилей к коду страницы в HTML.

Рекомендуемая тема для выполнения задания: Contempo 1. В настройках темы необходимо отключить фоновую картинку.

Параметры стилей

1)Указываете общие параметры страницы:

html, body {

  font-family: 'Open Sans', sans-serif;

  font-weight: 100;

  height: 100%;

  margin: 0;

  padding: 0;

}

2)Оформление ссылок:

a {

  text-decoration: none;

}

3) Создаете произвольный класс градиента для круглого цветного фона текста. Сам радиальный градиент задается как фон с размерами и цветами, например:

background: radial-gradient(circle 400px, #00CED1, #FF00FF, #7B68EE, #FFFFFF);

Последний цвет – край окружности – оставляете белым.

4)Указываете атрибуты ссылок:

a i {

  font: 0/0 a;

  text-shadow: none;

  color: transparent;

}

5) Прописываете линейный градиент в навигационном меню – выберите свои цвета:

nav {

  background: linear-gradient(180deg, #00CED1, #FF00FF, #7B68EE);

  height: 100%;

  position: fixed;

  right: -300px;

  top: 0;

  -moz-transition: right 0.2s linear;

  -o-transition: right 0.2s linear;

  -webkit-transition: right 0.2s linear;

  transition: right 0.2s linear;

  width: 300px;

  z-index: 9001;

}

6)Задаете фон навигационной кнопки (можно оставить прозрачный):

nav #menuToggle {

  background: transparent;

  display: block;

  position: relative;

  height: 40px;

  left: -100px;

  top: 95px;

  width: 50px;

}

7) Укажите фон самой кнопки (задается одинаковый цвет в каждом из компонентов - вместо знака вопроса):

nav #menuToggle span {

  background: ?;

  display: block;

  height: 10%;

  left: 10%;

  position: absolute;

  top: 45%;

  width: 80%;

nav #menuToggle span:before, nav #menuToggle span:after {

  background: ?;

  content: '';

  display: block;

  height: 100%;

  position: absolute;

  top: -250%;

  -moz-transform: rotate(0deg);

  -ms-transform: rotate(0deg);

  -webkit-transform: rotate(0deg);

  transform: rotate(0deg);

  width: 100%;

}

8)Используете параметры движения сайдбара:

nav #menuToggle span:after {

  top: 250%;

}

nav a:nth-child(n+2) {

  color: white;

  display: block;

  font-size: 22px;

  margin: 30px 0 30px 30px;

}

nav a:nth-child(n+2):after {

  background: white;

  content: '';

  display: block;

  height: 2px;

  -moz-transition: width 0.2s;

  -o-transition: width 0.2s;

  -webkit-transition: width 0.2s;

  transition: width 0.2s;

  width: 0;

}

nav a:nth-child(n+2):hover:after {

  width: 100%;

}

9) Классы открытого сайдбара:

.open {

  right: 0;

}

.open #menuToggle span {

  background: transparent;

  left: 10%;

  top: 45%;

}

10) В этот класс добавьте фон кнопки сворачивания сайдбара:

.open #menuToggle span:before, .open #menuToggle span:after {

  background: ?;

  top: 0;

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -webkit-transform: rotate(45deg);

  transform: rotate(45deg);

}

11) Параметры открытого сайдбара можно не менять:

.open #menuToggle span:after {

  -moz-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  -webkit-transform: rotate(-45deg);

  transform: rotate(-45deg);

}

12) И закрытого тоже:

#menuToggle .navClosed {

  -moz-transition: background 0.1s linear;

  -o-transition: background 0.1s linear;

  -webkit-transition: background 0.1s linear;

  transition: background 0.1s linear;

}

#menuToggle .navClosed:before, #menuToggle .navClosed:after {

  -moz-transition: top 0.2s linear 0.1s, -moz-transform 0.2s linear 0.1s;

  -o-transition: top 0.2s linear 0.1s, -o-transform 0.2s linear 0.1s;

  -webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;

  -webkit-transition-delay: 0.1s, 0.1s;

  transition: top 0.2s linear 0.1s, transform 0.2s linear 0.1s;

}

#menuToggle .navOpen {

  -moz-transition: background 0.1s linear 0.2s;

  -o-transition: background 0.1s linear 0.2s;

  -webkit-transition: background 0.1s linear;

  -webkit-transition-delay: 0.2s;

  transition: background 0.1s linear 0.2s;

}

#menuToggle .navOpen:before, #menuToggle .navOpen:after {

  -moz-transition: top 0.2s linear, -moz-transform 0.2s linear;

  -o-transition: top 0.2s linear, -o-transform 0.2s linear;

  -webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;

  transition: top 0.2s linear, transform 0.2s linear;

}

Параметры активности JS:

13) В качестве параметров JavaScript используйте следующие:

(function($){

 // Menu Functions

 $(document).ready(function(){

   $('#menuToggle').click(function(e){

     var $parent = $(this).parent('nav');

      $parent.toggleClass("open");

      var navState = $parent.hasClass('open') ? "hide" : "show";

      $(this).attr("title", navState + " navigation");

   // Set the timeout to the animation length in the CSS.

   setTimeout(function(){

    console.log("timeout set");

    $('#menuToggle > span').toggleClass("navClosed").toggleClass("navOpen");

   }, 200);

     e.preventDefault();

   });

  });

})(jQuery);

14) Вам также потребуется встроить JavaScript-библиотеку. Взять ее можно здесь: https://sites.google.com/site/konoplevmedia/jslib.js

Собственно сам HTML

15) Указываете стандартные параметры в хэдере – doctype, метатеги и заголовок, встраиваете CSS:

<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>Sidebar</title>

</head>

16) Внутри тега <body> открываете тег <nav> и задаете идентификатор и класс сайдбара:

  <a href="" id="menuToggle" title="показать">

    <span class="navClosed"><i>показать</i></span></a>

17) Теперь вам нужно сделать вкладки сайдбара с закладками на текст. Закладка указывается в адресации ссылки с помощью # и номера закладки, то есть, например:

  <a href="#1">Experiment</a>

Таких вкладок у вас должно быть четыре

18) Закрываете навигационное меню сайдбара - </nav>

19) Открываете класс  градиента, который вы использовали в пункте 3).

20) Расставляете несколько абзацев с текстом. Чтобы привязать закладку из меню к конкретному месту в тексте, нужно развернуть тег секции с идентификатором ссылки, например:

<p><section class="section" id="1">текст, на который приведет закладка</section>

21) После всех абзацев закрываете класс градиента из пункта 17).

22) Встраиваете JS библиотеку и ваш JavaScript перед закрывающим тегом </body>. Для этого вам нужно сохранить Javascript-файл из Notepad++ и загрузить его в ваш репозиторий на sites.google.com
И JS библиотеку и ваш JavaScript встраиваются аналогично:
<script src="ссылка на файл js библиотеки"></script>
<script src="ссылка на ваш файл"></script>

Если при сохранении из Notepad++ у вас не получается JavaScript-файла, переименуйте его вручную, чтобы он заканчивался на .js
23) Закрываете теги </body> и </html>.

Если все верно, то ваша страница будет выглядеть примерно так: https://konoplevtech4.blogspot.com/2019/09/1.html#1

Ссылки на выполненное задание принимаются в комментариях к этому посту до 22:00 7 апреля. Также продублируйте комментарий в задание в moodle.

Занятий на неделе с 30 марта по 5 апреля не будет - подписан приказ о недельных каникулах.