कैसे
HowTo होममेनू
चिह्न बार मेनू आइकन अकॉर्डियन टैब लंबवत टैब टैब हेडर पूरा पेज टैब होवर टैब शीर्ष नेविगेशन उत्तरदायी टोपनाव प्रतीक के साथ नेवबार खोज मेनू खोज पट्टी फिक्स्ड साइडबार पेज नेविगेशन उत्तरदायी साइडबार फ़ुलस्क्रीन नेविगेशन ऑफ-कैनवास मेनू होवर सिडेनव बटन प्रतीक के साथ साइडबार क्षैतिज स्क्रॉल मेनू लंबवत मेनू निचला नेविगेशन रिस्पॉन्सिव बॉटम नेवी बॉटम बॉर्डर एनएवी लिंक्स सही संरेखित मेनू लिंक केंद्रित मेनू लिंक समान चौड़ाई वाले मेनू लिंक निश्चित मेनू स्क्रॉल पर स्लाइड डाउन बार स्क्रॉल पर नेवबार छुपाएं स्क्रॉल पर नेवबार सिकोड़ें चिपचिपा नवबार छवि पर नवबार होवर ड्रॉपडाउन ड्रॉपडाउन पर क्लिक करें कैस्केडिंग ड्रॉपडाउन टोपनाव में ड्रॉपडाउन सिडेनव में ड्रॉपडाउन उत्तर नवबार ड्रॉपडाउन सबनेविगेशन मेनू ऊपर की ओर जाना मेगा मेनू मोबाइल मेनू परदा मेनू संक्षिप्त साइडबार संक्षिप्त साइडपैनल पृष्ठ पर अंक लगाना ब्रेडक्रम्ब्स बटन समूह लंबवत बटन समूह स्टिकी सोशल बार गोली नेविगेशन उत्तरदायी हैडरइमेजिस
स्लाइड शो स्लाइड शो गैलरी मोडल छवियां प्रकाश बॉक्स उत्तरदायी छवि ग्रिड छवि ग्रिड टैब गैलरी छवि ओवरले फीका छवि ओवरले स्लाइड छवि ओवरले ज़ूम छवि ओवरले शीर्षक छवि ओवरले चिह्न छवि प्रभाव श्वेत और श्याम छवि छवि पाठ छवि पाठ ब्लॉक पारदर्शी छवि पाठ पूरे पृष्ठ की छवि छवि पर प्रपत्र हीरो छवि धुंधली पृष्ठभूमि छवि स्क्रॉल पर बीजी बदलें अगल-बगल की छवियां गोल चित्र अवतार छवियां उत्तरदायी छवियां केंद्र छवियां थंबनेल छवि के चारों ओर सीमा दल से मिले चिपचिपा छवि एक छवि पलटें एक छवि हिलाएं पोर्टफोलियो गैलरी फ़िल्टरिंग के साथ पोर्टफोलियो छवि ज़ूम छवि आवर्धक कांच छवि तुलना स्लाइडर फ़ेविकॉनबटन
अलर्ट बटन रूपरेखा बटन स्प्लिट बटन एनिमेटेड बटन लुप्त होती बटन छवि पर बटन सोशल मीडिया बटन और पढ़ें कम पढ़ें लोड हो रहा है बटन डाउनलोड बटन गोली बटन अधिसूचना बटन चिह्न बटन अगला/पिछला बटन Nav . में और बटन ब्लॉक बटन टेक्स्ट बटन गोल बटन शीर्ष बटन पर स्क्रॉल करेंफार्म
लॉगिन फॉर्म साइनअप फॉर्म चेकआउट फॉर्म संपर्क करें प्रपत्र सोशल लॉग इन फॉर्म रजिस्टर फॉर्म प्रतीक के साथ प्रपत्र समाचार पत्रिका स्टैक्ड फॉर्म उत्तरदायी प्रपत्र पॉपअप फॉर्म इनलाइन फॉर्म इनपुट फ़ील्ड साफ़ करें संख्या तीर छुपाएं टेक्स्ट को क्लिपबोर्ड पर कॉपी करें एनिमेटेड खोज खोज बटन फ़ुलस्क्रीन खोज नवबार में इनपुट फील्ड नवबार में लॉगिन फॉर्म कस्टम चेकबॉक्स/रेडियो कस्टम चयन गिल्ली टहनी चेकबॉक्स चेक करें कैप्स लॉक का पता लगाएं एंटर पर ट्रिगर बटन पासवर्ड सत्यापन पासवर्ड दृश्यता टॉगल करें एकाधिक चरण प्रपत्र स्वत: पूर्ण स्वत: पूर्ण बंद करें वर्तनी जांच बंद करें फ़ाइल अपलोड बटन खाली इनपुट सत्यापनफिल्टर
फ़िल्टर सूची फ़िल्टर तालिका फ़िल्टर तत्व ड्रॉपडाउन फ़िल्टर करें सूची क्रमबद्ध करें वर्तनी तालिकाटेबल
ज़ेबरा धारीदार तालिका सेंटर टेबल्स पूर्ण-चौड़ाई तालिका अगल-बगल टेबल्स उत्तरदायी टेबल्स तुलना तालिकाअधिक
फ़ुलस्क्रीन वीडियो मोडल बॉक्स मोडल हटाएं समय स्क्रॉल संकेतक प्रगति पट्टी कौशल बार रेंज स्लाइडर टूलटिप्स प्रदर्शन तत्व होवर पॉप अप खुलने और बंधनेवाला पंचांग एचटीएमएल शामिल है करने के लिए सूची लोडर स्टार रेटिंग यूजर रेटिंग ओवरले प्रभाव संपर्क चिप्स पत्ते फ़्लिप कार्ड प्रोफाइल कार्ड उत्पाद कार्ड अलर्ट पुकारें टिप्पणियाँ लेबल मंडलियां स्टाइल एचआर कूपन सूची समूह गोलियों के बिना सूची उत्तरदायी पाठ कटआउट टेक्स्ट चमकता हुआ पाठ निश्चित पाद लेख चिपचिपा तत्व समान ऊँचाई क्लियरफिक्स उत्तरदायी फ़्लोट्स काफ़ीहाउस फ़ुलस्क्रीन विंडो स्क्रॉल आरेखण चिकना स्क्रॉल ग्रेडियंट बीजी स्क्रॉल स्टिकी हैडर स्क्रॉल पर हैडर सिकोड़ें मूल्य निर्धारण तालिका लंबन आस्पेक्ट अनुपात उत्तरदायी इफ्रेम्स पसंद/नापसंद टॉगल करें टॉगल छुपाएं/दिखाएं डार्क मोड टॉगल करें टेक्स्ट टॉगल करें टॉगल क्लास कक्षा जोड़ें कक्षा हटाएं सक्रिय वर्ग ट्री व्यू संपत्ति निकालें ऑफलाइन डिटेक्शन छिपे हुए तत्व का पता लगाएं वेबपेज पुनर्निर्देशित करें ज़ूम होवर फ्लिप बॉक्स केंद्र लंबवत डीआईवी में केंद्र बटन होवर पर संक्रमण तीर आकार डाउनलोड लिंक पूर्ण ऊंचाई तत्व ब्राउज़र विंडो कस्टम स्क्रॉलबार स्क्रॉलबार छुपाएं स्क्रॉलबार दिखाएं/बल दें डिवाइस लुक सामग्री संपादन योग्य सीमा प्लेसहोल्डर रंग पाठ चयन रंग बुलेट रंग ऊर्ध्वाधर रेखा परकार चेतन प्रतीक काउंटडाउन टाइमर टाइपराइटर जल्द आ रहा है पेज चैट संदेश पॉपअप चैट विंडो विभाजित स्क्रीन प्रशंसापत्र अनुभाग काउंटर उद्धरण स्लाइड शो बंद करने योग्य सूची आइटम विशिष्ट डिवाइस ब्रेकप्वाइंट खींचने योग्य HTML तत्व जेएस मीडिया प्रश्न सिंटैक्स हाइलाइटर जे एस एनिमेशन जे एस स्ट्रिंग लंबाई जेएस घातांक जेएस डिफ़ॉल्ट पैरामीटर्स वर्तमान URL प्राप्त करें वर्तमान स्क्रीन आकार प्राप्त करें इफ्रेम तत्व प्राप्त करेंवेबसाइट
एक मुफ्त वेबसाइट बनाएं वेबसाइट बनाएं एक स्टेटिक वेबसाइट बनाएं एक वेबसाइट बनाएं (W3.CSS) एक वेबसाइट बनाएं (BS3) एक वेबसाइट बनाएं (बीएस 4) एक वेबसाइट बनाएं (BS5) वेबसाइट बनाएं और देखें एक लिंक ट्री वेबसाइट बनाएं एक पोर्टफोलियो बनाएं एक रिज्यूमे बनाएं एक रेस्तरां वेबसाइट बनाएं एक व्यवसाय वेबसाइट बनाएं एक वेबबुक बनाएं केंद्र वेबसाइट संपर्क अनुभाग पेज के बारे में बड़ा हैडर उदाहरण वेबसाइटग्रिड
2 कॉलम लेआउट 3 कॉलम लेआउट 4 कॉलम लेआउट ग्रिड का विस्तार सूची ग्रिड दृश्य मिश्रित कॉलम लेआउट कॉलम कार्ड ज़िग ज़ैग लेआउट ब्लॉग लेआउटगूगल
गूगल चार्ट गूगल फ़ॉन्ट्स गूगल फॉन्ट पेयरिंग Google विश्लेषिकी सेट करेंकन्वर्टर्स
वजन बदलें तापमान परिवर्तित करें कन्वर्ट लंबाई कन्वर्ट स्पीडब्लॉग
एक डेवलपर नौकरी प्राप्त करें फ्रंट-एंड देव बनें।कैसे करें - साइडबार को संक्षिप्त करें
एक छोटा करने योग्य साइडबार मेनू बनाने का तरीका जानें।
बंधनेवाला साइडबार खोलने के लिए बटन पर क्लिक करें:
एक संक्षिप्त साइडबार बनाएँ
चरण 1) HTML जोड़ें:
उदाहरण
<div id="mySidebar" class="sidebar">
<a href="#"
class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div id="main">
<button class="openbtn" onclick="openNav()">☰
Open Sidebar</button>
<h2>Collapsed Sidebar</h2>
<p>Content...</p>
</div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* The sidebar menu */
.sidebar {
height: 100%; /*
100% Full-height */
width: 0; /* 0 width - change this
with JavaScript */
position: fixed; /* Stay in place
*/
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}
/* The sidebar links */
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links,
change their color */
.sidebar a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top
right corner) */
.sidebar .closebtn {
position:
absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* The
button used to open the sidebar */
.openbtn
{
font-size: 20px;
cursor:
pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
}
.openbtn:hover {
background-color: #444;
}
/* Style page content - use this if you want to push the page content to
the right when you open the side navigation */
#main {
transition: margin-left .5s;
/* If you want a transition effect */
padding: 20px;
}
/* On smaller screens, where height is less than
450px, change the style of the sidenav (less padding and a smaller font
size) */
@media screen and (max-height: 450px) {
.sidebar
{padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
चरण 3) जावास्क्रिप्ट जोड़ें:
उदाहरण
/* Set the width of the sidebar to 250px and the left margin of the
page content to 250px */
function
openNav() {
document.getElementById("mySidebar").style.width
= "250px";
document.getElementById("main").style.marginLeft
= "250px";
}
/* Set the width of the sidebar to 0 and the
left margin of the page content to 0 */
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
युक्ति: नेविगेशन बार के बारे में अधिक जानने के लिए हमारे CSS नेवबार ट्यूटोरियल पर जाएँ।