46

私はjQueryUIのものが大好きです！

ナビゲーションメニューは好きですが、水平にできないようです。私は簡単なものを見逃している必要があります。

CSSを変更する方法を知っている人はいますか？私はこれを試しましたが、古いバージョン用であり、それらを互いに重ねておくための「明確な」ものがなくなったため、機能しません。

関連する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; }

助けてくれてありがとう！

4

11 に答える 11

28

CSSをハックしようとするのは嫌なので、メニューをメニューバーに変換するこれらすべての努力に感心しています。理解できない力に干渉しているような気がします！jqueryuiのmenubarブランチで利用可能なmenubarファイルを追加する方がはるかに簡単だと思います。

jqueryuiダウンロードサイトから完全なjqueryuicssバンドルファイルをダウンロードしました

ドキュメントの先頭に、すべてを含むjquery ui cssファイル（現在バージョン1.9.xを使用しています）の後に、jqueryuiのメニューバーブランチからダウンロードしたメニューバーウィジェットの特定のCSSファイルを配置します。

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

jQuery UIで使用されるすべての小さなアイコンが含まれるimagesフォルダーは、jquery-ui.cssファイルと同じフォルダーにある必要があることを忘れないでください。

そして最後に私が持っている体：

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

これは、jQueryの最新バージョンのコピー、jQuery UIファイルのコピー、jqueryuiのメニューバーブランチからダウンロードされたメニューバーモジュールの順です。

メニューバーのCSSファイルはすっきりと短くなっています。

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

しかし、メニューバーのJavaScriptファイルは328行です。ここで引用するには長すぎます。これを使用すると、次の例のようにmenubar（）を呼び出すことができます。

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

私が言ったように、私はそれを水平バーに変えるためにメニューオブジェクトをハックするすべての試みを賞賛します、しかし私はそれらのすべてが水平メニューバーのいくつかの標準的な機能を欠いていることに気づきました。このウィジェットがjQueryUIにバンドルされていない理由はまだわかりませんが、おそらくまだ解決すべきバグがいくつかあります。たとえば、IE 7のクァークズモードで試してみたところ、位置がおかしかったのですが、Firefox、Safari、IE8以降では見栄えがします。

于 2013-01-19T03:30:45.177 に答える
23

あなたはこれを行うことができます：

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

また、設定：

.ui-menu .ui-menu-item {
    display: inline-block;
    float: left;
    margin: 0;
    padding: 0;
    width: auto;
}
于 2012-10-17T22:33:01.627 に答える
16

この投稿は、jQueryuiメニューを試すように私を刺激しました。

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"}});
于 2013-04-11T07:37:51.093 に答える
5

私はちょうど3日間jqueryUIとCSSソリューションを探していました。私は見たいくつかのコードをマージし、少し修正し、最後に（他のコードと一緒に）それを機能させることができました！

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;
于 2015-05-08T18:02:01.300 に答える
4

メインの水平メニューのトピックにカーソルを合わせると、jquery-uiメニューが垂直ドロップダウンであると考えてください。このように、メインメニューのトピックごとに個別のjqueryuiメニューがあります。水平方向のメインメニューは、メインメニューdivにラップされたfloat：leftdivのコレクションです。次に、ホバーインとホバーアウトを使用して各メニューをポップアップします。

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

showSubmenu関数は単純です。サブメニューを配置して表示するだけです。

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

次に、カーソルがその上にある間はサブメニューが表示され、離れるとサブメニューが消えることを確認する必要があります（これはdocument.ready関数にあるはずです）。

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

また、最初にサブメニューを非表示にすることを忘れないでください-document.ready関数で

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

ここで完全なコードを参照してください

http://jsfiddle.net/R4nyn/

于 2013-06-28T13:34:56.243 に答える
3

私はstackoverflowに慣れていないので、よろしくお願いします:)ただし、水平jQuery uiメニューの問題に目を向けると、問題を解決するために管理できる唯一の方法（これを参照）は次のように設定することでした。

#nav li {width: auto; clear: none; float: left}
#nav ul li {width: auto; clear: none; float:none}
于 2012-12-04T11:13:35.300 に答える
3

ミハリスバゴスの答えに追加します。私は次のことをすることになりました：

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

これにより、トップレベルメニューは水平になりますが、サブメニューは垂直のままになります。

これはレイアウトを台無しにしていたので、私はアイコンを削除しなければなりませんでした

サブメニューの配置にも問題があるようです。

于 2012-12-11T21:12:58.973 に答える
2

これが古いスレッドであることは知っていますが、jQuery UIのソースコードを掘り下げて、探していたものに近いRowanの回答に基づいて構築していました。可能なサブメニューの視覚的なインジケーターを持つことが重要だと感じたので、私だけがニンジンを必要としていました。ソースコード（.jsと.cssの両方）を見て、デザイン（高さ）をいじることなくニンジンを表示できるようにし、メニューを親アイテムの下に垂直に表示できるようにすることを思いつきました。

jquery-ui.jsで検索を実行して、位置を見つけて次のよう$.widget( "ui.menu")に変更します。

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

そしてあなたのcssに追加してください：

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

最終結果は、jQuery UIメニューが水平になり、サブメニューが親メニュー項目の下に垂直に表示されます。

于 2013-01-17T19:42:44.063 に答える
2

変化：

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

あなたを始める必要があります。

于 2012-10-17T22:35:19.517 に答える
1

私が見つけた最良のオプションは、jMenuと呼ばれるプラグインです。

メイン： http
：//www.myjqueryplugins.com/jquery-plugin/jmenu デモ： http
：//demos.myjqueryplugins.com/jmenu/ GitHub： https ://github.com/alpixel/jMenu

スクリーンショット：
デモメニュー

于 2015-01-20T19:54:33.870 に答える
0

垂直ドロップダウンを備えた水平ナビゲーションバーを取得するには、テーブルと順序付けされていないリストの組み合わせを使用します。

レベル1の項目はテーブルセルで表され、後続のレベルは順序付けられていないリストで表されます。

子メニューの配置が問題でした。デフォルトでは、それらは直接横に表示されますが、最上位のアイテムにある場合は、水平ナビゲーションバーの後続のアイテムが不明瞭になります。それらを下に表示することは、単一のドロップダウンメニューでは問題ありませんが、下に2番目のレベルがある場合、その2番目のレベルは最初のレベルの残りを覆い隠します。解決策は、メニューを下とやや右側に開くことです。メニュー呼び出しの「位置」オプションを参照してください。

<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>
于 2013-02-20T06:20:49.720 に答える