risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come rendere orizzontale il menu di navigazione di jQuery UI?

Adoro le cose 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 cambiare 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.

CSS pertinente:

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

47
SQLiteNoob

Puoi farlo:

/* 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;
}
23
Mihalis Bagos

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ù facile aggiungere i file della barra dei menu disponibili nella sezione menubar di jquery ui .

Ho scaricato il file completo jquery ui css in bundle dal sito di download ui jquery

Nella testa del mio documento ho messo il file ui css jquery che contiene tutto (sono in versione 1.9.x al momento) seguito dal file CSS specifico per il widget del menu a barre scaricato dal ramo menubar di 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 dimenticare la cartella delle immagini con tutte le piccole icone utilizzate da jQuery UI deve essere nella stessa cartella del file jquery-ui.css.

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

Questa è una copia di una versione aggiornata di jQuery, seguita da una copia del file UI jQuery, quindi dal modulo della barra dei menu scaricato dal ramo menubar di jquery ui

Il file CSS della barra dei menu è molto 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 il file JavaScript del menu è di 328 righe: troppo lungo per essere citato qui. Con esso, puoi semplicemente chiamare la barra dei menu () come questo esempio:

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

Come ho detto, ammiro tutti i tentativi di hackerare l'oggetto menu per trasformarlo in una barra orizzontale, ma ho trovato che a tutti 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+.

28
DavidHyogo

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"}});
15
Hari K T

Sono stato solo 3 giorni alla ricerca di una soluzione UI e CSS jquery, unisco un codice che ho visto, aggiusto 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;
5
Moatilliatta

Basti pensare al menu jquery-ui come al menu a discesa del vertice quando si passa con il mouse su un argomento nel menu 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 sia visibile mentre il cursore è su di esso e scompare quando si esce (dovrebbe essere nella funzione document.ready.

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

Inoltre, non dimenticare di nascondere i sottomenu per iniziare - nella funzione document.ready

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

Vedi il codice completo qui

http://jsfiddle.net/R4nyn/

4
Anthony

Aggiungendo la risposta a 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>

Ciò rende il menu di livello superiore orizzontale ma lascia i sottomenu verticali.

Ho dovuto rimuovere le icone perché questo stava rovinando il layout

Sembra anche che ci sia un problema con il posizionamento del sottomenu. 

4
Rowan

Sono nuovo di StackOverflow, quindi per favore sii gentile:) Tuttavia, girando verso il problema del menu ui orizzontale jQuery, l'unico modo in cui sono riuscito a risolvere il problema (riferendosi a questo ) è stato quello di impostare:

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

mutevole:

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

2
Matt Newman

So che questo è un vecchio thread ma stavo scavando nel codice sorgente di jQuery UI e ho costruito la 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'osservazione del codice sorgente (sia .js che .css) mi è venuta in mente ciò che consente alla carota di essere visivamente visibile senza fare confusione con il disegno (altezza) e di lasciare il menu in verticale sotto l'elemento principale.

Nel jquery-ui.js fai una ricerca per trovare $.widget( "ui.menu") e cambia la postazione in: 

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

E nel tuo css aggiungi: 

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

Il risultato finale sarà un menu dell'interfaccia utente jQuery orizzontale con i sottomenu visualizzati veriticamente sotto la voce di menu principale.

2
defaultNINJA

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

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

Immagine dello schermo:
demo menu

1
cat5dev

Per ottenere una barra di navigazione 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 oggetto 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>
0
Beau