Home-theater-designers
Без сумње, можете да креирате мобилни мени који можете да мењате користећи ЦСС оквире попут ТаилВинд или БоотСтрап.
Али који концепт стоји иза тога? И како можете да га направите од нуле без зависности од ових ЦСС оквира?
Ако сами радите горе наведено, добијате потпуну контролу прилагођавања. Дакле, без даљег одлагања, ево како да креирате мобилни мени са могућношћу укључивања помоћу жељеног програмског језика.
Како да направите свој мобилни мени са могућношћу укључивања
Ако то већ нисте учинили, отворите фасциклу пројекта и креирајте датотеке пројекта (ХТМЛ, ЦСС и ЈаваСцрипт).
У наставку ћете видети примере кода који вам је потребан за све три врсте. А ако већ нисте, размислите о преузимању ове апликације за учење кода пре него што наставите са читањем.
Почећемо са ХТМЛ:
Mobile Navigation Menu
Home
About
Contact
ЦСС:
/*This section demarcation is solely for the purpose of the tutorial*/
section{
width: 800px;
height: 600px;
margin-top: 50px;
margin-left: 250px;
border: solid black 1px;
background: #e6e3dc;
}
/*position the divs container in your DOM*/
#toggle-container{
display: grid;
width: fit-content;
margin-left: 720px;
margin-top: 10px;
}
/*Stack the three divs above each other. Then set a height and width for them.*/
#one, #two, #three{
background: black;
width: 30px;
height: 3px;
margin-top: 5px;
}
.toggle-content{
display: none;
margin-left: 700px;
margin-top: 20px;
}
.toggle-content a{
display: block;
text-decoration: none;
color: black;
font-size: 30px;
}
.toggle-content a:hover{
color: blue;
}
/*Display the class instance created by JavaScript in block*/
.displayed{
display: block;
}
Додајте ЈаваСцрипт:
простор на диску 100 одсто Виндовс 10
var toggler = document.getElementById('toggle-container');
var toggleContents = document.getElementById('toggle-content');
document.addEventListener('click', function(){
//Apply a class intance to each navigation and set display to toggle:
toggleContents.classList.toggle('displayed');
});
Ево како изгледа радни излаз када кликнете на траку са менијима:
Мени се може мењати, па поновним кликом на траку - или било где на страници - скривате навигацију.
Повезан: Стилите елементе веб локације са ЦСС градијентом позадине
Ваш прегледач можда не подржава скривање садржаја када кликнете било где на својој веб страници. Ово можете покушати да примените помоћу циља догађаја и ЈаваСцрипт петље. То можете учинити додавањем следећег блока кода у свој ЈаваСцрипт:
//Add a click event to your webpage:
window.onclick = function(event) {
//Target the click event on the menu bar to allow the webpage body to track it:
if (!event.target.matches('#toggle-container')) {
var dropdowns = document.getElementsByClassName('toggle-content');
//Hide the navigations by looping through each of them:
for (var i = 0; i var dropped = dropdowns[i];
if (dropped.classList.contains('display')) {
dropped.classList.remove('display');
}
}
}
}
Дакле, ево резимеа онога што сте управо урадили: Направили сте три линије користећи див ХТМЛ ознака. Подесили сте њихову висину и ширину и поставили их у свој ДОМ. Затим сте овим догађајима кликнули помоћу ЈаваСцрипт -а.
Повезан: Како направити веб страницу: За почетнике
Почетни приказ навигације сте подесили на ниједан да их сакријете када се страница учита. Затим кликните догађај у три линије пребацује ове навигације на основу класе која је покренута ЈаваСцриптом ( приказати ). Коначно, ову нову класу сте користили за приказ навигације помоћу ЦСС -а и ЈаваСцрипт -а тогглеЦонтентс метода.
Повезано: Неуморфни трендови дизајна у ХТМЛ -у, ЦСС -у и ЈаваСцрипт -у
Остатак ЦСС -а, међутим, зависи од ваших жеља. Али онај у примеру ЦСС исечка овде би вам требао дати идеју о томе како да свој стил стилизујете.
Будите креативнији при изградњи веб локације
Израда визуелно привлачне веб странице захтева одређену креативност. Вероватноћа да ће веб локација прилагођена корисницима претворити вашу публику него безначајна.
Иако смо вам овде показали како да креирате прилагођени мени за навигацију, ипак можете отићи даље од тога и учинити га привлачнијим. На пример, можете анимирати приказ навигација, дати им боју позадине и још много тога. И шта год да радите, уверите се да ваша веб локација користи најбоље праксе дизајна и распореде које ће корисници лако користити.
Објави Објави Твеет Емаил 15 Команде Виндовс командне линије (ЦМД) које морате знатиКомандна линија је и даље моћан алат за Виндовс. Ево најкориснијих ЦМД команди које сваки Виндовс корисник треба да зна.
Прочитајте следеће Повезане теме- Програмирање
- ХТМЛ
- ЦСС
- ЈаваСцрипт
- Савети за кодирање
Идову је страствен у било чему паметном технологији и продуктивности. У слободно време игра се кодирањем и прелази на шаховску таблу кад му је досадно, али такође воли да се повремено одваја од рутине. Његова страст да људима покаже пут око савремене технологије мотивише га да пише више.
Више од Идову ОмисолаПретплатите се на наш билтен
Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!
Кликните овде да бисте се претплатили