{
// Custom snippets definitions, as per https://github.com/emmetio/emmet/blob/master/lib/snippets.json
"snippets": {
"html": {
"abbreviations": {
"script": "<script type=\"text/javascript\">",
"script:src": "<script type=\"text/javascript\" src=\"\">",
"form": "<form action=\"${1:#}\" method=\"${2:post}\">",
"form:get": "<form action=\"${1:#}\" method=\"get\">",
"form:post": "<form action=\"${1:#}\" method=\"post\">",
"a": "<a href=\"${1:#}\">"
}
}
},
// Output profiles for syntaxes
// http://docs.emmet.io/customization/syntax-profiles/
"syntaxProfiles": {
// Enable XHTML dialect for HTML syntax
"html": "xhtml"
}
}/*========= Первичная загрузка окна ======================================*/
window.onload=function(){
fResize();
};
/*========= При уменьшении размера окна Меню заменяется кнопкой ==========*/
window.onresize=function(){
fResize();
fScroll();
};
function fResize() {
if (window.innerWidth<722){
document.getElementById('idivNavigation').innerHTML = '<i class="fa fa-bars fa-2x naviButton"></i>';
}
else {
document.getElementById('idivNavigation').innerHTML ='<ul class="navMenu">' +
'<li class="navMenuItem"><a href="#Home" id ="idHome" onclick="changeButtonsBackground("idHome")">HOME</a></li>' +
'<li class="navMenuItem"><a href="#About" id ="idAbout" onclick="changeButtonsBackground("idAbout")">ABOUT</a></li>' +
'<li class="navMenuItem"><a href="#Work" id ="idWork" onclick="changeButtonsBackground("idWork")">WORK</a></li>' +
'<li class="navMenuItem"><a href="#Blog" id ="idBlog" onclick="changeButtonsBackground("idBlog")">BLOG</a></li>' +
'<li class="navMenuItem"><a href="#Contact" id ="idContact" onclick="changeButtonsBackground("idContact")">CONTACT</a></li>' +
'</ul>';
}
window.varHome = $('#idivPurpleContainer').offset().top;
window.varAbout = $("#idivGreenContainer").offset().top;
window.varWork = $('#idivWhiteContainer').offset().top;
}
/*========= При клике на пункт Меню он подсвечивается темным Бекграундом =====*/
var itemId;
function changeButtonsBackground(itemId){
document.getElementById('idHome').style.backgroundColor="#8e58a3";
document.getElementById('idAbout').style.backgroundColor="#8e58a3";
document.getElementById('idWork').style.backgroundColor="#8e58a3";
document.getElementById('idBlog').style.backgroundColor="#8e58a3";
document.getElementById('idContact').style.backgroundColor="#8e58a3";
document.getElementById(itemId).style.backgroundColor ="#5f376f";
}
/*========= Плавный Скроллинг до Якоря при клике на пункт Меню ===============*/
/*
$(function($) {
$.localScroll({
duration: 1000,
hash: false });
});
*/
/*========= При Скроллинге подсвечиваеются текущие пункты Меню ===============*/
window.onscroll=function() {
fScroll();
};
function fScroll() {
var vScrollPosition;
vScrollPosition = $(window).scrollTop() + 200; // Добавляем 200 пикселей
if (vScrollPosition < window.varAbout) {
document.getElementById('idHome').style.backgroundColor = "#5f376f";
document.getElementById('idAbout').style.backgroundColor = "#8e58a3";
document.getElementById('idWork').style.backgroundColor = "#8e58a3";
document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
document.getElementById('idContact').style.backgroundColor = "#8e58a3";
}
else if (vScrollPosition > window.varAbout && vScrollPosition < window.varWork) {
document.getElementById('idHome').style.backgroundColor = "#8e58a3";
document.getElementById('idAbout').style.backgroundColor = "#5f376f";
document.getElementById('idWork').style.backgroundColor = "#8e58a3";
document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
document.getElementById('idContact').style.backgroundColor = "#8e58a3";
}
else if (vScrollPosition > window.varWork) {
document.getElementById('idHome').style.backgroundColor = "#8e58a3";
document.getElementById('idAbout').style.backgroundColor = "#8e58a3";
document.getElementById('idWork').style.backgroundColor = "#5f376f";
document.getElementById('idBlog').style.backgroundColor = "#8e58a3";
document.getElementById('idContact').style.backgroundColor = "#8e58a3";
}
}$('.navMenuItem').click(function(event) {
//Код анимированного перехода, можно даже без плугинов сделать
$('.navMenuItem').removeClass('navMenuItem_active');
$(this).addClass('navMenuItem_active');
});.navMenuItem_active {
background-color: #8e58a3;
}var gulp = require('gulp'),
stylus = require('gulp-stylus'),
nib = require('nib');
gulp.task('stylus', function() {
gulp.src(['./source/css/**/*.styl', '!./source/css/lib/**/*.styl', '!./source/**/_*.styl'])
.pipe(stylus({
use: [nib()]
}))
.on('error', handleError)
.pipe(gulp.dest('./public/css/'))
});<ul class="menu">
<li class="menu__item"><a href="#">Пункт</a></li>
<li class="menu__item menu__item_active"><a href="#">Пункт</a></li>
<li class="menu__item menu__item_submenu">
<a href="#">Пункт с подменю</a>
<div class="menu__submenu">
<ul class="submenu">
<li class="submenu__item"><a href="#">Пункт подменю</a></li>
<li class="submenu__item"><a href="#">Пункт подменю</a></li>
<li class="submenu__item submenu__item_active"><a href="#">Пункт подменю</a></li>
</ul>
</div>
</li>
<li class="menu__item">Пункт</li>
</ul>В хедере располагается три других блока: logo, menu и info.
<div class="header">
<div class="header__logo">
<div class="logo"></div>
</div>
<div class="header__menu">
<div class="menu"></div>
</div>
<div class="header__info">
<div class="info"></div>
</div>
</div>{
// Enable auto complete to be triggered automatically when typing.
"auto_complete": false
}{
// The number of spaces a tab is considered equal to
"tab_size": 2,
// Set to true to insert spaces when tab is pressed
"translate_tabs_to_spaces": true
}