Современные информационные технологии. 4 курс. Лабораторное занятие №4. Сайдбар с навигацией
Для создания активного сайдбара вам потребуется:
Файл стилей CSS, динамический сценарий JavaScript и HTML, размещаемый в отдельном сообщении в блоге.
I Параметры стилей
1) Для начала в CSS указываем стили Google, задаем ширину и высот:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
box-sizing: border-box;
}
2) Прописываем шрифты в содержании страницы:
body {
font-family: 'Open Sans', sans-serif;
}
3) Создаем класс сайдбара - обратите внимание, что его ширину нужно настраивать в зависимости от вашей темы.
Также вам везде нужно использовать свои цвета:
.left-sidebar {
width: 160px;
height: 100%;
bottom: 0;
position: fixed;
left: 0;
background-color: #00BFFF;
transition: all 0.3s ease;
}
4) Элементы меню задаются как идентификатор соответствующих блоков списка:
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
5) К ним приписываются параметры адресации внутри основного текста:
a {
padding: 20px;
font-size: 14px;
color: black;
text-decoration: none;
display: block;
transition: all 0.3s ease;
}
a.active {
font-size: 16px;
transition: all 0.3s ease;
padding-left: 25px;
color: #fff;
background: #1E90FF;
}
6) Далее идут классы контейнера, секции и производных элементов:
.main-container {
height: 100%;
width: calc(100% - 200px);
margin-left: 200px;
}
.section {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.section:nth-child(odd) {
background: #AFEEEE;
}
7) Сохраняете файл стилей как CSS
II Динамика сайдбара
8) Первая часть динамики - функция документа
$(document).ready(function() {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function() {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top + 2
}, 500, 'swing', function() {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
9) Вторая часть динамики - функция скроллинга:
function onScroll(event) {
var scrollPos = $(document).scrollTop();
$('#menu a').each(function() {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu ul li a').removeClass("active");
currLink.addClass("active");
} else {
currLink.removeClass("active");
}
});
}
10) Сохраняете параметры динамики как JS.
III Подключение HTML
11) Сначала указываем тип страницы, язык и в теге хэдера разворачиваем стандарт стиля:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sidebar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
12) Здесь же встраиваете ваш CSS и закрываете </head>
13) Внутри тега <body> создаете класс сайдбара и меню
<div class="left-sidebar">
<div id="menu">
14) Затем указываете блоки сайдбара как список. Тут их три, у вас должно быть пять:
<ul>
<li><a class="active" href="#1">Блок 1</a></li>
<li><a href="#2">Блок 2</a></li>
<li><a href="#3">Блок 3</a></li>
</ul>
15) Закрываем классы сайдбара и меню:
</div>
</div>
16) Создаем класс контейнера:
<div class="main-container">
17) Для каждого из блоков создаем класс секции, в id указываем его порядковый номер (то есть с первого по пятый). Внутри тега абзаца размещается любой текст - его должно быть несколько строк, чтобы работала навигация.
<section class="section" id="1"><p></p></section>
<section class="section" id="2"><p></p></section>
и так далее
18) Закрываем класс контейнера
</div>
19) Далее встраиваем стандарт библиотеки jQuery:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
20) После чего встраиваете свой JS
21) Закрываете теги страницы:
</body>
</html>
Если все верно, то сайдбар должен выглядеть примерно так: https://konoplevdesign3.blogspot.com/2019/01/blog-post_28.html#3
Ссылки на выполненное задание принимаются в комментарии к данному посту до 20:00 18 февраля.
Файл стилей CSS, динамический сценарий JavaScript и HTML, размещаемый в отдельном сообщении в блоге.
I Параметры стилей
1) Для начала в CSS указываем стили Google, задаем ширину и высот:
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
box-sizing: border-box;
}
2) Прописываем шрифты в содержании страницы:
body {
font-family: 'Open Sans', sans-serif;
}
3) Создаем класс сайдбара - обратите внимание, что его ширину нужно настраивать в зависимости от вашей темы.
Также вам везде нужно использовать свои цвета:
.left-sidebar {
width: 160px;
height: 100%;
bottom: 0;
position: fixed;
left: 0;
background-color: #00BFFF;
transition: all 0.3s ease;
}
4) Элементы меню задаются как идентификатор соответствующих блоков списка:
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
5) К ним приписываются параметры адресации внутри основного текста:
a {
padding: 20px;
font-size: 14px;
color: black;
text-decoration: none;
display: block;
transition: all 0.3s ease;
}
a.active {
font-size: 16px;
transition: all 0.3s ease;
padding-left: 25px;
color: #fff;
background: #1E90FF;
}
6) Далее идут классы контейнера, секции и производных элементов:
.main-container {
height: 100%;
width: calc(100% - 200px);
margin-left: 200px;
}
.section {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.section:nth-child(odd) {
background: #AFEEEE;
}
7) Сохраняете файл стилей как CSS
II Динамика сайдбара
8) Первая часть динамики - функция документа
$(document).ready(function() {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function(e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function() {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top + 2
}, 500, 'swing', function() {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
9) Вторая часть динамики - функция скроллинга:
function onScroll(event) {
var scrollPos = $(document).scrollTop();
$('#menu a').each(function() {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu ul li a').removeClass("active");
currLink.addClass("active");
} else {
currLink.removeClass("active");
}
});
}
10) Сохраняете параметры динамики как JS.
III Подключение HTML
11) Сначала указываем тип страницы, язык и в теге хэдера разворачиваем стандарт стиля:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Sidebar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
12) Здесь же встраиваете ваш CSS и закрываете </head>
13) Внутри тега <body> создаете класс сайдбара и меню
<div class="left-sidebar">
<div id="menu">
14) Затем указываете блоки сайдбара как список. Тут их три, у вас должно быть пять:
<ul>
<li><a class="active" href="#1">Блок 1</a></li>
<li><a href="#2">Блок 2</a></li>
<li><a href="#3">Блок 3</a></li>
</ul>
15) Закрываем классы сайдбара и меню:
</div>
</div>
16) Создаем класс контейнера:
<div class="main-container">
17) Для каждого из блоков создаем класс секции, в id указываем его порядковый номер (то есть с первого по пятый). Внутри тега абзаца размещается любой текст - его должно быть несколько строк, чтобы работала навигация.
<section class="section" id="1"><p></p></section>
<section class="section" id="2"><p></p></section>
и так далее
18) Закрываем класс контейнера
</div>
19) Далее встраиваем стандарт библиотеки jQuery:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
20) После чего встраиваете свой JS
21) Закрываете теги страницы:
</body>
</html>
Если все верно, то сайдбар должен выглядеть примерно так: https://konoplevdesign3.blogspot.com/2019/01/blog-post_28.html#3
Ссылки на выполненное задание принимаются в комментарии к данному посту до 20:00 18 февраля.
https://sidebara.blogspot.com/2019/02/sidebar-1.html#2 А.Кузовенкова
ОтветитьУдалитьБычков Михаил, ФЖ-402
ОтветитьУдалитьhttps://michail-1997.blogspot.com/2019/02/blog-post_8.html
https://sidebarnovy.blogspot.com/2019/02/2.html#5
ОтветитьУдалитьhttps://zvezdasmerty.blogspot.com/2019/02/4.html#2
ОтветитьУдалитьОценка "отлично"
УдалитьПредыдущее задание - 3D панорама. https://brandbrandnew.blogspot.com/2019/01/22-jan.html
ОтветитьУдалить