スーパーフィッシュのドロップダウンメニューをレスポンシブにする方法は？

Question

スケルトンフレームワークでスーパーフィッシュのドロップダウンメニューを使用しています。モバイルでも動作するようにしたかったのです。デフォルトではドロップダウンアイテムが表示されますが、その下のアイテムにカーソルを合わせます。親アイテムをその下にプッシュするような方法でそれを持ちたいです。解決策はありますか？

Answer 1

更新：RyanBrackettによる回答を参照してください

ドロップダウンメニューはモバイルではうまく機能しません。モバイルでスーパーフィッシュメニューを非表示にして、別のものに置き換えることをお勧めします。

リソース：オフキャンバス

http://www.lukew.com/ff/entry.asp?1569

http://www.zurb.com/playground/off-canvas-layouts

モバイルナビゲーションパターン

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

解決策を探している他の人は、最新のjQueryを使用していることを確認してください。新しいバージョンのjQueryを使用すると、Superfishメニューがモバイルデバイスで機能することがわかった古いサイトがいくつかありました。

Answer 2

より良い答えがあります

Superfish用の同じHTMLをレスポンシブドロワーメニューに変換することができました。 JSは非常にシンプルで、すべてが基本的にCSSを使用して行われます。それをチェックして、皆さんの考えを教えてください！

// TRIGGER ACTIVE STATE
$('#mobnav-btn').click(

  function() {
    $('.sf-menu').toggleClass("xactive");
  });



// TRIGGER DROP DOWN SUBS
$('.mobnav-subarrow').click(

  function() {
    $(this).parent().toggleClass("xpopdrop");
  });

body {
  font-family: Arial;
  font-size: 12px;
  padding: 20px;
}
#mobnav-btn {
  display: none;
  font-size: 20px;
  font-weight: bold;
  background-color: blue;
  color: white;
  padding: 10px;
  cursor: pointer;
}
.mobnav-subarrow {
  display: none;
}
@media only screen and (max-width: 480px) {
  #mobnav-btn {
    display: block;
  }
  .mobnav-subarrow {
    display: block;
    background-color: #0f3975;
    opacity: .3;
    border-bottom: 1px solid white;
    border-top: 1px solid black;
    height: 20px;
    width: 30px;
    background-position: top left!important;
    position: absolute;
    top: 8px;
    right: 10px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
  }
  .sf-menu {
    width: 100%!important;
    display: none;
  }
  .sf-menu.xactive {
    display: block!important;
  }
  .sf-menu li {
    float: none!important;
    display: block!important;
    width: 100%!important;
  }
  .sf-menu li a {
    float: none!important;
  }
  .sf-menu ul {
    position: static!important;
    display: none!important;
  }
  .xpopdrop ul {
    display: block!important;
  }
}

<script src="http://code.jquery.com/jquery-compat-git.js"></script>
<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<link href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" rel="stylesheet" />
<small>This is a responsive Superfish Menu by <a href="mailto:[email protected]">Ryan Brackett</a>. <br/>
    <br/>In this demo, you can drag the middle bar to see the responsive menu. I have already included the default css and js files for Superfish</small>

<br/>
<br/>
<div id="mobnav-btn">Button</div>
<ul class="sf-menu">
  <li><a href="#">Item 1</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 1.1</a>

      </li>
      <li><a href="#">Subitem 1.2</a>

      </li>
      <li><a href="#">Subitem 1.3</a>

      </li>
      <li><a href="#">Subitem 1.4</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Item 2</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 2.1</a>

      </li>
      <li><a href="#">Subitem 2.2</a>

      </li>
      <li><a href="#">Subitem 2.3</a>

      </li>
      <li><a href="#">Subitem 2.4</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 3.1</a>

      </li>
      <li><a href="#">Subitem 3.2</a>

      </li>
      <li><a href="#">Subitem 3.3</a>

      </li>
      <li><a href="#">Subitem 3.4</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Item 4</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 4.1</a>

      </li>
      <li><a href="#">Subitem 4.2</a>

      </li>
      <li><a href="#">Subitem 4.3</a>

      </li>
      <li><a href="#">Subitem 4.4</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Item 5</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 5.1</a>

      </li>
      <li><a href="#">Subitem 5.2</a>

      </li>
      <li><a href="#">Subitem 5.3</a>

      </li>
      <li><a href="#">Subitem 5.4</a>

      </li>
    </ul>
  </li>
  <li><a href="#">Item 6</a>

    <div class="mobnav-subarrow"></div>
    <ul>
      <li><a href="#">Subitem 6.1</a>

      </li>
      <li><a href="#">Subitem 6.2</a>

      </li>
      <li><a href="#">Subitem 6.3</a>

      </li>
      <li><a href="#">Subitem 6.4</a>

      </li>
    </ul>
  </li>
</ul>

Answer 3

エドが指摘したように、レスポンシブメニューのさまざまなsuperfish/cssの問題をすべて解決するのは問題があるようです。

ここや他の場所のオプションを調べた後、superfishよりもすばやく簡単に変更でき、jqueryやjavascriptのオーバーヘッドがないPureCSSレスポンシブメニューを見つけました。また、第2レベルのメニューもあります。

使用する前に、screenflyで デモ をチェックして、応答性とモバイルレイアウトをチェックしました。 CSSscript.comバージョン（上記のリンク）は、codepenデモページとは異なり、モバイル向けの水平レスポンシブレイアウトを提供します。

コードは単一のHTMLファイルにあり、リンクされたCSSファイルに簡単に分割できます。レスポンシブな変更を管理するメディアクエリは2つだけで、それでも最小限の変更でしか管理できません。 「+」記号は問題なく削除できます。

小さな欠点が1つだけあります。最初のリンクでHTMLをダウンロードすると、下部にjavascriptが追加され、コードペンではなく簡単に削除できます。

説明作成者および/またはnagy-codepenからのコード

/* CSS Document */

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);

body {
        background: #212121;
        font-size:22px;
        line-height: 32px;
        color: #ffffff;
        Word-wrap:break-Word !important;
        font-family: 'Open Sans', sans-serif;
        }

h1 {
        font-size: 60px;
        text-align: center;
        color: #FFF;
}       

h3 {
        font-size: 30px;
        text-align: center;
        color: #FFF;
}

h3 a {
        color: #FFF;
}

a {
        color: #FFF;
}

h1 {
        margin-top: 100px;
        text-align:center;
        font-size:60px;
        font-family: 'Bree Serif', 'serif';
        }

#container {
        margin: 0 auto;
        max-width: 890px;
}

p {
        text-align: center;
}

#relatedContent {
  max-width: 800px;
  margin: 200px auto;
}

#relatedContent .item {
  max-width: 44%;
  padding: 3%;
  float: left;
  text-align: center;
}

#relatedContent .item a img {
  max-width: 100%;
}       

nav { 
        margin: 50px 0;
        background-color: #E64A19;
}

nav ul {
        padding:0;
        margin:0;
        list-style: none;
        position: relative;
        }
        
nav ul li {
        display:inline-block;
        background-color: #E64A19;
        }

nav a {
        display:block;
        padding:0 10px; 
        color:#FFF;
        font-size:20px;
        line-height: 60px;
        text-decoration:none;
}

nav a:hover { 
        background-color: #000000; 
}

/* Hide Dropdowns by Default */
nav ul ul {
        display: none;
        position: absolute; 
        top: 60px;
}
        
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
        display:inherit;
}
        
/* Fisrt Tier Dropdown */
nav ul ul li {
        width:170px;
        float:none;
        display:list-item;
        position: relative;
}

/* Second, Third and more Tiers */
nav ul ul ul li {
        position: relative;
        top:-60px; 
        left:170px;
}

        
/* Change this in order to change the Dropdown symbol */
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }

<div id="container">
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">WordPress</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Themes</a></li>
                <li><a href="#">Plugins</a></li>
                <li><a href="#">Tutorials</a></li>
            </ul>        
            </li>
            <li><a href="#">Web Design</a>
            <!-- First Tier Drop Down -->
            <ul>
                <li><a href="#">Resources</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">Tutorials</a>
                <!-- Second Tier Drop Down -->
                <ul>
                    <li><a href="#">HTML/CSS</a></li>
                    <li><a href="#">jQuery</a></li>
                    <li><a href="#">Other</a>
                        <!-- Third Tier Drop Down -->
                        <ul>
                            <li><a href="#">Stuff</a></li>
                            <li><a href="#">Things</a></li>
                            <li><a href="#">Other Stuff</a></li>
                        </ul>
                    </li>
                </ul>
                </li>
            </ul>
            </li>
            <li><a href="#">Graphic Design</a></li>
            <li><a href="#">Inspiration</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
  <h1>Pure CSS Drop Down Menu</h1>
<p> A simple dropdown navigation menu made with CSS Only. Dropdowns are marked with a plus sign ( + )</p>
<p>Read tutorial <a target="_blank" href="http://webdesignerhut.com/css-dropdown-menu/">here</a></p>
</div>

Answer 4

これは私が使用するものです：

    isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

$(".menu a").click(function(event){
        if($(this).parents("ul").length == 1 && !$(this).hasClass("lastClick") && isMobile)
            event.preventDefault();     

        $(".menu a").removeClass("lastClick");
        $(this).addClass("lastClick");
    });

「.menua」をナビゲーションリンクに置き換えると、このスニペットは2回目のクリック後にクリックされたサイトにユーザーをナビゲートし、最初のクリックではサブページのみが表示されます。

Answer 5

Reshad：CSSを次のように変更するだけです。

.xpopdrop > ul {
        display: block!important;
}

そして、あなたは大丈夫になります。