Question

我已经实现了JavaScript插件from，但似乎无法弄清楚如何将下拉按钮变成汉堡包....有没有人成功完成此操作？

我的HTML：

<!DOCTYPE html>
<html>
<head>
<script src="scripts/responsive-nav.js"></script>
</head>

<body>
<div id="container">
    <!-- <div id="main-content">-->
        <div id="main-col">

            <nav class="nav-collapse">
                <ul>
                    <li><a href="menu-1.html">MENU</a></li>             
                    <li><a href="catering.html">CATERING</a></li> 
                    <li><a href="gallery.html">GALLERY</a></li>
                    <li><a href="about.html">ABOUT</a></li>
                </ul>
            </nav>  
<script>
    var nav = responsiveNav(".nav-collapse", { // Selector
        animate: true, // Boolean: Use CSS3 transitions, true or false
        transition: 284, // Integer: Speed of the transition, in milliseconds
        label: "MENU", // String: Label for the navigation toggle
        insert: "after", // String: Insert the toggle before or after the navigation
        customToggle: "", // Selector: Specify the ID of a custom toggle
        closeOnNavClick: false, // Boolean: Close the navigation when one of the            links are clicked
        openPos: "relative", // String: Position of the opened nav, relative or static
        navClass: "nav-collapse", // String: Default CSS class. If changed, you need            to edit the CSS too!
        navActiveClass: "js-nav-active", // String: Class that is added to  element             when nav is active
        jsClass: "js", // String: 'JS enabled' class which is added to  element
        init: function(){}, // Function: Init callback
        open: function(){}, // Function: Open callback
        close: function(){} // Function: Close callback
    });
</script>

</body>

</html>

和随附的css ..

/*! responsive-nav.js 1.0.36 by @viljamis */

.nav-collapse ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}

.nav-collapse li {
width: 100%;
display: block;
}

.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
 zoom: 1;
}

.nav-collapse.opened {
max-height: 9999px;
}

.nav-toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-left: 83%;
}

@media screen and (min-width: 40em) {
.js .nav-collapse {
position: relative;
}
.js .nav-collapse.closed {
max-height: none;
}
.nav-toggle {
display: none;
}
}

使用汉堡包而不是文本作为下拉菜单创建响应式导航

0 个答案: