Javascript 如何使超级鱼下拉菜单响应？

Question

提问by user1433900

I am using superfish dropdown menu with skelton framework. I wanted it to work on mobiles as well. By default its showing the dropdown items but it hover over the items below it. I wants to have it in a way so that it push parent items below it. Any solution?

我正在使用带有 skelton 框架的 superfish 下拉菜单。我希望它也适用于手机。默认情况下，它显示下拉项目，但将鼠标悬停在其下方的项目上。我想以某种方式拥有它，以便将父项推到其下方。有什么解决办法吗？

Answer 1

采纳答案by Ed Charbeneau

Update:See the answer by Ryan Brackett

更新：请参阅 Ryan Brackett 的回答

Dropdown menus don't work well on mobile. I would suggest hiding the superfish menu on mobile and replacing it with something else.

下拉菜单在移动设备上效果不佳。我建议在移动设备上隐藏超级鱼菜单并用其他东西替换它。

Resources: Off canvas

资源： 画布外

http://www.lukew.com/ff/entry.asp?1569

http://www.zurb.com/playground/off-canvas-layouts

Mobile navigation patterns

移动导航模式

http://bradfrostweb.com/blog/web/responsive-nav-patterns/

For others looking for a solution, make sure you are using the newest jQuery. I had some older sites where I found using a newer version of jQuery made the Superfish menus work on mobile devices.

对于正在寻找解决方案的其他人，请确保您使用的是最新的 jQuery。我在一些较旧的网站上发现使用较新版本的 jQuery 使 Superfish 菜单在移动设备上工作。

Answer 2

回答by Ryan Brackett

Here's a better answer

这是一个更好的答案

I was able to convert the same HTML for Superfish into a responsive drawer menu. The JS is ultra simple and the whole thing is basically done using CSS. Check it out and let me know what you guys think!

我能够将 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>

Answer 3

回答by Mousey

As Ed pointed out it seems problematic to solve all the different superfish/css issues for a responsive menu.

正如 Ed 指出的那样，为响应式菜单解决所有不同的 superfish/css 问题似乎有问题。

After looking through the options here and elsewhere I found a Pure CSS responsive menu which has been quicker and easier to modify than superfish, and does not have the overheads of jquery or javascript. It also has second level menus.

在浏览了这里和其他地方的选项后，我发现了一个纯 CSS 响应式菜单，它比 superfish 更快、更容易修改，并且没有 jquery 或 javascript 的开销。它还具有二级菜单。

I checked the demowith screenfly to check responsiveness and mobile layout before using it. The CSSscript.com version (link above) gives a horizontal responsive layout for mobiles, unlike the codepen demo page.

在使用之前，我使用 screenfly检查了演示以检查响应性和移动布局。与 codepen 演示页面不同，CSSscript.com 版本（上面的链接）为移动设备提供了水平响应式布局。

The code is in a single HTML file which you can easily split into a linked CSS file, only 2 media queries manage the responsive changes and even then only with minimal changes. The '+' symbols can be deleted without issues.

代码位于一个 HTML 文件中，您可以轻松地将其拆分为链接的 CSS 文件，只有 2 个媒体查询管理响应式更改，即使更改也很少。可以毫无问题地删除“+”符号。

Only one tiny downside: the first link downloads a HTML has a javascript at the bottom adding obvious google analytics tracking, easily removed and not on codepen.

只有一个小缺点：第一个链接下载一个 HTML，底部有一个 javascript，添加了明显的谷歌分析跟踪，很容易删除，而不是在 codepen 上。

Explanation author andor nagy - code from 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

回答by Simon Schneider

This is what I use:

这是我使用的：

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

Replace ".menu a" with your navigation links and this snippet will navigate the user to the clicked site after the second click and the first click will only show him the subpages.

将“.menu a”替换为您的导航链接，此代码段将在第二次点击后将用户导航到点击的站点，而第一次点击只会向他显示子页面。

Answer 5

回答by user873162

Reshad: Simply change your CSS like this:

Reshad：只需像这样更改您的 CSS：

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

And you will be fine.

你会没事的。

Javascript 如何使超级鱼下拉菜单响应？

提问by user1433900

采纳答案by Ed Charbeneau

回答by Ryan Brackett

回答by Mousey

回答by Simon Schneider

回答by user873162

相关推荐

最近更新

标签

Javascript 如何使超级鱼下拉菜单响应？

提问by user1433900

采纳答案by Ed Charbeneau

回答by Ryan Brackett

回答by Mousey

回答by Simon Schneider

回答by user873162

相关推荐

Javascript JQuery：如何遍历 div 的所有子元素

Javascript 如何从对象 URL 获取文件或 blob？

Javascript 如何安全地包装`console.log`？

Javascript 如何更改 iframe src？

相关推荐

最近更新

标签