Home-theater-designers
Walang alinlangan, makakagawa ka ng isang togglable na menu ng mobile gamit ang mga framework ng CSS tulad ng TailWind o BootStrap.
Ngunit ano ang konsepto sa likod nito? At paano mo makagagawa ang isa mula sa simula nang hindi nakasalalay sa mga balangkas na CSS?
Ang paggawa sa itaas sa iyong sarili ay nagbibigay sa iyo ng buong kontrol sa pagpapasadya. Kaya, nang walang pag-ado, narito kung paano lumikha ng isang togglable na menu ng mobile gamit ang iyong ginustong programa sa wika.
Paano Lumikha ng Iyong Togglable Mobile Menu
Kung hindi mo pa nagagawa ito, buksan ang iyong folder ng proyekto at likhain ang iyong mga file ng proyekto (HTML, CSS, at JavaScript).
Sa ibaba, makikita mo ang mga halimbawa ng code na kailangan mo para sa lahat ng tatlong uri. At kung hindi mo pa nagagawa, isaalang-alang ang pag-download ang mga app na ito upang malaman ang code bago basahin sa.
Magsisimula tayo sa HTML:
Mobile Navigation Menu
Home
About
Contact
CSS:
/*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;
}
Magdagdag ng JavaScript:
ano ang isang imei number sa iphone
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');
});
Narito kung paano ang hitsura ng isang gumaganang output kapag nag-click ka sa menu bar:
Ang menu ay maaaring i-toggl, kaya't ang pag-click muli sa bar — o kahit saan sa loob ng pahina — ay itinatago ang mga pag-navigate.
Kaugnay: Mga Elemento ng Estilo ng Website Na May Gradient sa Background ng CSS
Maaaring hindi suportahan ng iyong browser ang pagtatago ng nilalaman kapag nag-click ka kahit saan sa loob ng iyong webpage. Maaari mong subukang pilitin ito sa pamamagitan ng paggamit ng isang target ng kaganapan at loop ng JavaScript. Maaari mong gawin iyon sa pamamagitan ng pagdaragdag ng sumusunod na bloke ng code sa iyong JavaScript:
//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');
}
}
}
}
Kaya narito ang isang buod ng kung ano mo lamang ginawa: Lumikha ka ng tatlong mga linya gamit ang div tag ng HTML. Inayos mo ang kanilang taas at lapad at iposisyon ang iyong DOM. Pagkatapos ay binigyan mo ito ng isang kaganapan sa pag-click gamit ang JavaScript.
Kaugnay: Paano Gumawa ng isang Website: Para sa Mga Nagsisimula
Itinakda mo ang paunang pagpapakita ng iyong mga pag-navigate sa wala upang maitago ang mga ito kapag naglo-load ang pahina. Pagkatapos ang mag-click Ang kaganapan sa tatlong mga linya ay nag-toggle ng mga nabigasyon na ito batay sa isang instantadong klase ng JavaScript ( ipinakita ). Panghuli, ginamit mo ang bagong klase na ito upang ipakita ang mga nabigasyon gamit ang CSS, at ng JavaScript toggleMga Nilalaman paraan
Kaugnay: Mga Trend ng Disenyo ng Neumorphic sa HTML, CSS, at JavaScript
Ang natitirang CSS, gayunpaman, ay nakasalalay sa iyong kagustuhan. Ngunit ang isa sa halimbawang CSS snippet dito ay dapat magbigay sa iyo ng isang ideya kung paano i-istilo ang iyo.
Maging Mas Malikhain Kapag Binubuo ang Iyong Website
Ang paggawa ng isang kaakit-akit na biswal na website ay nangangailangan ng ilang pagkamalikhain. At ang isang website na madaling gamitin ay mas malamang na i-convert ang iyong madla kaysa sa isang malabo.
Bagaman ipinakita namin sa iyo kung paano lumikha ng isang pasadyang menu sa pag-navigate dito, maaari mo pa ring lampasan ito at gawin itong mas nakakahimok. Halimbawa, maaari mong buhayin ang pagpapakita ng mga nabigasyon, bigyan sila ng isang kulay sa background, at higit pa. At anuman ang gawin mo, tiyaking gumagamit ang iyong website ng pinakamahusay na mga kasanayan sa disenyo at mga layout na madaling magamit ng mga gumagamit.
Magbahagi Magbahagi Mag-tweet Email 15 Mga Utos ng Windows Command Prompt (CMD) na Dapat Mong MalamanAng command prompt ay isang malakas pa ring tool sa Windows. Narito ang pinaka kapaki-pakinabang na utos ng CMD na kailangang malaman ng bawat gumagamit ng Windows.
Basahin Susunod Mga Kaugnay na Paksa- Programming
- HTML
- CSS
- JavaScript
- Mga Tip sa Coding
Si Idowu ay madamdamin tungkol sa anumang matalinong tech at pagiging produktibo. Sa kanyang libreng oras, naglalaro siya kasama ang pag-coding at paglipat sa chessboard kapag siya ay naiinip, ngunit gusto din niya ang paghihiwalay mula sa nakagawiang gawain sa isang sandali. Ang kanyang hilig sa pagpapakita sa mga tao ng paraan sa paligid ng modernong tech ay nag-uudyok sa kanya na magsulat pa.
Higit Pa Mula sa Idowu OmisolaMag-subscribe sa aming newsletter
Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!
Mag-click dito upang mag-subscribe