कैसे बनाया जाता है: विकल्पीय मेनू

किस तरह विकल्पीय बटन समूह बनाएं

पहला कदम - HTML जोड़ें:

<div class="vertical-menu">
  <a href="#" class="active">होम</a>
  <a href="#">लिंक 1</a>
  <a href="#">लिंक 2</a>
  <a href="#">लिंक 3</a>
  <a href="#">लिंक 4</a>
</div>

दूसरा कदम - CSS जोड़ें:

.vertical-menu {
  width: 200px; /* अगर आप चाहते हैं, तो चौड़ाई सेट करें */
}
.vertical-menu a {
  background-color: #eee; /* ग्रे पृष्ठभूमि रंग */
  color: black; /* काला लिखावट रंग */
  display: block; /* लिंक को एक-एक के रूप में दिखाएं */
  padding: 12px; /* कुछ आंतरिक सीमा जोड़ें */
  text-decoration: none; /* लिंक के नीचे डायारेक्शन निकालें */
}
.vertical-menu a:hover {
  background-color: #ccc; /* माउस होवर पर काली रंग का गहरा ग्रे पृष्ठभूमि */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* “सक्रिय/वर्तमान” लिंक को हरी रंग में रखने के लिए */
  color: white;
}

स्वयं प्रयोग करें

विकल्पीय स्क्रॉल मेनू

अगर आप विकल्पीय स्क्रॉल मेनू चाहते हैं, तो विशिष्ट ऊंचाई सेट करें और जोड़ें overflow गुण:

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

स्वयं प्रयोग करें

संबंधित पृष्ठ

शिक्षा:कैसे करें: साइडबार नेविगेशन बनाएं