2012-08-09 12 views
11

私はスケルトンのフレームワークを持つスーパーフィッシュドロップダウンメニューを使用しています。私はそれも携帯電話で動作するようにしたかった。デフォルトでは、ドロップダウン項目を表示しますが、その下にある項目にカーソルを移動します。私はそれを下に親アイテムを押し込むようにしたいと思っています。どんな解決策ですか?スーパーフィッシュドロップダウンメニューを反応させるには?

答えて

8

更新: は、ドロップダウンメニューは、モバイルでうまく機能しない

ライアン・ブラケット・によって答えを参照してください。私はスーパーフィッシュのメニューをモバイル上に隠し、何か他のものに置き換えることを提案します。

資源:キャンバスオフ

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メニューをモバイルデバイス上で動作させました。

29

は、ここで私が応答引き出しメニューに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>

+1

良い例。ここで直接ユーザーに私の答えを更新しました。 –

+0

2の代わりにメニューに3つのレイヤーを使用できますか? – Reshad

0

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

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"); 
    }); 

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

+0

ねえ、あなたは私たちのためにこれをJSfiddleできますか? –

0

Reshad:

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

そして、あなたは罰金になります。単純にこのようなあなたのCSSを変更します。

1

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

ここでのオプションを調べたところ、純粋なCSS対応のメニューが見つかりました。これはスーパーフィッシュよりも簡単で修正が簡単で、jqueryやjavascriptのオーバーヘッドはありません。第2レベルのメニューもあります。

私はthe demoをscreenflyでチェックし、応答性とモバイルレイアウトを確認してから使用しました。 CSSscript.comのバージョン(上のリンク)は、codepenのデモページとは異なり、モバイル向けの水平応答レイアウトを提供します。

Pure Responsive CSS menu

mobile view from screenfly, 320px wide

コードを使用すると、簡単にリンクされたCSSファイルに分割することができ、単一のHTMLファイル内にある、唯一の2メディアクエリは、最小限の変更のみで、その後も応答性の変化を管理し。 '+'記号は問題なく削除できます。

最初のリンクはHTMLをダウンロードします。下部にJavaScriptタグが付いています。明らかにGoogleアナリティクストラッキングを追加し、簡単に削除してcodepenには追加しません。

Explanationauthor andor nagy - code from codepen

/* CSS Document */ 
 

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

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

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

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

 
h3 a { 
 
\t color: #FFF; 
 
} 
 

 
a { 
 
\t color: #FFF; 
 
} 
 

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

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

 
p { 
 
\t 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%; 
 
} \t 
 

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

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

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

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

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

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

 
\t 
 
/* 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> 
 
      \t <!-- 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>

+0

これは、完全に「純粋なCSS」ドロップダウンメニューから始まり、それを強化するスーパーフィッシュメニューのポイントを誤解しています。 – DisgruntledGoat

+0

デモのcssとhtmlを作業に適したレイアウトで含める必要があります。応答しないコードがありません – Toskan

+0

情報をありがとう - スーパーフィッシュに関する特定の質問に答えるだけです。 –

関連する問題