如何讓superfish下拉菜單響應？

Question

我正在使用帶有skelton框架的superfish下拉菜單。 我希望它也適用於手機。 默認情況下，它會顯示下拉項，但會將鼠標懸停在其下方的項目上。 我想以某種方式讓它在它下方推送父項。 有解決方案嗎

Answer 1

這是一個更好的答案

我能夠將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> 

Answer 2

更新：請參閱Ryan Brackett的回答

下拉菜單在移動設備上無效。 我建議在移動設備上隱藏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菜單適用於移動設備。

Answer 3

正如Ed指出的那樣，為響應式菜單解決所有不同的superfish / css問題似乎存在問題。

在查看了這里和其他地方的選項后，我發現了一個Pure CSS響應菜單，它比superfish更快更容易修改，並且沒有jquery或javascript的開銷。 它還有二級菜單。

我使用screenfly檢查了演示 ，以便在使用之前檢查響應性和移動布局。 與codepen演示頁面不同，CSSscript.com版本（上面的鏈接）為移動設備提供了水平響應式布局。

代碼位於單個HTML文件中，您可以輕松地將其拆分為鏈接的CSS文件，只有2個媒體查詢可以管理響應式更改，即使只有最小的更改。 可以刪除“+”符號而不會出現問題。

只有一個微小的缺點：第一個鏈接下載HTML底部有一個javascript，添加了明顯的谷歌分析跟蹤，輕松刪除，而不是在codepen上。

解釋 作者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> 

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

將“.menu a”替換為您的導航鏈接，此片段將在第二次點擊后將用戶導航到點擊的網站，第一次點擊只會向他顯示子頁面。

Answer 5

Reshad：簡單地改變你的CSS：

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

你會沒事的。