Home-theater-designers
சந்தேகத்திற்கு இடமின்றி, TailWind அல்லது BootStrap போன்ற CSS கட்டமைப்புகளைப் பயன்படுத்தி நீங்கள் மாற்றக்கூடிய மொபைல் மெனுவை உருவாக்கலாம்.
ஆனால் அதன் பின்னணியில் உள்ள கருத்து என்ன? இந்த CSS கட்டமைப்பைப் பொறுத்து இல்லாமல் எப்படி புதிதாக ஒன்றை உருவாக்க முடியும்?
மேற்கூறியவற்றை நீங்களே செய்வது உங்களுக்கு முழு தனிப்பயனாக்கக் கட்டுப்பாட்டைக் கொடுக்கும். எனவே, மேலும் கவலைப்படாமல், உங்களுக்கு விருப்பமான நிரலாக்க மொழியைப் பயன்படுத்தி மாற்றக்கூடிய மொபைல் மெனுவை எவ்வாறு உருவாக்குவது என்பது இங்கே.
உங்கள் ஒட்டக்கூடிய மொபைல் மெனுவை எப்படி உருவாக்குவது
நீங்கள் ஏற்கனவே செய்யவில்லை என்றால், உங்கள் திட்டக் கோப்புறையைத் திறந்து உங்கள் திட்டக் கோப்புகளை உருவாக்கவும் (HTML, CSS மற்றும் JavaScript).
கீழே, மூன்று வகைகளுக்கும் உங்களுக்குத் தேவையான குறியீட்டின் உதாரணங்களைக் காண்பீர்கள். நீங்கள் ஏற்கனவே இல்லையென்றால், பதிவிறக்குவதைக் கவனியுங்கள் குறியீட்டை அறிய இந்த பயன்பாடுகள் படிப்பதற்கு முன்.
உடன் தொடங்குவோம் 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;
}
ஜாவாஸ்கிரிப்டைச் சேர்க்கவும்:
மேக்கில் ஒரு கோப்பை சிறியதாக்குவது எப்படி
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');
}
}
}
}
எனவே நீங்கள் என்ன செய்தீர்கள் என்பதன் சுருக்கம் இங்கே: நீங்கள் மூன்று வரிகளை பயன்படுத்தி உருவாக்கியுள்ளீர்கள் div HTML குறிச்சொல். நீங்கள் அவர்களின் உயரம் மற்றும் அகலத்தை சரிசெய்து அவற்றை உங்கள் DOM இல் நிலைநிறுத்தினீர்கள். பின்னர் நீங்கள் ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஒரு கிளிக் நிகழ்வைக் கொடுத்தீர்கள்.
தொடர்புடையது: ஒரு வலைத்தளத்தை உருவாக்குவது எப்படி: ஆரம்பநிலைக்கு
உங்கள் வழிசெலுத்தல்களின் ஆரம்ப காட்சியை நீங்கள் அமைத்துள்ளீர்கள் இல்லை பக்கம் ஏற்றும்போது அவற்றை மறைக்க. பின்னர் தி கிளிக் செய்யவும் மூன்று வரிகளில் உள்ள நிகழ்வு ஜாவாஸ்கிரிப்ட் உடனடி வகுப்பின் அடிப்படையில் இந்த வழிசெலுத்தல்களை மாற்றுகிறது ( காட்டப்படும் ) இறுதியாக, CSS மற்றும் JavaScript ஐப் பயன்படுத்தி வழிசெலுத்தல்களைக் காண்பிக்க இந்தப் புதிய வகுப்பைப் பயன்படுத்தினீர்கள் உள்ளடக்கங்களை மாற்று முறை
தொடர்புடையது: HTML, CSS மற்றும் JavaScript இல் நியூமார்பிக் வடிவமைப்பு போக்குகள்
மீதமுள்ள CSS, உங்கள் விருப்பத்தைப் பொறுத்தது. ஆனால் இங்கே உதாரணம் சிஎஸ்எஸ் துணுக்கில் உங்களுக்கு எப்படி உங்கள் ஸ்டைலை எப்படி செய்வது என்று யோசனை கொடுக்க வேண்டும்.
உங்கள் வலைத்தளத்தை உருவாக்கும்போது அதிக ஆக்கப்பூர்வமாக இருங்கள்
பார்வையைக் கவரும் வலைத்தளத்தை உருவாக்க சில படைப்பாற்றல் தேவை. ஒரு பயனர் நட்பு வலைத்தளம் உங்கள் பார்வையாளர்களை ஒரு சாதுவான இணையதளத்தை விட மாற்றும்.
தனிப்பயன் வழிசெலுத்தல் மெனுவை இங்கே எப்படி உருவாக்குவது என்பதை நாங்கள் உங்களுக்குக் காட்டினாலும், நீங்கள் இதைத் தாண்டி மேலும் கட்டாயப்படுத்தலாம். உதாரணமாக, நீங்கள் வழிசெலுத்தல்களின் காட்சியை உயிரூட்டலாம், அவர்களுக்கு பின்னணி வண்ணம் மற்றும் பலவற்றை வழங்கலாம். நீங்கள் எதைச் செய்தாலும், உங்கள் வலைத்தளம் பயனர்களுக்கு எளிதாகப் பயன்படுத்தக்கூடிய சிறந்த வடிவமைப்பு நடைமுறைகளையும் அமைப்புகளையும் பயன்படுத்துவதை உறுதிசெய்க.
பகிர் பகிர் ட்வீட் மின்னஞ்சல் 15 விண்டோஸ் கட்டளை வரியில் (சிஎம்டி) நீங்கள் கட்டாயம் தெரிந்து கொள்ள வேண்டிய கட்டளைகள்கட்டளை வரியில் இன்னும் சக்திவாய்ந்த விண்டோஸ் கருவி. ஒவ்வொரு விண்டோஸ் பயனரும் தெரிந்து கொள்ள வேண்டிய மிகவும் பயனுள்ள சிஎம்டி கட்டளைகள் இங்கே.
அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்- நிரலாக்க
- HTML
- CSS
- ஜாவாஸ்கிரிப்ட்
- குறியீட்டு குறிப்புகள்
இடோவு ஸ்மார்ட் தொழில்நுட்பம் மற்றும் உற்பத்தித்திறன் ஆகியவற்றில் ஆர்வம் கொண்டவர். அவரது ஓய்வு நேரத்தில், அவர் சலிப்படையும்போது குறியீட்டுடன் விளையாடுகிறார் மற்றும் சதுரங்கப் பலகைக்கு மாறுகிறார், ஆனால் அவர் எப்போதாவது வழக்கத்திலிருந்து விலகிச் செல்ல விரும்புகிறார். நவீன தொழில் நுட்பத்தை மக்களுக்கு காட்டும் ஆர்வம் அவரை மேலும் எழுத தூண்டுகிறது.
இடோவு ஒமிசோலாவில் இருந்து மேலும்எங்கள் செய்திமடலுக்கு குழுசேரவும்
தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!
குழுசேர இங்கே சொடுக்கவும்