11
私はスケルトンのフレームワークを持つスーパーフィッシュドロップダウンメニューを使用しています。私はそれも携帯電話で動作するようにしたかった。デフォルトでは、ドロップダウン項目を表示しますが、その下にある項目にカーソルを移動します。私はそれを下に親アイテムを押し込むようにしたいと思っています。どんな解決策ですか？スーパーフィッシュドロップダウンメニューを反応させるには？
A
答えて
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>
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のデモページとは異なり、モバイル向けの水平応答レイアウトを提供します。
コードを使用すると、簡単にリンクされた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
情報をありがとう - スーパーフィッシュに関する特定の質問に答えるだけです。 –
関連する問題
- 1. ）は（ネイティブPixelRatio.getを反応させる反応させネイティブドキュメントに基づいネクサス5X
- 2. ヘッダーを反応させるには？
- 3. divを反応させる
- 4. マージンボトムを反応させる
- 5. フォームを反応させる
- 6. テーブルを反応させる
- 7. トラブルはReduxのでロックの例を反応させ、反応させ、ネイティブ
- 8. 反応するNavbarを反応させる
- 9. 要素から反応する成分を反応させる
- 10. JavaScriptキャンバスゲームをCSS3に反応させる
- 11. テーブルを完全に反応させる
- 12. ボットをスラックで入ってくるウェブフックメッセージに反応させる/反応させる方法は？
- 13. -tagsinputを反応させると反応し、オートサジェスト＆ES5
- 14. 身体の反応を反応させる
- 15. 反応するネイティブ・ナビゲーションを反応させ、ネイティブ歩哨iosで
- 16. これにslidetoggleと反応させる
- 17. は、コンポーネントを反応させるの反応-CSS-モジュールを使用して
- 18. TypeScriptにオブザーバを反応させて
- 19. は起動しませサーバーに反応 - 私はアプリを反応させ、ここで私のサーバーコードでいるrenderProps
- 20. 増補反応し、ルータモジュールを反応させ、ルータ中継タイピングで
- 21. コンポーネント間でアニメーションの反応を反応させよう
- 22. ブートストラップ画像に応じてテキストを反応させる方法
- 23. コンテンツをオーバーレイして反応させる
- 24. メニューを反応させる - フレックス
- 25. jqueryスライダを反応させる
- 26. このdivを反応させる
- 27. 画像位置を反応させる？
- 28. モバイルでカルーセルサムネイルを反応させる
- 29. ブートストラップコルサールを反応させる方法
- 30. pxでボタンを反応させる
良い例。ここで直接ユーザーに私の答えを更新しました。 –
2の代わりにメニューに3つのレイヤーを使用できますか？ – Reshad