0

こんにちは、私はうまく機能するレスポンシブ メニュー システムを持っていますが、URL の位置を別の方法で変更したいと考えています。まず、こちらのドロップダウン メニューを見てください。

http://jsfiddle.net/Et2HB/

実際には、メイン メニュー 1、メイン メニュー 2、およびメイン メニュー 3 を、www.example1.com 用、www.example2.com 用のようにリンクを分離する必要があります。 nav_sprite.png) jsfiddle の例では見つかりません。以下のクラスでそれを見ることができます

ul#menu li.hasChildren a > span {
  background: url(../images/nav_sprite.png);
  background-position: right 0px !important;
  background-repeat: no-repeat;
  background-size: 30px auto;
}

次のような別のアンカータグを追加しようとしました..そしてそのタグをfloat：leftに与え、ドロップダウン用の2番目のアンカータグと指定されたfloat：rightによって右側に幅55pxを追加しようとしました。しかし、それはすべて地獄のように崩壊します.....

<li><a href="http://www.example.com">Main Menu 1</a><a href="#" tabindex="1" accesskey="h">&nbsp;</a>
<ul>
....

これを解決するアイデアはありますか？

ありがとうポール

4

1 に答える 1

0

私はあなたを正しく理解したことを願っています。私のjsFiddleを見てください：

フィドル

秘訣は、 "li" 要素にposition: relative属性を与えることです。次に、dropdown-button-element を自由に配置できます。

CSS:

ul#menu li a.dropdownBtn {
    background-color: red;
    position: absolute;
    width: 30px;
    right: 0;
    top: 0;
}

HTML:

<ul id="menu" class="overthrow">
    <li><a href="#" tabindex="1" accesskey="h">Main Menu 1</a>
        <a class="dropdownBtn">v</a>
        <!-- etc etc -->
    </li>
</ul>

JS:

// change:
$('ul#menu li.hasChildren a').on('click', function() {
// to:
$('ul#menu li.hasChildren a.dropdownBtn').on('click', function() {

// and change:
if($(this).attr('class')=="hasChildrenActive"){
// to
if($(this).hasClass("hasChildrenActive")){

あとは、他のリンク タグの代わりに a.dropdownBtn を使用するように js コードを調整するだけです。

于 2012-11-19T22:27:21.707 に答える