Skip to content

B
bobcat-su_full
Commit 1f870a04 authored by Sergey's avatar Sergey
Browse files
Options

Add hover and catalog

parent 19c377ee
Show whitespace changes
Inline Side-by-side
Showing with 430 additions and 14 deletions
src/catalog.html 0 → 100644
View file @ 1f870a04
//= template/common/header.html
//= template/menu-list-catalog/index.html
//= template/common/footer.html
\ No newline at end of file
src/js/main-list.js 0 → 100644
View file @ 1f870a04
'use strict';
(function () {
var checkActive = function (list, elem) {
list.forEach(function (item) {
console.log('Here!');
if(item !== elem){
if(item.classList.contains('active')){
item.classList.remove('active');
}
}
})
};
var tabs = document.querySelector('.menu-list__mainpage');
if(tabs) {
var tab = tabs.querySelectorAll('.menu-list__link');
tab.forEach(function (item, index) {
item.addEventListener('click', function (evt) {
checkActive(tab, item);
if(item.classList.contains('active')){
}else {
evt.preventDefault();
item.classList.toggle('active');
var productSlider = document.querySelectorAll('.product-slider__wrapper');
productSlider[index].classList.add('active');
checkActive(productSlider, productSlider[index]);
}
})
})
}
})();
\ No newline at end of file
src/js/main-slider.js
View file @ 1f870a04
......@@ -9,6 +9,10 @@
delay: 3000,
grabCursor: true
},
pagination: {
el: '.swiper-pagination',
clickable: true
}
});
});
})();
\ No newline at end of file
src/scss/common/header/header-nav.scss
View file @ 1f870a04
......@@ -12,6 +12,12 @@
justify-content: space-between;
}
.nav__item:hover{
.nav__link{
font-weight: bold;
}
}
.nav__link{
text-decoration: none;
......
src/scss/link-list-red/link-list-red.scss
View file @ 1f870a04
......@@ -45,4 +45,17 @@
height: 35px;
fill: $white-text;
margin-right: 15px;
transition: .2s;
}
.link-list-red__text{
transition: .2s;
}
.link-list-red__link:hover{
.link-list-red__text{
transform: translateY(-4px);
}
.link-list-red__ico{
transform: translateY(-4px);
}
}
\ No newline at end of file
src/scss/main-slider/main-slider-common.scss
View file @ 1f870a04
......@@ -4,3 +4,29 @@
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.65) 35%, #232021 80%, #232021 100%),url("/img/background-min.jpg")no-repeat;
background-size: cover;
}
.main-slider__wrapper{
.swiper-pagination-bullet{
position: relative;
width: 15px;
height: 15px;
background: $white-text;
border: 1px solid $grey-text;
opacity: 1;
}
.swiper-pagination-bullet-active{
&:after{
content: "";
display: inline-block;
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
background: $red-color;
}
}
}
src/scss/menu-list/menu-list-main.scss
View file @ 1f870a04
@import "../settings/color";
.menu-list{
.menu-list {
background: $menu-list;
}
.menu-list__wrapper{
.menu-list__wrapper {
padding: 0 20px;
}
.menu-list__list{
.menu-list__list {
display: flex;
list-style-type: none;
padding-left: 0;
......@@ -14,9 +16,10 @@
justify-content: space-between;
}
.menu-list__item{
.menu-list__item {
position: relative;
&:after{
&:after {
content: "";
display: inline-block;
position: absolute;
......@@ -27,15 +30,16 @@
height: 100%;
background: rgba($white-text, .6);
}
&:last-child{
&:after{
&:last-child {
&:after {
content: "";
display: none;
}
}
}
.menu-list__link{
.menu-list__link {
display: flex;
flex-direction: column;
align-items: center;
......@@ -43,7 +47,12 @@
color: $white-text;
padding: 10px 20px 20px;
transition: .2s;
&:hover{
background: $red-color;
&:hover {
background: rgba($red-color, .8);
}
}
.menu-list__link.active{
background: $red-color;
}
\ No newline at end of file
src/scss/product-slider/product-slider.scss
View file @ 1f870a04
......@@ -3,10 +3,21 @@
padding: 45px 0;
}
.product-slider__wrapper{
visibility: hidden;
opacity: 0;
height: 0;
width: 0;
position: relative;
}
.product-slider__wrapper.active{
display: flex;
align-items: center;
flex-direction: column;
position: relative;
visibility: visible;
opacity: 1;
height: auto;
width: 1170px;
}
.product-slider__content{
......@@ -24,6 +35,7 @@
width: 225px;
height: 225px;
position: relative;
cursor: pointer;
}
.product-slider__bg{
......@@ -34,6 +46,7 @@
top: 0;
left: 0;
margin-left: 25px;
transition: .2s;
}
.product-slider__model{
......@@ -50,4 +63,16 @@
bottom: 0;
left: 0;
max-width: 100%;
width: 276px;
transition: .2s;
}
.product-slider__item:hover{
.product-slider__bg{
background: $red-color;
transform: translateY(-10px);
}
.product-slider__img{
transform: translateY(-10px);
}
}
\ No newline at end of file
src/template/main-slider/index.html
View file @ 1f870a04
......@@ -3,7 +3,9 @@
<div class="slider__main swiper-container">
<div class="swiper-wrapper">
<div class="slider__main-item swiper-slide"><a href="#"><img src="img/slide.jpg"></a></div>
<div class="slider__main-item swiper-slide"><a href="#"><img src="img/slide.jpg"></a></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
\ No newline at end of file
src/template/menu-list-catalog/index.html 0 → 100644
View file @ 1f870a04
<div class="menu-list">
<div class="wrapper menu-list__wrapper">
<ul class="menu-list__list">
<li class="menu-list__item">
<a href="#" class="menu-list__link active">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
<li class="menu-list__item">
<a href="#" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
<li class="menu-list__item">
<a href="#" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
<li class="menu-list__item">
<a href="#" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
<li class="menu-list__item">
<a href="#" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
<li class="menu-list__item">
<a href="#" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
</ul>
</div>
</div>
\ No newline at end of file
src/template/menu-list-main/index.html
View file @ 1f870a04
<div class="menu-list">
<div class="wrapper menu-list__wrapper">
<ul class="menu-list__list">
<ul class="menu-list__list menu-list__mainpage">
<li class="menu-list__item">
<a href="#" class="menu-list__link">
<a href="#" class="menu-list__link active">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
......
src/template/product-slider/index.html
View file @ 1f870a04
<div class="product-slider">
<div class="wrapper product-slider__wrapper">
<div class="wrapper product-slider__wrapper active">
<h2 class="h2-line h2-about">Колесные мини-погрузчики</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
......@@ -46,4 +46,244 @@
</div>
</div>
</div>
<div class="wrapper product-slider__wrapper">
<h2 class="h2-line h2-about">Колесные мини-погрузчики2</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
</ul>
<div class="slider-nav slider-nav__next swiper-button-next">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
<div class="slider-nav slider-nav__prev swiper-button-prev">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
</div>
</div>
<div class="wrapper product-slider__wrapper">
<h2 class="h2-line h2-about">Колесные мини-погрузчики3</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
</ul>
<div class="slider-nav slider-nav__next swiper-button-next">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
<div class="slider-nav slider-nav__prev swiper-button-prev">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
</div>
</div>
<div class="wrapper product-slider__wrapper">
<h2 class="h2-line h2-about">Колесные мини-погрузчики4</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
</ul>
<div class="slider-nav slider-nav__next swiper-button-next">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
<div class="slider-nav slider-nav__prev swiper-button-prev">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
</div>
</div>
<div class="wrapper product-slider__wrapper">
<h2 class="h2-line h2-about">Колесные мини-погрузчики5</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
</ul>
<div class="slider-nav slider-nav__next swiper-button-next">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
<div class="slider-nav slider-nav__prev swiper-button-prev">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
</div>
</div>
<div class="wrapper product-slider__wrapper">
<h2 class="h2-line h2-about">Колесные мини-погрузчики6</h2>
<div class="product-slider__content swiper-container-product">
<ul class="product-slider__list swiper-wrapper" style="width: 1170px;">
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
<li class="product-slider__item swiper-slide">
<div class="product-slider__bg">
<p class="product-slider__model">Bobcat<br>S530</p>
</div>
<img class="product-slider__img" src="img/bobcat.png">
</li>
</ul>
<div class="slider-nav slider-nav__next swiper-button-next">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
<div class="slider-nav slider-nav__prev swiper-button-prev">
<svg class="nav__ico">
<use xlink:href="img/sprite-vector.svg#more"></use>
</svg>
</div>
</div>
</div>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment