0

css と jquery は初めてで、メニュー項目に問題があります。Jquery メガ メニューがあり、弁護士プロファイル メニュー項目を現在の 2 行ではなく 1 行にしたいと考えています。通常、私はコードを投稿しますが、多すぎます。ということで、実際に動いているサイトへのリンクを貼っておきます。

全角を追加しようとしましたが、成功しませんでした。

$(document).ready(function($){
    $('#mega-menu-tut').dcMegaMenu({
        rowItems: '1',
        speed: 'fast'
        fullWidth: true
  });
 });

ここでCSSを変更しようとしました： 

.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
     float: left; /* Float the sub-menus and give them a fixed width to from the mega menu    rows */
     width: 130px; 
     height: 165px;
     margin: 0 2px 7px 2px;
     border: 3px solid #ccc;
}

しかし、それは実際の内部メニューを変更するだけです。

ここにアクティブなサイトがあります: http://gdisinc.com/barker/default.php

Attorney Profiles の上にマウスを移動すると、2 つの行が表示されることに注意してください。960px のサイトの幅に一致する 1 行を作成するにはどうすればよいですか。ありがとうございました！

PS: このメニュー システムを使用しました: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/

4

2 に答える 2

1

このスタイルのパディングを変更できます

.dcjq-mega-menu ul.menu li a

に

padding:12px 20px;

の要素には、そのコンテンツに基づいた幅があるため、ナビゲーション アイテムの font-size を小さくすることも同様に機能します。このような問題の修正は、Chrome の Web Inspector / Firefox の Firebug などを使用して簡単に見つけることができます。

お問い合わせタブの後の小さな仕切りも無い方が良いかもしれません。次のように :last-child クラスを追加することで、これを実現できます。

.dcjq-mega-menu ul.menu li:last-child a { background:none; }

問題は、ここでの CSS セレクターがあまり読みにくく、後で非常に厄介な問題につながる可能性があることです。可能であれば、そのような長い宣言を常に単一のクラスに変更してください。

.last-menu-item { background:none; }

同様に、:last-child は Internet Explorer < 9 ではサポートされていないことに注意して ください。 http://caniuse.com/#search=last-child

CSSの世界へようこそ... :)

于 2012-08-29T17:19:58.147 に答える
0

ここで「rowitems」オプションを変更する必要があるようです：

$(document).ready(function($){
  $('#mega-menu-tut').dcMegaMenu({
    rowItems: '3',
    speed: 'fast'
  });
});

'5' に変更すると、すべてのアイテムが同じ行に表示されます。例を見てみましょう:

http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/

メニューを MegaMenu の個別のインスタンスに分割しない限り、メニュー項目ごとにこの効果を構成する方法はないようです。

于 2012-08-29T17:10:29.750 に答える