web-dev-qa-db-fra.com

Comment rendre le menu de navigation de jQuery UI horizontal?

J'aime les choses jQuery UI!

J'aime le menu de navigation, mais je n'arrive pas à le rendre horizontal. Je dois manquer quelque chose qui est un jeu d'enfant.

Quelqu'un sait comment changer le CSS? J'ai essayé cela, mais c'est pour une version plus ancienne et ne fonctionne pas, car il n'est plus "clair" de les garder les uns sur les autres.

CSS pertinentes:

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

Merci pour l'aide!

cssjquery-uimenu
47
SQLiteNoob

Tu peux le faire:

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

et aussi définir:

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

J'admire tous ces efforts pour convertir un menu en barre de menu parce que je déteste essayer de pirater CSS. C'est comme si je me mêlais de pouvoirs que je ne pourrais jamais comprendre! Je pense qu’il est beaucoup plus facile d’ajouter les fichiers de la barre de menu disponibles dans la branche menubar de jquery ui .

J'ai téléchargé le fichier complet jquery ui css fourni à partir du site de téléchargement jquery ui

Dans l'en-tête de mon document, je place le fichier css jquery ui qui contient tout (je suis actuellement sur la version 1.9.x) suivi du fichier CSS spécifique du widget menubar téléchargé depuis la branche menubar de 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" />

N'oubliez pas que le dossier images contenant toutes les petites icônes utilisées par jQuery UI doit se trouver dans le même dossier que le fichier jquery-ui.css.

Puis à la fin le corps que j'ai:

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

Il s’agit d’une copie d’une version à jour de jQuery, suivie d’une copie du fichier jQuery UI, puis du module menubar téléchargé à partir de la branche menubar de jquery ui .

Le fichier CSS de la barre de menu est rafraîchissant:

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

mais le fichier JavaScript de la barre de menu contient 328 lignes, ce qui est trop long pour être cité ici. Avec cela, vous pouvez simplement appeler menubar () comme ceci:

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

Comme je l'ai dit, j'admire toutes les tentatives de piratage de l'objet de menu pour le transformer en une barre horizontale, mais j'ai constaté qu'elles manquaient toutes d'une fonctionnalité standard d'une barre de menu horizontale. Je ne suis pas sûr de savoir pourquoi ce widget n'est pas encore fourni avec l'interface utilisateur de jQuery, mais vraisemblablement, il reste encore quelques bugs à corriger. Par exemple, je l’ai essayé dans le mode IE 7 Quirks et le positionnement était étrange, mais il a fière allure dans Firefox, Safari et IE 8+.

28
DavidHyogo

Cet article m’a inspiré pour essayer le menu 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"}});
15
Hari K T

Cela fait 3 jours que je suis à la recherche d’une solution jQuery UI et CSS, je fusionne certains codes que j’ai vus, je les répare un peu, et enfin (avec les autres codes), je pourrais le faire fonctionner!

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

Il suffit de penser au menu jquery-ui comme à la liste déroulante des verticales lorsque vous survolez un sujet de votre menu principal. De cette façon, vous disposez d’un menu d’interface utilisateur distinct pour chaque sujet de votre menu principal. Le menu principal horizontal est juste une collection de float: divs gauche enveloppés dans un menu principal div. Vous utilisez ensuite le survol et le survol pour faire apparaître chaque 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 fonction showSubmenu est simple: il suffit de positionner le sous-menu et de l’afficher.

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

Vous devez ensuite vous assurer que le sous-menu est visible lorsque votre curseur est dessus et qu'il disparaît lorsque vous quittez (cela devrait être dans votre fonction document.ready.

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

De plus, n'oubliez pas de cacher vos sous-menus pour commencer - dans la fonction document.ready

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

Voir le code complet ici

http://jsfiddle.net/R4nyn/

4
Anthony

Ajout à la réponse de Mihalis Bagos. J'ai fini par faire ce qui suit:

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

Cela rend le menu de niveau supérieur horizontal mais laisse les sous-menus verticaux.

Je devais enlever les icônes car cela gâchait la mise en page

Il semble également y avoir un problème avec le positionnement du sous-menu. 

4
Rowan

Je suis nouveau dans stackoverflow, donc soyez gentil :)) Cependant, en ce qui concerne le problème du menu horizontal jQuery ui, la seule façon pour moi de résoudre le problème (en se référant à this ) était de définir:

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

en changeant:

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

devrait vous commencer.

2
Matt Newman

Je sais que c’est un vieux fil de discussion mais j’étais en train de fouiller dans le code source de jQuery UI et de me fonder sur la réponse de Rowan, qui était plus proche de ce que je recherchais. Je n'avais besoin que des carottes, car j'estimais qu'il était important de disposer d'un indicateur visuel Des sous-menus possibles. En regardant le code source (.js et .css), je suis parvenu à ceci qui permet à la carotte d'être visible sans modifier la conception (hauteur) et en laissant le menu apparaître verticalement sous l'élément parent.

Dans jquery-ui.js, effectuez une recherche pour trouver $.widget( "ui.menu") et remplacez la position par: 

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

Et dans votre css, ajoutez: 

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

Le résultat final sera un menu jQuery UI horizontal avec des sous-menus affichés sous l’élément de menu parent.

2
defaultNINJA

La meilleure option que j'ai trouvée est un plugin appelé jMenu.

Principal: http://www.myjqueryplugins.com/jquery-plugin/jmenu
Démo: http://demos.myjqueryplugins.com/jmenu/
GitHub: https://github.com/alpixel/jMenu

Capture d'écran:
demo menu

1
cat5dev

Pour obtenir une barre de navigation horizontale avec des listes déroulantes verticales, utilisez une combinaison de tableau et de listes non ordonnées. 

Les éléments de niveau 1 sont représentés par des cellules de tableau, les niveaux suivants par des listes non ordonnées.

Le positionnement des menus enfants était un problème. La valeur par défaut consiste à les afficher directement à côté, mais lorsque vous vous trouvez sur un élément de niveau supérieur, cela masquait les éléments suivants dans la barre de navigation horizontale. Les faire apparaître ci-dessous était acceptable pour un menu déroulant unique, mais s'il y avait un deuxième niveau en dessous, ce deuxième niveau masquerait le reste du premier. La solution consiste à ouvrir le menu ci-dessous et un peu à droite, voir l'option "Position" dans l'invocation du 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