jQuery UI नेविगेशन मेनू क्षैतिज कैसे बनाएं?

Question

मुझे jQuery यूआई सामान पसंद है!

मुझे नेविगेशन मेनू पसंद है, लेकिन मुझे लगता है कि यह क्षैतिज नहीं है। मुझे कुछ ऐसा याद आना पड़ेगा जो एक सिंचन है।

कोई भी सीएसएस को बदलने का तरीका जानता है? मैंने कोशिश की लेकिन यह एक पुराने संस्करण के लिए है और काम नहीं करता है, क्योंकि अब उन्हें एक-दूसरे के ऊपर रखने के लिए "स्पष्ट" नहीं है।

प्रासंगिक सीएसएस:

.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; } 
.ui-menu .ui-menu { margin-top: -3px; position: absolute; } 
.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; } 
.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } 
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; } 
.ui-menu .ui-menu-item a.ui-state-focus, 
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; } 

.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; } 
.ui-menu .ui-state-disabled a { cursor: default; } 

मदद के लिए धन्यवाद!

Answer 1

आप ऐसा कर सकते हैं:

/* Clearfix for the menu */ 
.ui-menu:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

और यह भी सेट:

.ui-menu .ui-menu-item { 
    display: inline-block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: auto; 
} 

Answer 2

बदल रहा:

.ui-menu .ui-menu-item { 
    margin: 0; 
    padding: 0; 
    zoom: 1; 
    width: 100%; 
} 

रहे हैं:

.ui-menu .ui-menu-item { 
    margin: 0; 
    padding: 0; 
    zoom: 1; 
    width: auto; 
    float:left; 
} 

आपको शुरू करना चाहिए।

Answer 3

मैं stackoverflow के लिए नया हूँ, इसलिए कृपया अच्छा :) लेकिन क्षैतिज jQuery ui मेनू, एक ही रास्ता मैं इस समस्या (this की चर्चा करते हुए) को हल करने का प्रबंधन कर सकता की समस्या की ओर सेट करने के लिए किया गया था:

#nav li {width: auto; clear: none; float: left} 
#nav ul li {width: auto; clear: none; float:none} 

Answer 4

मिहालिस Bagos उत्तर में जोड़ना। मैंने निम्नलिखित कर दिया है:

<style> 
.ui-menu{ 
    z-index: 1000; 
} 

#menubar-layout-container > .ui-menu:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#menubar-layout-container > .ui-menu > .ui-menu-item { 
    display: inline-block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: auto; 
} 

.ui-menu .ui-menu-icon{ 
    display: none; 
} 
</style> 

यह शीर्ष स्तर मेनू क्षैतिज बनाता है लेकिन किसी भी उप मेन्यू लंबवत छोड़ देता है।

मैं माउस को दूर करने के लिए किया था के रूप में इस लेआउट

वहाँ भी उप मेनू स्थिति के साथ एक समस्या हो रहा है ऊपर खिलवाड़ था।

Answer 5

मुझे पता है कि यह एक पुराना धागा है, लेकिन मैं jQuery यूआई स्रोत कोड में खोद रहा था और रोवन के उत्तर पर बनाया गया था जो जो मैं ढूंढ रहा था उसके करीब था। केवल मुझे गाजर की जरूरत थी क्योंकि मुझे लगा कि संभावित सबमेनस के दृश्य संकेतक होना महत्वपूर्ण था। स्रोत कोड (दोनों .js और .css) को देखने से मैं इस के साथ आया था कि गाजर डिज़ाइन (ऊंचाई) के साथ गड़बड़ किए बिना दृश्यमान और माता-पिता को मूल आइटम के नीचे लंबवत दिखाई देने की अनुमति देता है।

jQuery-ui.js में कोई खोज करते हैं $.widget("ui.menu") खोजने के लिए और करने के लिए postition बदलने के लिए:

position: { 
my: "center top", 
at: "center bottom" 
} 

और अपने सीएसएस ऐड में:

#nav > .ui-menu:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#nav > .ui-menu > .ui-menu-item { 
    display: inline-block; 
    float: left; 

    margin: 0; 
    padding: 3px; 

    width: auto; 
} 

.ui-menu .ui-menu-item a { 
    padding: 0; 
} 

.ui-menu .ui-menu-icon{ 
    position: relative; 
    left: 1px; 
    top: 6px; 
} 

अंतिम परिणाम एक jQuery यूआई मेनू हो जाएगा उप मेनू के साथ क्षैतिज अभिभावक मेनू आइटम के नीचे veriticaly प्रदर्शित किया जा रहा है।

Answer 6

मैं मेन्यूबार में मेनू को कन्वर्ट करने के लिए इन सभी प्रयासों की प्रशंसा करता हूं क्योंकि मैं सीएसएस को हैक करने की कोशिश कर रहा हूं। ऐसा लगता है जैसे मैं शक्तियों के साथ दखल दे रहा हूं, मैं शायद कभी समझ नहीं सकता! मुझे लगता है कि menubar branch of jquery ui पर उपलब्ध मेनूबार फ़ाइलों को जोड़ना बहुत आसान है।

मैं jquery ui download site

से पूर्ण jQuery ui सीएसएस फ़ाइल बंडल डाउनलोड की मेरी दस्तावेज़ के सिर में मैं सब कुछ (मैं इस समय संस्करण 1.9.x पर हूँ) का पालन होता है कि jQuery ui सीएसएस फ़ाइल डाल मेनूबार विजेट menubar branch of jquery ui

<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" /> 
<link type="text/css" href="css/jquery.ui.menubar.css" rel="stylesheet" /> 

से डाउनलोड मत भूलना छवियों सभी छोटी jQuery यूआई द्वारा इस्तेमाल किया प्रतीक के साथ फ़ोल्डर के लिए विशिष्ट सीएसएस फ़ाइल से jQuery-ui.css को उसी फ़ोल्डर में होने की जरूरत है फ़ाइल।

फिर अंत में शरीर मेरे पास है:

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.9.0.custom.min.js"></script> 
<script type="text/javascript" src="js/menubar/jquery.ui.menubar.js"></script> 

jQuery के एक अप-टू-डेट संस्करण की एक प्रति, jQuery यूआई फ़ाइल की एक प्रतिलिपि के बाद है यही कारण है, तो मेनूबार मॉड्यूल से डाउनलोड menubar branch of jquery ui

मेनूबार सीएसएस फ़ाइल स्फूर्तिदायक कम है:

.ui-menubar { list-style: none; margin: 0; padding-left: 0; } 
.ui-menubar-item { float: left; } 
.ui-menubar .ui-button { float: left; font-weight: normal; border-top-width: 0 !important; border-bottom-width: 0 !important; margin: 0; outline: none; } 
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; } 
.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; font-weight: normal; } 

लेकिन मेनूबार JavaScript फ़ाइल 328 लाइनों है - बहुत लंबा यहाँ उद्धृत करने के लिए। इसके साथ, आप बस इस उदाहरण की तरह मेनूबार() कॉल कर सकते हैं:

$("#menu").menubar({ 
    autoExpand: true, 
    menuIcon: true, 
    buttons: true, 
    select: select 
}); 

जैसा कि मैंने कहा, मैं सभी यह एक क्षैतिज बार में बदलने के लिए मेनू वस्तु को हैक करने का प्रयास की प्रशंसा, लेकिन मैंने पाया उन सभी का अभाव एक क्षैतिज मेनू पट्टी की कुछ मानक विशेषता। मुझे यकीन नहीं है कि यह विजेट अभी तक jQuery UI के साथ क्यों नहीं बंडल किया गया है, लेकिन संभवतः अभी भी लोहे के बाहर कुछ बग हैं। उदाहरण के लिए, मैंने इसे आईई 7 क्विर्क मोड में करने की कोशिश की और स्थिति अजीब थी, लेकिन यह फ़ायरफ़ॉक्स, सफारी और आईई 8+ में बहुत अच्छी लगती है।

Answer 7

वर्टिकल ड्रॉपडाउन के साथ क्षैतिज नौसेना बार प्राप्त करने के लिए, तालिका और अनॉर्डर्ड सूचियों के संयोजन का उपयोग करें।

स्तर 1 आइटम तालिका कक्षों द्वारा दर्शाए जाते हैं, बाद के स्तरों को अनियंत्रित सूचियों द्वारा दर्शाया जाता है।

बाल मेनू की स्थिति एक समस्या थी। डिफ़ॉल्ट यह है कि उन्हें सीधे साथ दिखाई देना है, लेकिन जब शीर्ष स्तर की वस्तु पर, वह क्षैतिज नौसेना बार में आने वाली वस्तुओं को अस्पष्ट कर रहा था। उन्हें नीचे दिखाई देने के लिए एक ड्रॉपडाउन मेनू के लिए ठीक था, लेकिन यदि नीचे दूसरा स्तर था, तो वह दूसरा स्तर पहले के बाकी हिस्सों को अस्पष्ट करेगा। समाधान मेनू को नीचे और कुछ हद तक दाईं ओर खोलना है, मेनू आमंत्रण में "स्थिति" विकल्प देखें।

<style type="text/css"> 
    #trJMenu td { white-space: nowrap; width: auto; } 
    #trJMenu li { white-space: nowrap; width: auto; } 
</style> 


<script language="javascript" type="text/javascript"> 
    $(document).ready(function(){ 
    $("#trJMenu").menu({ position: { my: "left top", at: "center bottom" } });   
    }); 
</script> 


<table> 
    <tr id='trJMenu'> 
    <td> 
     <a href='#'>Timesheets</a> 
     <ul> 
     <li><a href='#'>Labour</a></li> 
     <li><a href='#'>Chargeout Report</a></li> 
     </ul> 
    </td> 
    <td> 
     <a href='#'>Activity Management</a> 
     <ul> 
     <li><a href='#'>Activities</a></li> 
     <li><a href='#'>Proposals</a></li> 
     </ul> 
    </td> 
    </tr> 
</table> 

Answer 8

इस पोस्ट ने मुझे jQuery UI मेनू का प्रयास करने के लिए प्रेरित किया है।

http://jsfiddle.net/7Bvap/

<ul id="nav"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a> 
     <ul> 
      <li><a href="#">Item 3-1</a> 
      <ul> 
       <li><a href="#">Item 3-11</a></li> 
       <li><a href="#">Item 3-12</a></li> 
       <li><a href="#">Item 3-13</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Item 3-2</a></li> 
      <li><a href="#">Item 3-3</a></li> 
      <li><a href="#">Item 3-4</a></li> 
      <li><a href="#">Item 3-5</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Item 4</a></li> 
    <li><a href="#">Item 5</a></li> 
</ul> 


.ui-menu { 
    overflow: hidden; 
} 
.ui-menu .ui-menu { 
    overflow: visible !important; 
} 
.ui-menu > li { 
    float: left; 
    display: block; 
    width: auto !important; 
} 
.ui-menu ul li { 
    display:block; 
    float:none; 
} 
.ui-menu ul li ul { 
    left:120px !important; 
    width:100%; 
} 
.ui-menu ul li ul li { 
    width:auto; 
} 
.ui-menu ul li ul li a { 
    float:left; 
} 
.ui-menu > li { 
    margin: 5px 5px !important; 
    padding: 0 0 !important; 
} 
.ui-menu > li > a { 
    float: left; 
    display: block; 
    clear: both; 
    overflow: hidden; 
} 
.ui-menu .ui-menu-icon { 
    margin-top: 0.3em !important; 
} 
.ui-menu .ui-menu .ui-menu li { 
    float: left; 
    display: block; 
} 


$("#nav").menu({position: {at: "left bottom"}}); 

http://jsfiddle.net/vapD7/

<ul id="nav"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a> 
     <ul> 
      <li><a href="#">Item 3-1</a> 
      <ul> 
       <li><a href="#">Item 3-11</a></li> 
       <li><a href="#">Item 3-12</a></li> 
       <li><a href="#">Item 3-13</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Item 3-2</a></li> 
      <li><a href="#">Item 3-3</a></li> 
      <li><a href="#">Item 3-4</a></li> 
      <li><a href="#">Item 3-5</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Item 4</a></li> 
    <li><a href="#">Item 5</a></li> 
</ul> 

.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; } 
.ui-menu .ui-menu { margin-top: -3px; position: absolute; } 
.ui-menu .ui-menu-item { 
    display: inline-block; 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: auto; 
} 
.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; } 
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; } 
.ui-menu .ui-menu-item a.ui-state-focus, 
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; } 

.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; } 
.ui-menu .ui-state-disabled a { cursor: default; } 
.ui-menu:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

$("#nav").menu({position: {at: "left bottom"}}); 

Answer 9

बस जब आप अपने मुख्य horizonal मेनू पर एक विषय पर होवर verticle लटकती होने के रूप में jQuery ui को मेनू के बारे में सोचते हैं। इस तरह, आपके मुख्य मेनू पर प्रत्येक विषय के लिए आपके पास एक अलग jquery UI मेनू है। क्षैतिज मुख्य मेनू केवल फ्लोट का संग्रह है: बाएं divs एक मेनमेनू div में लपेटा। फिर आप प्रत्येक मेनू को पॉप अप करने के लिए होवर का उपयोग करें और होवर करें।

$('.mainmenuitem').hover(
    function(){ 
     $(this).addClass('ui-state-focus'); 
     $(this).addClass('ui-corner-all'); 
     $(this).addClass('ui-state-hover'); 
     $(this).addClass('ui-state-active'); 
     $(this).addClass('mainmenuhighlighted'); 
     // trigger submenu 
     var position=$(this).offset(); 
     posleft=position.left; 
     postop=position.top; 
     submenu=$(this).attr('submenu'); 
     showSubmenu(posleft,postop,submenu);  
    }, 
    function(){ 
     $(this).removeClass('ui-state-focus'); 
     $(this).removeClass('ui-corner-all'); 
     $(this).removeClass('ui-state-hover'); 
     $(this).removeClass('ui-state-active'); 
     $(this).removeClass('mainmenuhighlighted'); 
     // remove submenu 
     $('.submenu').hide(); 
    } 
    ); 

शोसुमेनू फ़ंक्शन सरल है - यह केवल उपमेनू को स्थान देता है और दिखाता है।

function showSubmenu(left,top,submenu){ 
    var tPosX=left; 
    var tPosY=top+28; 
    $('#'+submenu).css({left:tPosX, top:tPosY,position:'absolute'}); 
    $('#'+submenu).show(); 
} 

फिर आप यकीन है कि सबमेनू दिखाई दे रहा है, जबकि अपने कर्सर उस पर है और गायब हो जाता है जब आप छोड़ (यह आपका document.ready समारोह में होना चाहिए बनाने की जरूरत है।

$('.submenu').hover(
      function(){ 
       $(this).show(); 
      }, 
      function(){ 
       $(this).hide(); 
      } 
      ); 

भी नहीं है अपने सबमेनू को छिपाने के लिए के साथ शुरू करने के लिए भूल जाते हैं - document.ready समारोह में

$(".submenu").hide(); 

पूर्ण कोड यहाँ

देखें

http://jsfiddle.net/R4nyn/

Answer 10

सबसे अच्छा विकल्प मैंने पाया एक प्लगइन jMenu कहा जाता है।

मुख्य: http://www.myjqueryplugins.com/jquery-plugin/jmenu
डेमो:
GitHub: https://github.com/alpixel/jMenu

स्क्रीनशॉट:

Answer 11

मैं सिर्फ 3 दिन एक jQuery यूआई और सीएसएस समाधान की तलाश के लिए किया गया, मैं कुछ कोड मैं विलय देखा, थोड़ा ठीक करें, और अंत में (दूसरे कोड के साथ) मैं इसे काम कर सकता हूं!

http://jsfiddle.net/Moatilliatta/97m6ty1a/

<ul id="nav" class="testnav"> 
    <li><a class="clk" href="#">Item 1</a></li> 
    <li><a class="clk" href="#">Item 2</a></li> 
    <li><a class="clk" href="#">Item 3</a> 
     <ul class="sub-menu"> 
      <li><a href="#">Item 3-1</a> 
       <ul class="sub-menu"> 
        <li><a href="#">Item 3-11</a></li> 
        <li><a href="#">Item 3-12</a> 
         <ul> 
          <li><a href="#">Item 3-111</a></li>       
          <li><a href="#">Item 3-112</a> 
           <ul> 
            <li><a href="#">Item 3-1111</a></li>        
            <li><a href="#">Item 3-1112</a></li>        
            <li><a href="#">Item 3-1113</a> 
             <ul> 
              <li><a href="#">Item 3-11131</a></li>       
              <li><a href="#">Item 3-11132</a></li>       
             </ul> 
            </li>       
           </ul> 
          </li> 
          <li><a href="#">Item 3-113</a></li> 
         </ul> 
        </li> 
        <li><a href="#">Item 3-13</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Item 3-2</a> 
       <ul> 
        <li><a href="#."> Item 3-21 </a></li> 
        <li><a href="#."> Item 3-22 </a></li> 
        <li><a href="#."> Item 3-23 </a></li> 
       </ul> 
      </li> 
      <li><a href="#">Item 3-3</a></li> 
      <li><a href="#">Item 3-4</a></li> 
      <li><a href="#">Item 3-5</a></li> 
     </ul> 
    </li> 
    <li><a class="clk" href="#">Item 4</a> 
     <ul class="sub-menu"> 
      <li><a href="#">Item 4-1</a> 
       <ul class="sub-menu"> 
        <li><a href="#."> Item 4-11 </a></li> 
        <li><a href="#."> Item 4-12 </a></li> 
        <li><a href="#."> Item 4-13 </a> 
         <ul> 
          <li><a href="#."> Item 4-131 </a></li> 
          <li><a href="#."> Item 4-132 </a></li> 
          <li><a href="#."> Item 4-133 </a></li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#">Item 4-2</a></li> 
      <li><a href="#">Item 4-3</a></li> 
     </ul> 
    </li> 
    <li><a class="clk" href="#">Item 5</a></li> 
</ul> 

जावास्क्रिप्ट

$(document).ready(function(){ 

var menu = "#nav"; 
var position = {my: "left top", at: "left bottom"}; 

$(menu).menu({ 

    position: position, 
    blur: function() { 
     $(this).menu("option", "position", position); 
     }, 
    focus: function(e, ui) { 

     if ($(menu).get(0) !== $(ui).get(0).item.parent().get(0)) { 
      $(this).menu("option", "position", {my: "left top", at: "right top"}); 
      } 
    } 
});  }); 

सीएसएस

.ui-menu {width: auto;}.ui-menu:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}.ui-menu .ui-menu-item {display: inline-block;margin: 0;padding: 0;width: auto;}#nav{text-align: center;font-size: 12px;}#nav li {display: inline-block;}#nav li a span.ui-icon-carat-1-e {float:right;position:static;margin-top:2px;width:16px;height:16px;background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -64px -16px;}#nav li ul li {width: 120px;border-bottom: 1px solid #ccc;}#nav li ul {width: 120px; }.ui-menu .ui-menu-item li a span.ui-icon-carat-1-e {background:url(https://www.drupal.org/files/issues/ui-icons-222222-256x240.png) no-repeat -32px -16px !important;