11
我正在使用skelton框架的superfish下拉菜單。我希望它也能在手機上工作。默認情況下，它顯示下拉項目，但它懸停在它下面的項目上。我希望以某種方式將它推到它下面。任何解決方案如何使superfish下拉菜單響應？
A
回答
8
更新： 由Ryan布拉克特看到答案
下拉菜單上不移動很好地工作。我會建議在手機上隱藏superfish菜單，並用其他東西替換它。
資源： 關帆布
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
這裏有一個更好的答案
我能爲快魚相同的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");
});
替換「菜單是」與你的導航鏈接和第二後這個片段將導航用戶點擊的網站點擊並且第一次點擊只會顯示他的子頁面。
+0
嘿，夥計，JS你可以幫我們解決這個問題嗎？ – 2014-09-02 17:52:16
0
Reshad：只要改變你的CSS是這樣的：
.xpopdrop > ul {
display: block!important;
}而且你將被罰款。
1
正如Ed指出的那樣，爲響應式菜單解決所有不同的superfish/css問題似乎存在問題。
通過瀏覽這裏和其他地方的選項後，我發現了一個純CSS響應菜單，它比superfish更快，更容易修改，並且沒有jquery或javascript的開銷。它也有二級菜單。
我使用screenfly檢查了the demo以在使用之前檢查響應性和移動佈局。與codepen演示頁面不同，CSSscript.com版本（上面的鏈接）爲移動設備提供了水平響應佈局。
的代碼中，你可以很容易地分割成一個鏈接CSS文件一個HTML文件中，只有2個媒體查詢時僅以最小變動管理響應變化，即使這樣。 '+'符號可以被刪除而沒有問題。
只有一個小小的缺點：第一個鏈接下載一個HTML在底部添加了一個javascript，添加了明顯的谷歌分析跟蹤，很容易刪除，而不是在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
這完全誤解了Superfish菜單，它本身從「純CSS」下拉菜單開始，並對其進行了增強。 – DisgruntledGoat 2017-05-03 12:29:23
+0
您應該在工作響應式佈局中包含演示的CSS和HTML。不是沒有反應的codepen – Toskan 2017-07-11 00:22:54
+0
感謝您的信息 - 只是迴應有關Superfish的具體問題。 – 2017-12-14 18:37:50
相關問題
- 1. 想要使Superfish垂直菜單響應
- 2. Drupal 7.14 + Superfish菜單+下拉不工作
- 3. 在IE9中Superfish下拉菜單問題
- 4. 點擊顯示Superfish下拉菜單
- 5. Superfish子菜單文本和右側下拉菜單的定位
- 6. 淡入爲背景色（按鈕）和下拉菜單SUPERFISH菜單
- 7. 如何修復使用CSS的響應下拉菜單？
- 8. 如何使選擇下拉菜單響應輸入框
- 9. 如何使用JS創建響應下拉菜單？
- 10. JQuery響應下拉菜單問題
- 11. 響應下拉菜單定位
- 12. HTML，CSS，JS響應下拉菜單
- 13. 下拉漢堡菜單響應
- 14. onClick下拉菜單響應網站
- 15. CSS菜單響應下拉寬度
- 16. 全寬響應下拉菜單
- 17. 如何使下拉菜單
- 18. superfish菜單jquery
- 19. 如何使css下拉菜單中的一個下拉菜單
- 20. 下拉菜單會影響其他下拉菜單
- 21. Superfish下拉問題
- 22. JavaScript不起作用在下拉菜單響應菜單欄
- 23. 如何添加移動響應固定下拉菜單
- 24. superfish垂直菜單
- 25. UI.tabs與Superfish菜單
- 26. Superfish下拉菜單在IE7中不起作用
- 27. Superfish風格的下拉菜單不會在IE中顯示
- 28. 在IE6中沒有顯示的Superfish下拉菜單
- 29. 將水平Superfish菜單轉換爲小屏幕上的下拉菜單
- 30. Wordpress標題中的Superfish菜單在下拉菜單上創建滾動條
很好的例子。更新了我的答案，以指導用戶。 – 2013-04-16 15:30:44
是否可以使用3層菜單而不是2層？ – Reshad 2014-09-01 09:49:19