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');
});
మీరు మెను బార్‌పై క్లిక్ చేసినప్పుడు వర్కింగ్ అవుట్‌పుట్ ఎలా ఉంటుందో ఇక్కడ ఉంది:
మెను టోగుల్ చేయదగినది, కాబట్టి బార్‌ని మళ్లీ క్లిక్ చేయండి లేదా పేజీ లోపల ఎక్కడైనా నావిగేషన్‌లను దాచిపెడుతుంది.
సంబంధిత: CSS నేపథ్య ప్రవణతతో శైలి వెబ్‌సైట్ అంశాలు
మీరు మీ వెబ్‌పేజీలో ఎక్కడైనా క్లిక్ చేసినప్పుడు కంటెంట్‌ను దాచడానికి మీ బ్రౌజర్ మద్దతు ఇవ్వకపోవచ్చు. మీరు ఈవెంట్ టార్గెట్ మరియు జావాస్క్రిప్ట్ లూప్ ఉపయోగించి దీన్ని బలవంతం చేయడానికి ప్రయత్నించవచ్చు. మీ జావాస్క్రిప్ట్‌కు కింది బ్లాక్‌ని జోడించడం ద్వారా మీరు దీన్ని చేయవచ్చు:
//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 మరియు జావాస్క్రిప్ట్‌లను ఉపయోగించి నావిగేషన్‌లను ప్రదర్శించడానికి ఈ కొత్త తరగతిని ఉపయోగించారు టోగుల్ కంటెంట్‌లు పద్ధతి
సంబంధిత: HTML, CSS మరియు జావాస్క్రిప్ట్‌లో న్యూమోర్ఫిక్ డిజైన్ ట్రెండ్‌లు
అయితే, మిగిలిన CSS మీ ప్రాధాన్యతపై ఆధారపడి ఉంటుంది. కానీ ఇక్కడ ఉదాహరణ CSS స్నిప్పెట్‌లో ఉన్నది మీ శైలిని ఎలా రూపొందించాలో మీకు ఒక ఆలోచన ఇవ్వాలి.
మీ వెబ్‌సైట్‌ను నిర్మించేటప్పుడు మరింత సృజనాత్మకతను పొందండి
దృష్టిని ఆకర్షించే వెబ్‌సైట్‌ని రూపొందించడానికి కొంత సృజనాత్మకత అవసరం. మరియు ఒక యూజర్ ఫ్రెండ్లీ వెబ్‌సైట్ మీ ప్రేక్షకులను ఒక బ్లాండ్ కంటే ఎక్కువగా మార్చే అవకాశం ఉంది.
కస్టమ్ నావిగేషన్ మెనూని ఇక్కడ ఎలా సృష్టించాలో మేము మీకు చూపించినప్పటికీ, మీరు దీన్ని దాటి వెళ్లి మరింత బలవంతం చేయవచ్చు. ఉదాహరణకు, మీరు నావిగేషన్‌ల ప్రదర్శనను యానిమేట్ చేయవచ్చు, వాటికి నేపథ్య రంగును అందించవచ్చు మరియు మరిన్ని చేయవచ్చు. మరియు మీరు ఏమి చేసినా, మీ వెబ్‌సైట్ వినియోగదారులు ఉపయోగించడానికి సులభమైన డిజైన్ పద్ధతులు మరియు లేఅవుట్‌లను ఉపయోగించుకునేలా చూసుకోండి.
షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ 15 Windows కమాండ్ ప్రాంప్ట్ (CMD) ఆదేశాలు మీరు తప్పక తెలుసుకోవాలికమాండ్ ప్రాంప్ట్ ఇప్పటికీ శక్తివంతమైన విండోస్ టూల్. ప్రతి విండోస్ యూజర్ తెలుసుకోవలసిన అత్యంత ఉపయోగకరమైన CMD ఆదేశాలు ఇక్కడ ఉన్నాయి.
తదుపరి చదవండి సంబంధిత అంశాలు- ప్రోగ్రామింగ్
- HTML
- CSS
- జావాస్క్రిప్ట్
- కోడింగ్ చిట్కాలు
ఇడోవు ఏదైనా స్మార్ట్ టెక్ మరియు ఉత్పాదకతపై మక్కువ చూపుతుంది. తన ఖాళీ సమయంలో, అతను కోడింగ్‌తో ఆడుతాడు మరియు అతను విసుగు చెందినప్పుడు చెస్‌బోర్డ్‌కి మారుతాడు, కానీ అతను ఒక్కోసారి రొటీన్ నుండి దూరంగా ఉండడాన్ని కూడా ఇష్టపడతాడు. ఆధునిక సాంకేతిక పరిజ్ఞానాన్ని ప్రజలకు చూపించాలనే అతని అభిరుచి అతన్ని మరింత రాయడానికి ప్రేరేపిస్తుంది.
ఇడోవు ఒమిసోలా నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి