Come rendere orizzontale il menu di navigazione dell'interfaccia utente jQuery?

Question

Mi piace il materiale dell'interfaccia utente di jQuery!

Mi piace il menu di navigazione, ma non riesco a farlo sembrare orizzontale. Devo mancare qualcosa che è un gioco da ragazzi.

Qualcuno sa come modificare il CSS? Ho provato questo, ma è per una versione precedente e non funziona, dal momento che non è più "chiaro" per tenerli uno sopra l'altro.

Rilevante CSS:

.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; } 

Grazie per l'aiuto!

Answer 1

Si può fare questo:

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

e anche impostare:

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

Answer 2

cambiando:

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

a:

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

dovrebbe iniziare.

Answer 3

Sono nuovo di StackOverflow, quindi si prega di essere bello :) però girando al problema del menù orizzontale ui jQuery, l'unico modo per riuscire a risolvere il problema (riferendosi a this) è stato quello di impostare:

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

Answer 4

Aggiunta alla risposta di Mihalis Bagos. Ho finito per fare quanto segue:

<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> 

Questo rende il menu di livello superiore orizzontale, ma lascia sottomenu verticali.

ho dovuto togliere le icone come questo è stato rovinare il layout

Ci sembra anche essere un problema con il posizionamento sottomenu.

Answer 5

So che questo è un thread vecchio ma stavo scavando nel codice sorgente di jQuery UI e costruito sulla risposta di Rowan, che era più vicina a quello che stavo cercando, . Solo io avevo bisogno delle carote perché sentivo che era importante avere un indicatore visivo di possibili sottomenu. Dall'esame del codice sorgente (sia .js che .css) mi sono imbattuto in questo che consente alla carota di essere visivamente visibile senza disordine con il disegno (altezza) e anche di visualizzare il menu in verticale sotto l'elemento principale.

Negli jquery-ui.js fare una ricerca per trovare e cambiare $.widget("ui.menu") fendinebbia a:

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

E nel CSS aggiuntivo:

#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; 
} 

Risultato finale sarà un menu jQuery UI orizzontale con i sottomenu visualizzati veriticamente sotto la voce di menu principale.

Answer 6

Ammiro tutti questi sforzi per convertire un menu in una barra dei menu perché detesto il tentativo di hackerare i CSS. Mi sembra di immischiarmi in poteri che non riesco mai a capire! Penso che sia molto più semplice aggiungere i file della barra dei menu disponibili allo menubar branch of jquery ui.

Ho scaricato la piena jQuery UI css file di bundle dal jquery ui download site

Nella testa del mio documento ho messo il file css jQuery UI che contiene tutto (io sono della versione 1.9.x al momento) seguita dal file CSS specifica per il widget barra dei menu scaricato dal 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" /> 

non dimenticate la cartella immagini con tutte le piccole icone utilizzate da jQuery UI deve essere nella stessa cartella del jquery-ui.css file.

Poi alla fine il corpo che ho:

<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> 

che è una copia di una versione up-to-date di jQuery, seguita da una copia del file UI jQuery, allora il modulo barra dei menu scaricato da il file CSS menubar branch of jquery ui

la barra dei menu è piacevolmente breve:

.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; } 

ma la barra dei menu file JavaScript è 328 linee - troppo lungo citare qui. Con esso, si può semplicemente chiamare barra dei menu() come in questo esempio:

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

Come ho detto, io ammiro tutti i tentativi di hackerare l'oggetto menu per trasformarlo in una barra orizzontale, ma ho trovato tutti loro mancava alcune funzionalità standard di una barra dei menu orizzontale. Non sono sicuro del motivo per cui questo widget non sia ancora associato all'interfaccia utente di jQuery, ma presumibilmente ci sono ancora alcuni bug da risolvere. Ad esempio, l'ho provato in IE 7 Quirks Mode e il posizionamento era strano, ma è ottimo in Firefox, Safari e IE 8+.

Answer 7

Per ottenere una barra di spostamento orizzontale con elenchi a discesa verticali, utilizzare una combinazione di una tabella e di elenchi non ordinati.

Gli elementi di livello 1 sono rappresentati da celle di tabella, i livelli successivi sono rappresentati da elenchi non ordinati.

Il posizionamento dei menu figlio era un problema. L'impostazione predefinita è farli apparire direttamente a fianco, ma quando su un elemento di livello superiore, ciò oscurava gli oggetti successivi nella barra di navigazione orizzontale. Averli apparire sotto era ok per un singolo menu a discesa, ma se c'era un secondo livello sotto, allora quel 2 ° livello avrebbe oscurato il resto del primo. La soluzione è di avere il menu aperto sotto e un po 'a destra, vedere l'opzione "posizione" nel richiamo del menu.

<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

Questo post mi ha ispirato a provare il menu ui jQuery.

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

Basti pensare al menù jquery-ui come il menu a discesa verticle quando si passa sopra un argomento sul menu horizonal principale. In questo modo, hai un menu ui jquery separato per ogni argomento nel tuo menu principale. Il menu principale orizzontale è solo una raccolta di float: i div di sinistra sono avvolti in un div principale. Quindi si passa al passaggio del mouse e si passa al passaggio del mouse per visualizzare tutti i menu.

$('.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(); 
    } 
    ); 

La funzione showSubmenu è semplice: posiziona semplicemente il sottomenu e lo mostra.

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

È quindi necessario assicurarsi che il sottomenu è visibile, mentre il cursore si trova su di esso e scompare quando si esce (questo dovrebbe essere nella vostra funzione document.ready.

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

non

anche dimenticare di nascondere il proprio sottomenu per cominciare - nella funzione document.ready

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

vedere il codice completo qui

http://jsfiddle.net/R4nyn/

Answer 10

L'opzione migliore che ho trovato è un plugin chiamato JMenu.

principale: http://www.myjqueryplugins.com/jquery-plugin/jmenu
Demo:
GitHub: https://github.com/alpixel/jMenu

Screenshot:

Answer 11

Ho appena stato per 3 giorni alla ricerca di una UI jQuery e soluzione CSS, mi si fondono qualche codice ho ho visto, aggiustato un po 'e infine (insieme agli altri codici) ho potuto farlo funzionare!

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> 

javascript

$(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"}); 
      } 
    } 
});  }); 

CSS

.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;