0

我正在尝试创建一个响应式导航菜单，该菜单会在窗口大小缩小时缩小。我已经让它在 jquery 和 css 中工作，但它在移动设备上很慢，我读到最好只用 CSS 编写代码，但我还没有找到解决方案。这是我目前拥有的 jquery、html 和 css。任何帮助表示赞赏

jQuery代码：

    $(function() {
    var menu        = $('#top_menu');
        menu        = $('nav ul');
        menuHeight  = menu.height();

    $(top_menu).click(function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 720 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

HTML 代码：

        <nav>
            <ul>
                <li><a href="<?php bloginfo('url'); ?>/forum">Forums</a></li>
                <li><a href="<?php bloginfo('url'); ?>/aboutus">About Us</a></li>
                <li><a href="<?php bloginfo('url'); ?>/Portfolio">Portfolio</a></li>
            </ul>
            <a href="#" id="top_menu">Menu</a>
        </nav>

CSS 代码：

    nav a#top_menu {
    display: block;
    background: url('../images/main_logo.png') no-repeat;
    background-position: 20px 17px;
    text-indent: -9999em;
    position: relative;
    width: 100%;
    border-bottom: 1px solid transparent;   
}

nav a#top_menu:hover {
    border-bottom: 1px solid #305f6d;
}

nav a#top_menu:after {
    content:"";
    background: url('../images/mini.png') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 15px;
}
4

1 回答 1

1

如果您想使用纯 CSS 来实现这一点，那么您真的应该看看 Navigataur ( https://coderwall.com/p/sujd_w )，它是一个纯 CSS 解决方案，而不是使用 jQuery。

设置如下：

  1. <head>在标签之间引用样式表，如下所示：
<html>
<head><link rel="stylesheet" type="text/css" href="navigataur.css"></head>
<body>
</body>
</html>
  1. 如果您的 css 文件中已使用以下任何元素名称，请编辑您的 CSS 元素的名称

要开箱即用，您需要对标记进行以下调整（如果您使用不同的东西，可以在样式表中更改类）：

  • <div>具有类的外部header
  • ID 为的 input[type=checkbox]toggle和 label[for=toggle] 的类toggle在列表菜单上方。
  • 具有类的列表菜单（ul 或 ol）menu

改变你的

  1. HTML 代码（可能的最简单示例）：
<input type='checkbox' id='toggle'/> <label for='toggle'
class='toggle'></label>
<ul class="menu">
    <li><a href="#">Google</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Youtube</a></li>
    <li><a href="#">Twitter</a></li> 
</ul>

就是这样，你完成了！

这是 Navigataur 的演示：http: //micjamking.github.com/Navigataur/

于 2013-04-25T01:15:36.380 回答