Направите клизни мени

Одличан начин за побољшање корисничко искуство на вашој веб локацији треба додати клизни мени; то ствара привлачан начин за кориснике да пронађу оно што желе - ма где се налазили на страници - и значи да не морају да се враћају до врха нав.

Посебно волимо клизни мени на веб локацији за Козметика за сладолед , дизајнирао Хирока Хасегава ; читајте даље да бисте сазнали како да поновите овај ефекат на својој веб локацији.

01. Покретање документа

Први корак је дефинисање документа странице. Састоји се од ХТМЛ контејнера који представља веб страницу и који садржи одељак главе и тела. Иако се одељак главе користи за учитавање спољних ЦСС и ЈаваСцрипт ресурса, одељак тела се користи за чување видљивог садржаја странице створеног у кораку # 2.



Slide Out Menu *** STEP 2 HERE

02. Садржај странице

Садржај странице састоји се од наслова наслова, заједно са контејнером за навигацију. Ова навигација чува низ веза и додељен јој је атрибут „дата-ацтион“. Управо ће тај атрибут ЈаваСцрипт и ЦСС користити за примену стила и функционалности на контејнер и његове елементе.

Slide Out Menu

☰ Page 1 Page 2 Page 3

03. ЦСС иницијација

ХТМЛ је сада завршен, па креирајте нову датотеку која се зове 'стилес.цсс' да бисте започели форматирање презентације. Овај корак поставља ХТМЛ документ и његово тело тако да немају видљиви размак ивица, заједно са црном позадином. Боја је постављена на белу као подразумевану боју за наслеђивање текста садржаја.

html, body{ display: block; width: 100%; height: 100%; background: #000; color: #fff; }

04. Подешавање навигације

Навигација треба да се приказује са фиксним позиционирањем и са з-индексом изнад свега, тако да се чини да покрива читав екран, без обзира на то где је корисник скроловао. Првобитно је позициониран ван видног поља на левој страни видљивог прозора екрана. Правило преласка примењује се за анимирање било којих промена током једне секунде.

nav{ display: block; position: fixed; box-sizing: border-box; top: 0; left: -100vw; z-index: 9999; padding: .5em 1em .5em 1em;; width: 100vw; height: 100vh; text-align: center; background: red; transition: all 1s; }

05. Нав отворен и икона

Леви положај навигације постављен је на нулу када је примењена „отворена“ класа, покрећући анимирани прелаз дефинисан у претходном кораку. Прво дете навигације је икона за проширивање која користи фиксно позиционирање како би увек остала видљива у средини леве стране екрана.



nav.open{ left: 0; } nav *:first-child{ position: fixed; padding: 1em; cursor: pointer; left: 0; top: 50vh; clear: both; }

Свака сидрена веза унутар контејнера за навигацију постављена је на четири пута већу величину од подразумеваног текста. Њихова боја је постављена на црну, са маргином на врху која осигурава видљивост вертикалног размака. Ако се њихов приказ постави као „блок“, чини се да се свака веза аутоматски поставља вертикално.

nav a{ display: block; font-size: 4em; color: #000; font-family: arial; text-decoration: none; margin-top: .2em; }

07. ЈаваСцрипт слушалац

Направите нову датотеку под називом 'цоде.јс'. Овај корак чека док се страница не учита, након чега тражи прво подређено место свих навигација са атрибутом „дата-ацтион“ који је постављен на „проширивање“. Ово прво дете, као икона отвореног, има примењен преслушавач догађаја „клик“, на који пребацује елемент да примени или не примени „отворену“ класу.

window.addEventListener('load',function(){ var nodes = document.querySelectorAll('nav[data-action='expand'] *:first-child'); for(var i=0; i

Овај чланак је првобитно објављен у броју 274 креативног часописа за веб дизајн Веб Десигнер. Купите издање 274 овде или претплатите се на Веб Десигнер овде .

Повезани чланци: