4 Ваис то Цреате Авесоме ЦСС-Онли Аццордионс
Садржај хармоника чини корисни дизајн узорак. Можете их користити за много различитих ствари: за меније, листе, слике, одломке чланака, исјечке текста, па чак и за видеозаписе
Већина хармоника се ослања на то ЈаваСцрипт, главно на јКуери, али пошто је употреба напредних ЦСС3 техника постала широко распрострањена, можемо наћи и лепе примере користе само ХТМЛ и ЦСС, које их чине приступачним у окружењима са онемогућеним ЈаваСцриптом.
Креирање хармонике само за ЦСС може бити тежак задатак, тако да ћемо у овом посту покушати разумију главне концепте које програмери користе када је потребно да креирају један.
У креирању ЦСС само табова обично постоје два главна приступа, сваки од њих има два случаја честе употребе. Први приступ користи скривени елементи форме, док се друга користи ЦСС псеудо-селектори.
1. Метод радио дугмета
Метод радио дугмета додаје скривени радио улаз и одговарајућу ознаку етикете на сваку картицу хармонике. Логика је једноставна: када корисник изабере картицу, они у основи провјеравају радио дугме које припада тој картици, на исти начин када попуњавају образац. Када кликну на следећи табулатор на хармоници, они бирају следећи радио дугме, итд.
У овој методи, само један таб може бити отворен истовремено. Логика ХТМЛ изгледа овако:
Наслов садржаја (овде не користите ознаку х1)
Неки садржај ...
п>
Морате да додајте посебан пар радио-ознака за сваку картицу у хармоници. Сам ХТМЛ неће дати жељено понашање, морате додати и одговарајућа ЦСС правила, да видимо како то можете постићи.
Фикед Хеигхт Вертицал Табс
У овом решењу (погледајте слику испод), програмер је сакрио радио дугме уз помоћ дисплаи: ноне; правило, онда је дао релативну позицију ознаке етикете која садржи наслов сваког таба, и апсолутни положај у односу на одговарајући лабел: афтер псеудо-елемент.
Она држи ручку означену зеленим знаком + који отвара картице. Затворени језичци такође користе ручку означену зеленом бојом “-” знакови. У ЦСС-у су затворене картице изабране уз помоћ елемента + елемент селектор.
Такође морате да дате садржај отворене картице фиксној висини. Да бисте то урадили, изаберите тело отворене картице (означено табулатором садржаја у ХТМЛ-у горе) уз помоћ елемента елемент1 ~ елемент2 ЦСС селектора.
Основна логика ЦСС-а је следећа:
инпут [типе = радио] дисплаи: ноне; лабел поситион: релативе; дисплеј блок; лабел: афтер цонтент: "+"; позиција: апсолутна; десно: 1ем; инпут: цхецкед + лабел: после цонтент: "-"; инпут: цхецкед ~ .таб-цонтент висина: 150пк;
Потпуни ЦСС можете погледати овде на Цодепен-у. ЦСС је оригинално писан у Сасс-у, али ако кликнете на “Виев Цомпилед” можете погледати компајлирану ЦСС датотеку.
Слика хармоника са радио дугмићима
Ова лепа хармоника користи исту методу радио дугмета, али уместо етикета, девелопер овде је користио ХТМЛ таг ознаке да би се постигло понашање хармоника.
ЦСС је нешто другачији, углавном зато што у овом случају картице нису постављене вертикално већ хоризонтално. Програмер је користио ЦСС селектор елемента елемента (који је коришћен у претходном случају да би изабрао прекидаче) да би се осигурало да ивице покривених слика и даље остају видљиве..
Прочитајте детаљно упутство о томе како да направите ову елегантну хармонику ЦСС-а.
2. Метод Цхецкбок
Метод потврдног оквира користи тип улаза за потврдни оквир уместо радио дугмета. Када корисник изабере картицу, они у основи проверавају одговарајући квадратић.
Разлика у односу на методу радио дугмета је у томе што је могуће је отворити више од једне картице истовремено, баш као што је могуће провјерити више од једног оквира за избор унутар обрасца.
С друге стране, картице се не затварају саме када корисник кликне на други. Логика ХТМЛ-а је иста као и раније, само у овом случају морате користити цхецкбок за тип улаза.
Наслов садржаја (овде не користите ознаку х1)
Неки садржај ...
п>
Фикед Хеигхт Цхецкбок Аццордион
Ако желите табове са фиксном висином садржаја, логика ЦСС-а је скоро иста као у случају радио дугмета, само је тип улаза промењен са радио на цхецкбок. У овом Цодепен пену можете погледати код.
Контролна кутија за висину течности Аццордион
Када је више од једног језичка отворено истовремено, приказивање фиксних плочица висине може негативно да утиче на корисничко искуство, јер висина хармонике може значајно да расте. Ово се може побољшати ако ви променити фиксну висину на висину флуида; то значи да се висина отворених картица проширује или смањује у складу са величином садржаја који држе.
Да бисте то урадили морате модификујте фиксну висину садржаја табулатора на мак-хеигхт, и користити релативне јединице:
инпут: цхецкед ~ .таб-цонтент мак-хеигхт: 50ем;
Ако желите боље разумјети како ова метода функционира, можете погледати овај Цодепен.
3. Метода: таргет
: таргет је један од псеудо-селектора ЦСС3. Помоћу ње можете повезати ХТМЛ елемент са сидреном ознаком на следећи начин:
Титле оф тхе Таб
Садржај табулатора
Када корисник кликне на наслов картице, цео одељак ће се отворити захваљујући : таргет псеудо-селектор, а УРЛ ће такође бити промењен у следећи формат: ввв.соме-урл.цом/#таб-1.
Картица отворена може се стилизовати у ЦСС-у уз помоћ сецтион: таргет … правило. Имамо одличан туторијал о хонгкиату о томе како можете да направите лепе хармонике са ЦСС-ом : таргет метода у вертикалном и хоризонталном распореду.
Главни недостатак : таргет метода је то мења УРЛ када корисник кликне на картице. Ово утиче на историју прегледача и дугме за повратак претраживача неће одвести корисника на претходну страницу, већ у претходно стање хармоника.
4. Метод: ховер
Овај последњи недостатак се може превазићи ако се користи :лебдети ЦСС псеудо-селектор уместо : таргет, али у овом случају картице неће реаговати на клик већ на догађај који лебди. Трик овде је да ти треба или сакрити непокривене елементе, или смањите њихову ширину или висину - зависно од изгледа картица
Елемент који лебди мора бити видљив, или постављен на пуну ширину / висину како би хармоника деловала.
Следеће 3 хармонике само за ЦСС направљене су методом: ховер, кликните на линкове испод снимака екрана да бисте погледали код.
Хоризонтална слика хармоника
Скевед Аццордион
Хордо активирана хармоника са подразумеваним стањем
