如何让superfish下拉菜单响应？

时间：2012-08-09 15:30:03

标签： javascript jquery html css responsive-design

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

5 个答案:

答案 0 :(得分：31)

这是一个更好的答案

我能够将Superfish的相同HTML转换为响应式抽屉菜单。 JS非常简单，整个过程基本上都是使用CSS完成的。看看它，让我知道你们的想法！

＆＃13;
＆＃13; 
// TRIGGER ACTIVE STATE
$('#mobnav-btn').click(

  function() {
    $('.sf-menu').toggleClass("xactive");
  });



// TRIGGER DROP DOWN SUBS
$('.mobnav-subarrow').click(

  function() {
    $(this).parent().toggleClass("xpopdrop");
  });
＆＃13; 
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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：9)

<强>更新 请参阅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菜单适用于移动设备。

答案 2 :(得分：1)

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

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

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

Pure Responsive CSS menu

mobile view from screenfly, 320px wide

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

只有一个微小缺点：第一个链接下载HTML底部有一个javascript，添加了明显的谷歌分析跟踪功能，可以轻松删除，而不是代码集。

Explanation author 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 {
	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>

答案 3 :(得分：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”替换为您的导航链接，此片段将在第二次点击后将用户导航到点击的网站，第一次点击只会向他显示子页面。

答案 4 :(得分：0)

转发：只需更改您的CSS：

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

你会没事的。

相关问题
最新问题