スケルトン フレームワークでスーパーフィッシュ ドロップダウン メニューを使用しています。モバイルでも動作するようにしたかったのです。デフォルトでは、ドロップダウン項目が表示されますが、その下の項目にカーソルを合わせます。親アイテムをその下にプッシュするようにしたいです。解決策はありますか？
質問する
37307 次
5 に答える
31
これがより良い答えです
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:ryanbrackett@gmail.com">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>于 2013-04-10T14:07:48.727 に答える
9
更新: Ryan Brackett による回答を参照してください
ドロップダウン メニューは、モバイルではうまく機能しません。モバイルでスーパーフィッシュ メニューを非表示にして、別のものに置き換えることをお勧めします。
リソース: オフキャンバス
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 メニューがモバイル デバイスで動作することがわかった古いサイトがいくつかありました。
于 2012-08-09T17:32:23.443 に答える
1
Ed が指摘したように、レスポンシブ メニューのさまざまな superfish/css の問題をすべて解決するには問題があるようです。
ここや他の場所のオプションを調べた後、スーパーフィッシュよりも迅速かつ簡単に変更でき、jquery や javascript のオーバーヘッドがない純粋な CSS レスポンシブ メニューを見つけました。セカンドレベルのメニューもあります。
使用する前に、応答性とモバイル レイアウトを確認するために screenflyでデモを確認しました。CSSscript.com バージョン (上のリンク) は、codepen のデモ ページとは異なり、モバイル向けの水平方向のレスポンシブ レイアウトを提供します。
コードは単一の HTML ファイルにあり、リンクされた CSS ファイルに簡単に分割できます。レスポンシブな変更を管理するのは 2 つのメディア クエリのみであり、その場合でも最小限の変更しかありません。「+」記号は問題なく削除できます。
小さな欠点が 1 つだけあります。最初のリンクをダウンロードすると、HTML の下部に JavaScript が追加され、明らかな Google アナリティクス トラッキングが追加されます。コードペンではなく、簡単に削除できます。
説明 作者 andor 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>于 2015-09-09T04:07:00.690 に答える
0
Reshad: CSS を次のように変更するだけです。
.xpopdrop > ul {
display: block!important;
}そして、あなたは元気になります。
于 2014-09-18T20:58:45.457 に答える
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」をナビゲーション リンクに置き換えると、このスニペットはユーザーを 2 回目のクリック後にクリックしたサイトに移動し、最初のクリックではサブページのみを表示します。
于 2013-09-11T13:27:54.297 に答える