it-swarm.com.de

Wie kann ich das jQuery UI nav-Menü horizontal gestalten?

Ich liebe die JQuery UI Sachen!

Ich mag das Navigationsmenü, aber ich scheine es nicht horizontal zu erhalten. Ich muss etwas vermissen, das ein Kinderspiel ist.

Weiß jemand, wie man das CSS ändert? Ich habe es versucht, aber es ist für eine ältere Version und funktioniert nicht, da es nicht mehr "klar" ist, sie übereinander zu halten.

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

Danke für die Hilfe!

47
SQLiteNoob

Du kannst das:

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

und auch gesetzt:

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

Ich bewundere all diese Bemühungen, ein Menü in eine Menüleiste umzuwandeln, weil ich es hassen wollte, CSS zu hacken. Es fühlt sich einfach so an, als würde ich mich in Kräfte einmischen, die ich niemals verstehen kann! Ich denke, es ist viel einfacher, die im menubar branch of jquery ui verfügbaren Menüleisten-Dateien hinzuzufügen.

Ich habe die vollständige Jquery-UI-CSS-Paketdatei von der Jquery-Ui-Download-Site heruntergeladen. _

In den Kopf meines Dokuments füge ich die Jquery-UI-css-Datei hinzu, die alles enthält (ich bin derzeit auf Version 1.9.x), gefolgt von der spezifischen CSS-Datei für das Menü der Menüleiste, die vom Menüleiste-Zweig von Jquery-Ui heruntergeladen wurde)

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

Vergessen Sie nicht, dass der Ordner images mit allen kleinen Symbolen, die von der jQuery-Benutzeroberfläche verwendet werden, im selben Ordner wie die Datei jquery-ui.css liegen muss.

Am Ende habe ich den Körper:

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

Dies ist eine Kopie einer aktuellen Version von jQuery, gefolgt von einer Kopie der jQuery-UI-Datei. Anschließend wird das Menü der Menüleiste aus dem Menüleiste-Zweig von Jquery Ui heruntergeladen.

Die CSS-Datei der Menüleiste ist erfrischend kurz:

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

die JavaScript-Datei der Menüleiste ist 328 Zeilen lang - zu lang, um sie hier zu zitieren. Damit können Sie einfach menubar () wie folgt aufrufen:

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

Wie gesagt, ich bewundere alle Versuche, das Menüobjekt zu hacken, um es in eine horizontale Leiste zu verwandeln, aber ich habe festgestellt, dass es für alle keine Standardfunktion einer horizontalen Menüleiste gibt. Ich bin nicht sicher, warum dieses Widget noch nicht mit der jQuery-Benutzeroberfläche gebündelt ist, aber vermutlich gibt es noch einige Fehler, die behoben werden müssen. Zum Beispiel habe ich es im IE 7-Quirks-Modus ausprobiert und die Positionierung war merkwürdig, aber es sieht in Firefox, Safari und IE 8+ gut aus.

28
DavidHyogo

Dieser Beitrag hat mich dazu inspiriert, das jQuery-Ui-Menü auszuprobieren. 

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

Ich war gerade für 3 Tage auf der Suche nach einer UI- und CSS-Lösung für Jquery, ich gebe etwas Code ein, den ich gesehen habe, korrigiere ein wenig und schließlich (zusammen mit den anderen Codes) konnte ich es funktionieren lassen!

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

Denken Sie nur an das Jquery-Ui-Menü als Dropdown für Vertikeln, wenn Sie mit der Maus über ein Thema in Ihrem Hauptmenü klicken. Auf diese Weise haben Sie für jedes Thema in Ihrem Hauptmenü ein eigenes Jquery-Ui-Menü. Das horizontale Hauptmenü ist nur eine Sammlung von Float: Linke Divs, die in einem Hauptmenü div eingeschlossen sind. Sie können dann mit dem Hover hinein und Hover raus jedes Menü öffnen. 

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

Die showSubmenu-Funktion ist einfach: Sie positioniert das Untermenü und zeigt es an.

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

Sie müssen dann sicherstellen, dass das Untermenü sichtbar ist, während sich der Cursor darauf befindet, und beim Verlassen ausgeblendet wird (dies sollte in der Funktion document.ready sein).

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

Vergessen Sie auch nicht, Ihre Untermenüs zunächst zu verbergen - in der Funktion document.ready

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

Den vollständigen Code finden Sie hier

http://jsfiddle.net/R4nyn/

4
Anthony

Ergänzung zu Mihalis Bagos Antwort. Ich habe am Ende folgendes getan:

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

Dadurch wird das Menü der obersten Ebene horizontal, aber alle Untermenüs bleiben vertikal.

Ich musste die Icons entfernen, da dies das Layout durcheinander brachte

Es scheint auch ein Problem mit der Positionierung des Untermenüs zu geben. 

4
Rowan

Ich bin neu bei stackoverflow, also sei bitte nett:) Wenn ich mich jedoch dem Problem des horizontalen jQuery-Ui-Menüs zuwendet, war die einzige Möglichkeit, das Problem zu lösen (bezogen auf this ) Folgendes zu setzen:

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

Ändern:

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

zu:

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

sollte dich anfangen.

2
Matt Newman

Ich weiß, dass dies ein alter Thread ist, aber ich habe mich in den jQuery-UI-Quellcode eingegraben und auf Rowans Antwort aufgebaut, die Näher an dem war, wonach ich gesucht hatte. Nur ich brauchte die Möhren, da ich es für wichtig hielt, einen visuellen Indikator für mögliche Untermenüs zu haben. Beim Betrachten des Quellcodes (sowohl .js als auch .css) bin ich darauf gekommen, dass die Möhre sichtbar werden kann, ohne sich mit dem Design (Höhe) zu beschäftigen und das Menü vertikal unter dem übergeordneten Element zu erscheinen.

Suchen Sie in jquery-ui.js nach $.widget( "ui.menu") und ändern Sie die Position in: 

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

Und in Ihrer CSS hinzufügen: 

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

Das Endergebnis wird ein jQuery-UI-Menü horizontal mit Untermenüs sein, die unterhalb des übergeordneten Menüelements angezeigt werden.

2
defaultNINJA

Die beste Option, die ich gefunden habe, ist ein Plugin namens jMenu.

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

Bildschirmfoto:
demo menu

1
cat5dev

Um eine horizontale Navigationsleiste mit vertikalen Dropdowns zu erhalten, verwenden Sie eine Kombination aus einer Tabelle und ungeordneten Listen. 

Die Elemente der Ebene 1 werden durch Tabellenzellen dargestellt, nachfolgende Ebenen werden durch ungeordnete Listen dargestellt.

Die Positionierung der Untermenüs war ein Problem. Standardmäßig werden diese direkt nebeneinander angezeigt. Wenn Sie sich jedoch auf einem Element der obersten Ebene befinden, werden die nachfolgenden Elemente in der horizontalen Navigationsleiste verdeckt. Wenn sie unten angezeigt wurden, war das für ein einzelnes Dropdown-Menü in Ordnung, aber wenn sich darunter eine zweite Ebene befindet, würde diese zweite Ebene den Rest der ersten Ebene verdecken. Die Lösung besteht darin, das Menü unten und etwas nach rechts geöffnet zu haben, siehe Option "Position" im Menü Aufruf.

<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