मेरे पास एक मेनू है जहां डेस्कटॉप दृश्य में एक ड्रॉप डाउन प्रभाव काम करता है जब आप उस पर होवर करते हैं (त्वरित लिंक और प्रारंभ करना)।

मैं जो करना चाहता था वह मोबाइल दृश्य में एक क्लिक-टॉगल संस्करण बनाना था, इसलिए जब कोई उपयोगकर्ता त्वरित लिंक पर टैप करता है, उदाहरण के लिए, मेनू अतिरिक्त लिंक के साथ विस्तृत होता है, और फिर बंद करने के लिए फिर से टैप करता है।

मुझे पता है कि बूटस्ट्रैप में (जिसे मैं अपनी वेबसाइट में उपयोग कर रहा हूं) मैं इसे समान काम कर सकता हूं, जब उपयोगकर्ता उस पर टैप करता है तो मेनू नीचे गिर जाता है, हालांकि क्या होता है मेनू दूसरों पर ओवरले करता है, मैं बस इसे बनाने की उम्मीद कर रहा था विस्तार करें और इसके बजाय दूसरों को नीचे धकेलें।

मैं jQuery संस्करण 1.12 को भी कॉल कर रहा हूं, और बाहरी रूप से मेरे सभी jQuery दस्तावेज़ों का उपयोग करूँगा।

यहाँ जे एस बेला है:

जेएसफ़िल्ड

एचटीएमएल:

 <ul class="top-level-menu">
   <li>
      <a href="javascript:;">Quick Links</a>
      <ul class="second-level-menu">
         <li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10353">About the program</a></li>
         <li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10357">FAQs</a></li>
         <li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10369">About the Society</a></li>
         <li><a href="TR/Events/General?pg=informational&fr_id=[[S334:fr_id]]&type=fr_informational&sid=10366">Where your money goes</a></li>
      </ul>
   </li>
   <li>
      <a href="javascript:;">Get Started</a>
      <ul class="second-level-menu">
         <li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?fr_tm_opt=new&pg=tfind&fr_id=[[S334:fr_id]]">Create a fundraiser</a></li>
         <li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=existing">Join a fundraiser</a></li>
         <li><a href="TRR/UnitFundraisingEvent/UFE_ON_odd_?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=none">Participate as an Individual<br />individal</a></li>
         <li><a href="TR/UnitFundraisingEvent/General?pg=pfind&fr_id=[[S334:fr_id]]">Pledge a participant<br />or fundraiser</a></li>
         <li><a href="Donation2?df_id=[[S42:0:form-id]]&PROXY_ID=[[S334:fr_id]]&PROXY_TYPE=21&FR_ID=[[S334:fr_id]]">Donate now</a></li>
      </ul>
   </li>
   <li>
      <a href="http://convio.cancer.ca/site/TR?type=fr_informational&pg=informational&fr_id=22046&sid=10364">Fundraising Tips</a>
   </li>
   <li>
      <a href="http://convio.cancer.ca/site/TR?type=fr_informational&pg=informational&fr_id=22046&sid=10356">Fundraising Ideas</a>
   </li>
   <li>
      <a href="http://convio.cancer.ca/site/TR?type=fr_informational&pg=informational&fr_id=22046&sid=10365">Promotion Tips</a>
   </li>
   <li>
      <a href="http://convio.cancer.ca/site/TR?type=fr_informational&pg=informational&fr_id=22046&sid=10360">Your Company</a>
   </li>
   <li>
      <a href="http://convio.cancer.ca/site/TR?type=fr_informational&pg=informational&fr_id=22046&sid=10355">Contact Us</a>
   </li>
</ul>

सीएसएस:

.third-level-menu{

    position: absolute;
    top: 0;
    right: -150px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.third-level-menu > li {

    height: 30px;
    background: #dff8fe;
}

.third-level-menu > li:hover { 
    background: #CCCCCC; 

}

.second-level-menu {

    position: absolute;
    top: 30px;
    left: 0;
    width: 300px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li {

    position: relative;
    height: 30px;
    background: #dff8fe;
}

.second-level-menu > li:hover {

    background: #ffec9a; 

}

.top-level-menu {

    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu > li {

    position: relative;
    float: left;
    height: 30px;
    width: 133px;
    background: #ecf0f1;
}

.top-level-menu > li:hover { 

    background: #FFEE00; 
}

.top-level-menu li:hover > ul {

    /* On hover, display the next level's menu */
    display: inline;
}


/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #000;
    text-decoration: none;
    padding: 0 0 0 10px;

    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}

.top-level-menu a:hover { 

    color: #000; 
}


@media screen and (max-width: 768px) {

   .top-level-menu > li {
      width: 100%;
    }


}
0
SorryEh 5 मई 2016, 19:09

1 उत्तर

सबसे बढ़िया उत्तर

बूटस्ट्रैप में आप मोबाइल के लिए अकॉर्डियन मेनू का उपयोग कर सकते हैं। जब आप मेनू विकल्प खोलेंगे तो यह अन्य चीजों को नीचे धकेल देगा।

http://getbootstrap.com/javascript/#collapse-example-accordion

1
Rachel S 5 मई 2016, 19:53
उत्तम! धन्यवाद राहेल, अकॉर्डियन मुझे कभी नहीं हुआ और मुझे नहीं पता था कि बूटस्ट्रैप ने भी इसका इस्तेमाल किया है जो कि कमाल है, यह वही है जो मैं ढूंढ रहा हूं।
 – 
SorryEh
6 मई 2016, 18:46