Форум Сайтостроение Веб-строительство

Такое можно собрать? Каруселька "вкладок"

toxic steel
На сайте с 28.12.2007
Offline
175
toxic steel
876

Собственно вопрос, дизайнер красоту навёл, но я чот пока не понимаю, оно вообще верстабельно в таком виде или нет.

По сути - аналог карусельки со ссылками (или вкладками, как удобней), где по центру - текущая выбранная вкладка, по бокам - соседи, уходящие в тенюшку, но за хвостик можно зацепить и добраться до ссылки.

png 177049.png
png 177050.png
Есть отличные, недорогие рекламные места на агрофоруме (http://farmerforum.ru/viewtopic.php?t=1725)! Клуб истинных ценителей денег (http://coinshunter.ru/).
M
На сайте с 04.10.2011
Offline
90
mmkulikov
#1

toxic steel, вполне верстабельно. Что-то типа shadow или грубо с полупрозрачным фоном див... наложить. Да и с after before тоже можно поизголяться... Правда с "нюансом". Вытягивать будет не за "хвостик", а скорее всё будет кликабельно... Но визуально так сделать можно

Сдается, обращаться скайп avdesk-it-kmm Верстка, кодинг - контакты в профиле... VPS от 5€ (https://gmhost.com.ua/?partner=10255)
toxic steel
На сайте с 28.12.2007
Offline
175
toxic steel
#2

Тенюшки - это как раз меньшая проблема, я про само позиционирование "карусельки"... Но я кагбэ не настоящий сварщик, поэтому меня эта конструкция пока чо-то пугает

AN
На сайте с 14.02.2018
Offline
43
AlexNox
#3
toxic steel:
оно вообще верстабельно в таком виде или нет..

Делал такую штуку с помощью owl.carousel2. Свойство stagePadding.

Кто к нам за оптимизацией придет, тот оптимизацию и получит!
NothingMatters
На сайте с 12.06.2017
Offline
45
NothingMatters
#4

Slick slider (http://kenwheeler.github.io/slick/) из коробки умеет такую карусельку.

S
На сайте с 13.10.2014
Offline
171
silicoid
#5

А в чем проблема?

Всё это можно сделать вообще без каких-либо заморочек.

Обычная, достаточно простая верстка

toxic steel
На сайте с 28.12.2007
Offline
175
toxic steel
#6

silicoid, вы мне очень помогли, спасибо.

S
На сайте с 13.10.2014
Offline
171
silicoid
#7

toxic steel, Не за что, обращайтесь еще

С чисто технической точки, это делается Одним дивом, в который вложен список, который будет меню и два дива - ссылки тудой сюдой

Список я бы сделал при помощи display:flex; чтоб не заморачиваться с математикой.

если нужна абсолютноая совместимость со старьем, делайте через table/table-cell

Кнопки тудой/сюдой выполняют роль градиентного ухода (colorzilla вам в помощь)

треугольник делается при помощи :after {transform:rotate(45deg);}

как сделать тень - объяснять не буду. и так понятно.

Самое сложное, красиво отпозиционировать менюху, относительно центра контейнера.

Тут без js никак. Придется тупо рассчитать размеры. (на написание такой бадьи уйдет часа 2-3)

Если хотите, чтобы эта штука еще и управляла какими-то элементами. добавьте дата-аттрибут и по нему включайте/выключайте нужный айдишник.

Реально, задача часа на 3-4 работы, под чаёк

вот вам маленький бонус

js лень писать 

  <body>

    	<div class="yellowMenu__wrapper">

        	<div class="yellowMenu__slide yellowMenu__slideLeft">

            	<svg xmlns="http://www.w3.org/2000/svg" width="100" height="30" viewBox="-44 0 100 30"><path fill="#FFF" d="M9 30h6L6 15l9-15H9L0 15z"/></svg>

            </div>

            <div class="yellowMenu__content">

                <ul class="yellowMenu__items">

                	<li class="yellowMenu__item"><a class="yellowMenu__link" data-traget="p1">Пункт 1</a></li>

                    <li class="yellowMenu__item"><a class="yellowMenu__link" data-traget="boss">Директору</a></li>

                    <li class="yellowMenu__item"><a class="yellowMenu__link" data-traget="accountant">Бухгалтеру</a></li>

                    <li class="yellowMenu__item"><a class="yellowMenu__link" data-traget="it-specialist">ИТ специалисту</a></li>

                    <li class="yellowMenu__item"><a class="yellowMenu__link" data-traget="someone">кому-то еще</a></li>

                </ul>

            </div>

            <div class="yellowMenu__slide yellowMenu__slideRight">

            	<svg xmlns="http://www.w3.org/2000/svg" width="100" height="30" viewBox="-44 0 100 30"><path fill="#FFF" d="M6 0H0l9 15-9 15h6l9-15z"/></svg>

            </div>

        </div>

        

        <div class="yellowMenuContent__wrapper">

        </div>

        

        

        

        <!-- styles -->

        <style>

			.yellowMenu__wrapper{

				display:block;

				position:relative;

				background-color:#FF9900;

				width:500px;

				box-shadow:0px 2px 2px RGBA(0,0,0,0.3);

			}

			.yellowMenu__wrapper:after{

				display:block;

				position:absolute;

				content:"";

				width:24px;

				height:24px;

				transform:rotate(45deg);

				bottom:-12px;

				left:calc(50% - 12px);

				background-color:#FF9900;

				box-shadow:2px 2px 2px RGBA(0,0,0,0.3);

			}

			

			

			.yellowMenu__slideLeft{

				display:flex;

				align-items:center;

				position:absolute;

				left:0;

				top:0;

				width:100px;

				height:100%;

				background-color:#F30;

				background: -moz-linear-gradient(left, rgba(255,153,0,1) 0%, rgba(255,153,0,0) 100%); /* FF3.6-15 */

				background: -webkit-linear-gradient(left, rgba(255,153,0,1) 0%,rgba(255,153,0,0) 100%); /* Chrome10-25,Safari5.1-6 */

				background: linear-gradient(to right, rgba(255,153,0,1) 0%,rgba(255,153,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */	

				z-index:2;

				cursor:pointer;			

			}



			.yellowMenu__slideRight{

				display:flex;

				align-items:center;

				position:absolute;

				right:0;

				top:0;

				width:100px;

				height:100%;

				background-color:#F30;

				background: -moz-linear-gradient(left, rgba(255,153,0,0) 0%, rgba(255,153,0,1) 100%); /* FF3.6-15 */

				background: -webkit-linear-gradient(left, rgba(255,153,0,0) 0%,rgba(255,153,0,1) 100%); /* Chrome10-25,Safari5.1-6 */

				background: linear-gradient(to right, rgba(255,153,0,0) 0%,rgba(255,153,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

				z-index:2;

				cursor:pointer;

			}

			

			

			.yellowMenu__content{

				display:block;

				position:relative;

				overflow:hidden;

				z-index:1;

			}



			.yellowMenu__items{

				display:flex;

				align-items:center;

				justify-content:center;

				white-space:nowrap;

				z-index:1;

			}



			

			.yellowMenu__item{

				display:block;

				position:relative;

				padding:10px 30px;

				font-size:16px;

				line-height:100%;

				font-family:Arial, Helvetica, sans-serif;

			}			

		</style>

  </body>
toxic steel
На сайте с 28.12.2007
Offline
175
toxic steel
#8
silicoid:
Придется тупо рассчитать размеры.

Собственно, вопрос был именно в этом. Конечно же, всё это должно (пере)позиционироваться при клике и управлять тем, на что указывает треугольник. При этом адаптивно адаптивиться под размер экрана. Т.е. вопрос вообще не в "картинке", а в том, как заставить это фунциклировать. Собрать картинку - это так себе задача 🍿

Но, в общем пока одновременно с AlexNox пришёл к ковырянию owl.carousel2

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий