Како направити мобилну траку менија са ХТМЛ -ом, ЦСС -ом и ЈаваСцрипт -ом

Без сумње, можете да креирате мобилни мени који можете да мењате користећи ЦСС оквире попут ТаилВинд или БоотСтрап.

Али који концепт стоји иза тога? И како можете да га направите од нуле без зависности од ових ЦСС оквира?

Ако сами радите горе наведено, добијате потпуну контролу прилагођавања. Дакле, без даљег одлагања, ево како да креирате мобилни мени са могућношћу пребацивања користећи жељени програмски језик.

Како да направите свој мобилни мени са могућношћу укључивања

Ако то већ нисте учинили, отворите фасциклу пројекта и креирајте датотеке пројекта (ХТМЛ, ЦСС и ЈаваСцрипт).

У наставку ћете видети примере кода који вам је потребан за све три врсте. А ако већ нисте, размислите о преузимању ове апликације за учење кода пре него што наставите са читањем.

Почећемо са ХТМЛ:

 Направите три дива који представљају траку падајућег менија са три реда 








 Овде додајте навигацију 


Кућа
О томе
Контакт

ЦСС:

/*Ово разграничење одељка служи само у сврху водича*/
одељак { 
ширина: 800пк;





instagram viewer


висина: 600пк;
маргин-топ: 50пк;
маргин-лефт: 250пк;
ивица: пуна црна 1пк;
позадина: #е6е3дц;
}
/*поставите дивс контејнер у свој ДОМ*/
#тоггле-цонтаинер {
приказ: мрежа;
ширина: фит-цонтент;
маргин-лефт: 720пк;
маргин-топ: 10пк;
}
/*Сложите три дива један изнад другог. Затим им поставите висину и ширину.*/
#један два три{
позадина: црна;
видтх: 30пк;
висина: 3пк;
маргин-топ: 5пк;
} 
.тоггле-цонтент {
приказ: нема;
маргин-лефт: 700пк;
маргин-топ: 20пк;
}
.тоггле-цонтент а {
дисплеј блок;
декорација текста: нема;
боја Црна;
фонт-сизе: 30пк;
}
.тоггле-цонтент а: ховер {
боја: плава;
}
/*Прикажите инстанцу класе коју је направио ЈаваСцрипт у блоку*/
.приказати{
дисплеј блок;
}

Додајте ЈаваСцрипт:

вар тогглер = доцумент.гетЕлементБиИд ("тоггле-цонтаинер");
вар тогглеЦонтентс = доцумент.гетЕлементБиИд ("тоггле-цонтент");
доцумент.аддЕвентЛистенер ("клик", функција () {
// Примените узорак класе на сваку навигацију и подесите приказ за пребацивање:
тогглеЦонтентс.цлассЛист.тоггле ("приказано");
});

Ево како изгледа радни излаз када кликнете на траку са менијима:

Мени се може укључити, па поновни клик на траку - или било где на страници - скрива навигацију.

Повезан: Стилите елементе веб локације са ЦСС градијентом позадине

Ваш прегледач можда не подржава скривање садржаја када кликнете било где на својој веб страници. Ово можете покушати да наметнете помоћу циља догађаја и ЈаваСцрипт петље. То можете учинити додавањем следећег блока кода у свој ЈаваСцрипт:

// Додајте догађај клика на своју веб страницу:
виндов.онцлицк = фунцтион (евент) {
// Циљајте догађај клика на траци менија да бисте омогућили телу веб странице да га прати:
иф (! евент.таргет.матцхес ('#тоггле-цонтаинер')) {
вар дропдовннс = доцумент.гетЕлементсБиЦлассНаме ("тоггле-цонтент");
// Сакријте навигације понављањем кроз сваку од њих:
за (вар и = 0; и вар дроп = падајући мени [и];
иф (дроп.цлассЛист.цонтаинс ('дисплаи')) {
дроп.цлассЛист.ремове ('дисплаи');
}
}
}
}

Дакле, ево резимеа онога што сте управо урадили: Направили сте три линије користећи див ХТМЛ ознака. Подесили сте њихову висину и ширину и поставили их у свој ДОМ. Затим сте овим догађајима кликнули користећи ЈаваСцрипт.

Повезан: Како направити веб страницу: За почетнике

Почетни приказ навигације сте подесили на ниједан да их сакријете када се страница учита. Затим кликните догађај у три линије пребацује ове навигације на основу класе са ЈаваСцриптом (приказати). Коначно, ову нову класу сте користили за приказ навигације помоћу ЦСС -а и ЈаваСцрипт -а тогглеЦонтентс метода.

Повезан: Неуморфни трендови дизајна у ХТМЛ -у, ЦСС -у и ЈаваСцрипт -у

Остатак ЦСС -а, међутим, зависи од ваших жеља. Али онај у примеру ЦСС фрагмента овде би вам требао дати идеју о томе како да свој стил стилизујете.

Будите креативнији при изградњи веб локације

Израда визуелно привлачне веб странице захтева одређену креативност. Вероватноћа да ће веб локација прилагођена корисницима претворити вашу публику него безначајна.

Иако смо вам овде показали како да креирате прилагођени мени за навигацију, ипак можете отићи даље од овога и учинити га привлачнијим. На пример, можете анимирати приказ навигација, дати им боју позадине и још много тога. И шта год да радите, уверите се да ваша веб локација користи најбоље праксе дизајна и распореде које ће корисници лако користити.

Како поново користити свој стари хардвер као професионалац

Да ли вам је много старе технологије затрпало дом? Сазнајте тачно шта да радите с тим у овом водичу за рециклирање технологије!

Прочитајте следеће

О аутору