Comment rendre le menu de navigation de jQuery UI horizontal?

Question

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 l'un sur l'autre.

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!

Answer 1

J'admire tous ces efforts pour convertir un menu pour une barre de menu parce que je déteste vraiment essayer de hack CSS. Il se sent juste comme je suis l'ingérence de puissances je ne peux jamais comprendre! Je pense que c'est beaucoup plus facile d'ajouter de la barre de menu fichiers disponibles dans la barre de menus de la branche de jquery ui.

J'ai téléchargé le plein de jquery ui css livré fichier à partir de l' interface utilisateur de jquery site de téléchargement de

Dans la tête de mon document, j'ai mis le jquery ui fichier css qui contient tout (je suis sur la version 1.9.x à l'instant), suivie par le fichier CSS du widget barre de menus téléchargé à partir de la barre de menus de la branche 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 le dossier images avec toutes les petites icônes utilisées par jQuery UI doit être dans le même dossier que le jquery-ui.fichier css.

Puis à la fin le corps, 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>

C'est une copie d'un up-to-date de la version de jQuery, suivie par une copie de l'INTERFACE utilisateur de jQuery, la barre de menu du module téléchargé à partir de la barre de menus de la branche de jquery ui

La barre de menu fichier CSS est étonnamment court:

.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 la barre de menu fichier JavaScript est 328 lignes - trop long de citer ici. Avec elle, vous pouvez simplement appeler menubar() comme dans cet exemple:

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

Comme je l'ai dit, j'admire toutes les tentatives de hack le menu objet pour le transformer en une barre horizontale, mais j'ai trouvé tous manqué de quelques la fonction standard d'une barre de menu horizontale. Je ne sais pas pourquoi ce widget n'est pas fourni avec jQuery UI encore, mais sans doute il y a encore quelques bugs à régler. Par exemple, je l'ai essayé sous IE 7 en Mode Quirks et le positionnement était étrange, mais il ressemble beaucoup dans Firefox, Safari et IE 8+.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

Il suffit de penser le jquery-menu de l'interface utilisateur comme étant le verticle déroulante lorsque vous passez la souris sur une rubrique sur votre principale horizonal menu. De cette façon, vous avez un jquery ui menu pour chaque thème sur votre menu principal. Le horizonal menu principal n'est qu'une collection de float:left divs enveloppé dans un mainmenu div. Vous pouvez ensuite l'utiliser en vol stationnaire et stationnaire hors de pop-up de 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();
    }
    );

Le showSubmenu fonction est simple - il est tout simplement positions dans le sous-menu montre.

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

Ensuite, vous devez vous assurer que le sous-menu est visible lorsque votre curseur est sur elle et disparaît lorsque vous quitter (ce qui devrait être dans votre document.prêt de la fonction.

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

Aussi n'oubliez pas de cacher vos sous-menus pour commencer - dans le document.prêt de la fonction

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

Voir le code complet ici

http://jsfiddle.net/R4nyn/