ЖМК-301/2. Веб-дизайн. Практическое занятие №4. Google Material-дизайн c сайдбар-меню

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

- две фоновых картинки одинакового размера - для основного меню и для перекрывающего меню. Загрузите их в репозиторий;

- четыре абзаца текста со стартовыми буквами.

I CSS

1) Сначала задаем шрифт и высоту страницы:

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,900');  

html, body {

  font-family: 'Montserrat', sans-serif;

  height: 100%;

  margin: 0;

  }

 2) Добавляем класс box внутри которого будет размещаться страница. Для выравнивания иллюстраций - если потребуется - измените отступ сверху: 

.box {

  width: 100%;

  position: absolute;

  margin-top: -400px;

  overflow: auto;

}

3) В общем селекторе указываем логику отображения компонентов, в селекторе иллюстрации - размер фото по отношению к фактическому:

* {

  box-sizing: border-box;

  padding: 0;

  margin: 0;

  font-family: 'Montserrat', sans-serif;

  font-weight: 400;

  font-size: 16px;

  line-height: 1.3;

}

img {

width: 95%;

  }

  

4) Задаем идентификатор текста и класс навигационного меню:

#text {

  z-index: 0;

  padding: 18px 38px;

}

.nav {

  z-index: 9;

  position: fixed;

  bottom: 10.5%;

  right: 5.5%;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background-color: #f9f9f9;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  visibilty: hidden;

  opacity: 0;

  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.48);

  cursor: pointer;

  transition: all 0.3s ease-in;

}

5) Добавляем класс класса для отображения сайдбар-меню:

.nav.show {

  visibility: visible;

  opacity: 1;

}

6) Теперь перекрывающий слой с навигацией на основном фото:

#header-overlay {

  height: 100vh;

  width: 100%;

  background: transparent;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1000;

}

7) Задаем идентификаторы основного меню:

#intro {

  position: absolute; 

  top: 10%;

  left: 47%;

  transform: translate(-50%, -50%);

  width: 100%;

  text-align: center;

  color: rgba(96, 125, 139,1.0);

}

#intro h3 {

  font-family: 'Montserrat', serif;

  font-size: 50px;

  text-transform: capitalize;

  font-weight: 400;

  padding-bottom: 7px;

  transition: .7s ease-in-out;

  color: rgba(70,130,180);

}

#intro a {

  font-family: 'Montserrat', sans-serif;

  font-size: 14px;

  border: 1px solid rgba(96, 125, 139,1.0);

  padding: 10px 30px;

  position: absolute;

  transition: .3s ease-in-out;

  cursor: pointer;

  left: 0;

  top: 0;

}

8) Контейнер кнопки:

#button-container {

  height: 40px;

  width: 121px;

  position: absolute;

  left: 50%;

  top: 350%;

  transform: translate(-50%, 50%);

  transition: .3s ease-in-out;

}

9) кнопка и ее цвет (укажите свой):

#button-overlay {

  height: 40px;

  width: 0;

  top: 0px;

  left: 0;

  position: absolute;

  background: цвет кнопки;

  transition: .3s ease-in-out;

}

10) Классы загрузчика кнопки и цвет его рамки:

.loader {

  width: 121px !important;

}

.loader2 {

  color: #000;

  border: 1px solid rgba(255, 255, 240) !important; 

}

11) Соответствующие классы заполненного загрузчика:

.fuller {

  margin-left: -8%;

  opacity: 0;

  visibility: hidden;

}

.fuller2 {

  visibility: hidden;

  opacity: 0;

}

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

#menu-button-container {

  display: inline-block;

  float: right;

  padding: 80px;

  margin-top: -60px;

}

13) Размеры самой кнопки:

#menu-button {

  height: 30px;

  width: 35px;

  position: relative;

  cursor: pointer;

  z-index: 2000;

  overflow: hidden;

}

14) Цвет кнопок в сайдбар-меню - укажите свой:

#menu-button div {

  height: 3px;

  width: 100%;

  background: ваш цвет;

  position: absolute;

  top: 14px;

  transition: .4s ease-in-out;

}

15) Производные кнопки:

 #menu-button div:nth-child(1) {

  top: 7px;

} 

#menu-button div:nth-child(2), #menu-button div:nth-child(3) {

  top: 14px;

}

#menu-button div:nth-child(4) {

  top: 21px;

}

#menu-button.animate div:nth-child(1), #menu-button.animate div:nth-child(4) {

    top: 14px;

    opacity: 0;

  }

#menu-button.animate div:nth-child(2) {

    transform: rotate(45deg);

  }

#menu-button.animate div:nth-child(3) {

  transform: rotate(-45deg);

}

16) Цвет кнопок меню при наведении курсора:

#menu-button.change-color div {

  background: ваш цвет;

}

17) Ширина кнопок:

#menu-button.hover-animation div:nth-child(1), #menu-button.hover-animation div:nth-child(4) {

  width: 80%;

}

18) Цвета кнопок закрытия меню с наведенным курсором и без. Используйте свои цвета:

#menu-button.hover-color div {

  background: цвет активной кнопки;

}

#menu-button.hover-color2 div {

  background: цвет неактивной кнопки !important;

}

19) Иллюстрация на перекрывающем меню в сайдбар-меню. Используйте свою иллюстрацию из репозитория:

#menu-overlay {

  position: absolute;

  height: 0;

  width: 95%;

  background: url("фото в репозитории");

  left: 0;

  top: 0;

  transition: .5s ease-in;

  z-index: 2000;

}

20) Класс показа перекрывающей иллюстрации. Укажите ту высоту, которая совпадает с высотой исходной иллюстрации в основном меню:

.reveal {

  height: 700px !important;

}

21) Контейнер расположения кнопок-вкладок в выпадающем меню сайдбар-меню:

#nav-container {

  position: absolute;

  top: 10%;

  left: 60%;

  transform: translate(-50%, -50%);

  z-index: 2000;

  transition: 1s ease-out;

}

#nav-container ul li {

  list-style: none;

  transition: .6s ease-in-out;

}

22) Их цвет с наведенным курсором. Укажите свой:

#nav-container ul li a {

  text-decoration: none;

  font-family: 'Montserrat', serif;

  font-size: 50px;

  line-height: 28px;

  color: цвет с наведенным курсором;

  transition: .3s ease-in-out;

}

23) Класс скрытых элементов:

.hidden {

  opacity: 0;

  visibility: hidden;

  margin-left: -60%;

}

24) Цвет при наведенном курсоре на меню:

.nav-animate {

  color: ваш цвет !important;

}

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

 float: left;

 font-size: 84px;

 line-height: 64px;

 padding-top: 4px;

 padding-right: 8px;

 padding-left: 3px;

 font-family: 'Montserrat', sans-serif; 

26) Сохраните CSS.

II HTML 

27) Открываем типовые теги страницы:

<!DOCTYPE html>

<html lang="en" >

<head>

  <meta charset="UTF-8">

  <title>Заголовок</title>

28) Указываем масштаб:

<meta name="viewport" content="width=device-width, initial-scale=1">

29) Встраиваем библиотеки иконок:

<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>  

30) Встраиваем ваш CSS

31) Закрываем </head> внутри <body> указываем классы контейнера, перекрывающего слоя, фона и вводной части:

  <div class="box">

<div id="header-container">

  <div id="header-bg"></div>

  <div id="header-overlay">

    <div id="intro">

32) Добавляем заголовок:

      <h3 class="fuller">Ваш заголовок</h3>

      <div id="button-container">

        <div id="button-overlay"></div>

33) Добавляем надпись в поле заполняемой кнопки (лоадер/фуллер):

        <a class="fuller2" href="#1">Текст</a>

      </div>

       </div>

34) Классы контейнеров сайдбар-меню:

   <div id="menu-overlay"></div>

<div id="menu-button-container">

  <div id="menu-button">

    <div></div>

    <div></div>

    <div></div>

    <div></div>

  </div></div>

</div>

35) Класс вкладок в скрываемом меню. Дайте названия вкладкам:

  <div id="nav-container" class="hidden">

    <ul>

      <li id="nav1" class="hidden"><a href="#">Вкладка 1</a></li>

      <li id="nav2" class="hidden"><a href="#">Вкладка 2</a></li>

      <li id="nav3" class="hidden"><a href="#">Вкладка 3</a></li>

    </ul>

  </div>

36) Добавляем класс основной иллюстрации и ссылку на нее из репозитория:

<main>

  <div id="image">

    <img src="адрес иллюстрации">

  </div>

37) Далее идет основной текст:

  <div id="text">

38) Первый абзац с указанием класса первой буквы:

<p><span class="first-character класс первой буквы">В</span>аш текст

  <br>

  <br>

39) Второй:

<p><span class="first-character класс первой буквы">В</span>аш текст

  <br>

  <br>

40) Третий:

<p><span class="first-character класс первой буквы">В</span>аш текст

  <br>

  <br>

41) Четвертый:

<section class="section" id="1"><p><span class="first-character класс первой буквы">В</span>Ваш текст</section>

<p>И последний абзац текста</p>

  </div>

42) Идентификатор перекрывающего сайдбар-меню:

  <div id="overlay"></div></div>

43) Закрываем тег основного блока страницы:

</main>

III JavaScript

44) Подключите библиотеку jQuery в версии не ниже 2.1.3. Взять ее можно здесь: 

https://cdnjs.com/libraries/jquery/3.0.0  

45) Добавьте основной JavaScript с функциями сайдбар-меню и кликом по лоадеру:

 $(document).ready(function(){

  $("#intro h3").delay(1000).queue(function(n){

    $(this).toggleClass("fuller")

    n()

  })

  $("#intro a").delay(1400).queue(function(n){

    $(this).toggleClass("fuller2")

    n()

  })

   $("#intro a").hover(function(){

     $("#button-overlay").toggleClass("loader")

     $("#button-container a").toggleClass("loader2")

   })

   $("#menu-button").hover(function(){

     $("#menu-button").toggleClass("hover-animation")

     $("#menu-button").toggleClass("hover-color")

   })

   $('#nav-container ul li a').hover(function(){

  $('#nav-container ul li a').toggleClass('nav-animate');

  $(this).toggleClass('nav-animate')

    /* $(this).toggleClass('nav-shadow') */

});

  $("#menu-button").click(function (){

    $("#intro h3").toggleClass("fuller")

  

    $("#intro a").toggleClass('fuller2')

    $("#menu-button").toggleClass("animate")

    $("#menu-overlay").toggleClass("reveal")

    $("#menu-button").toggleClass("change-color")

    $("#menu-button").hover(function(){

      $("#menu-button").toggleClass('hover-color')

      $("#menu-button").toggleClass('hover-color2')

    })

    $("#nav-container").delay(200).queue(function(n){

      $(this).toggleClass("hidden")

      n()

    })

    $("#nav1").delay(400).queue(function(n){

      $(this).toggleClass("hidden")

      n()

    })

    $("#nav2").delay(600).queue(function(n){

      $(this).toggleClass("hidden")

      n()

    })

    $("#nav3").delay(800).queue(function(n){

      $(this).toggleClass("hidden")

      n()

    })

  })

})

46) Закройте оставшиеся теги: now remove all javascript code and div classes  

</div>

</body>

</html>

Опубликуйте задание в своем блоге. Если все верно, то ваш проект будет выглядеть похожим образом: https://konoplevdesign3.blogspot.com/p/gm-button-round-button-and-main-text.html

Ссылки на выполненное задание принимаются в комментариях к этому посту для ЖМК-302 до 17:00 27 февраля, для ЖМК-301 до 17:00 2 марта.

РЕЗУЛЬТАТЫ (данные обновляются):

Акимкина Олеся - 4

Ананина Виктория - 5

Андрюк Анастасия - 5

Власов Максим - 5

Гайфуллина Анна - 5

Гостева Полина - 5

Григорьева Екатерина - 5

Жукова Виктория - 5

Зубко Сабина - 4

Климович Мария - 5

Кобякова Дарья - 4

Корнилова Полина - 4

Куликова Мария - 5

Маханек Вера - 4

Новая Валентина - 4

Орлова Арина - 5

Слободская Елизавета - 5

Цветкова Виктория - 5 

Чугунова Елизавета - 5

Шабалина Виктория - 5

Широкоумова Полина - 5