Javascript 需要使用ResponsiveNav插件的帮助吗_Javascript_Jquery_Html_Css_Responsive Design

Javascript 需要使用ResponsiveNav插件的帮助吗

javascript jquery html css responsive-design

Javascript 需要使用ResponsiveNav插件的帮助吗,javascript,jquery,html,css,responsive-design,Javascript,Jquery,Html,Css,Responsive Design,大家下午好我会将我的普通菜单与插件从一个响应菜单我的HTML: <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc

大家下午好

我会将我的普通菜单与插件从一个响应菜单

我的HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="site.css">
        <script src="js/libs/jquery/jquery.js"></script>
    </head>
    <body>
        <div class="page-wrapper">
            <header>
                <div>

                </div>
                <div class="header">
                    <div class="logo">L</div>
                    <nav>
                        <ul>
                            <li>Link4</li>
                            <li>Link3</li>
                            <li>Link2</li>
                            <li>Link1</li>
                        </ul>
                    </nav>
                </div>
            </header>

            <div class="content">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </div>
        </div>
    </body>
</html>

body{
    margin: 0;
    padding: 0;
    background-color: rgba(120, 160, 100, 0.7);
}


header{
    position: fixed;
    top: 0px;
    width: 100%;

}

.header{
    position: fixed;
    height: 110px;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
}


.logo{
    font-size: 3.5em;
    color: rgb(0, 0, 0);
    padding: 20px;
    margin-left: 20px;
    float: left;
    -webkit-box-sizing: border-box;
}



nav{
    margin-right: 20px;
}

ul{
    list-style: none;
    margin: 0;
}

li{
    color: white;
    margin-top: 0px;
    float: right;
    height: 110px;
    width: 150px;
    padding-top: 50px;
    text-align: center;
    margin-left: 3px;
    background-color: rgba(0, 0, 0, 0.7);
    display: inline;
    -webkit-box-sizing: border-box;

    font-size: 20px;

}

.content{
    z-index: 1;
    margin: 180px 300px 0px 300px;
}

1.图片：结果（超过760像素）

2.图片：如果屏幕大小小于760像素，我想要这个结果

3。图片：按下菜单按钮

我希望你能理解我想要什么，并能帮助我使用这个插件，或者向我解释如何使用它，我将非常感谢所有我能得到的帮助：）谢谢你的帮助，原谅我英语不好

谢谢，尼科首先，为了实现这一点，我在标题顶部添加了一个隐藏的响应菜单。我知道它是现有导航菜单的复制品（使用不同的CSS tho），有些人可能会认为这很糟糕，但有时，如果它很愚蠢但有效，我看不出这样做有什么错

接下来，我添加了一个响应菜单触发器。此伪链接/按钮将切换菜单内容的显示

在样式表中，为了隐藏主导航菜单并显示触发器按钮，我添加了一个简单的媒体查询，检查屏幕大小是否小于775px

最后，为了切换响应菜单，我们使用了一个简单的jquery单击事件、一些“CSS类”验证和一些CCS3标记。如果单击按钮，我们将向触发器按钮添加一个“活动”类，并向响应菜单添加一个“打开”类。第二次单击触发器时，如果响应菜单已打开，请删除触发器的“活动”类并删除“打开”类。Open类包含我们所有的CSS3转换标记，以平滑地显示响应菜单的内容

以下是完整的HTML：

<!DOCTYPE html>
<html lang="">
    <head>
        <title>Title Page</title>
        <meta charset="UTF-8">
        <meta name=description content="">      
        <link rel="stylesheet" href="assets/responsive-nav.css" />
        <link rel="stylesheet" href="assets/style.css" />
        <script src="assets/jquery-1.11.1.min.js"></script>
        <script>
            $(function(){
                 $('.rsp-toggle').click(function(){

                    if(!$(this).hasClass('active')){
                        $(this).addClass('active');
                        $('.rsp-menu').addClass('menu-opened');
                    }
                    else{
                        $(this).removeClass('active');
                        $('.rsp-menu').removeClass('menu-opened');
                    }
                        //stops the browser from jumping to the 
                        //current location, as indicated by the href="#"
                        return false;
                 });
            });
        </script>
    </head>
    <body>

        <div class="page-wrapper">
            <!-- Hidden responsive menu -->
            <div class="rsp-menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <header>
                <div class="logo">
                    <a href="#">L</a>
                    <!-- Hidden responsive toggle button -->
                    <a class="rsp-toggle" href=""></a>
                </div>
                <!-- Main Nav -->
                <nav class="nav-menu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>

            <div class="content">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </div>
        </div>
    </body>
</html>

首先，你下载了插件并试用了吗？文档非常简单。想法是一步一步走。以原始形式实现插件。然后，你可以开始定制CSS，使其与你的设计融为一体是的，我下载了插件并试用了它。。但是我得到的结果是：我不知道如何用这个插件来设计菜单。注意，有时候一个插件可能会与你的设计冲突，并且不太可能正常工作并适应它。有时，您可以通过自定义编码来实现所需的结果。我从来都不是一个逃避挑战的人，而且我还需要一些CSS3过渡动画方面的培训。我编写了一个简单的代码，它的功能与插件完全相同，但简化了。我不得不重新安排一下你的CSS和html，但没那么复杂。你能给我发新的html和CSS代码吗？@Nico愉悦是我的。如果您需要更多信息，请随时询问。不要忘记将答案标记为已接受，只要它解决了您的问题，即isI有一些问题，您为什么使用迷你jquery库？css中打开的菜单中的“最大高度”属性是什么？在你的例子中，你不使用插件中的responsive.js，你只使用插件中的css，这个responsisve菜单和原来的responsive.js插件中的一样好吗？我希望你能帮助我回答我的问题，谢谢尼科：）@nico这是你问题的答案。1）缩小JQuery：压缩的缩小文件节省了带宽，提高了生产性能。较小的文件大小意味着一旦你的网站上线，你会希望它加载得尽可能快，所以这就是这个压缩版本的用武之地@Nico 2）Max height属性：对我的CSS做了一点修改，我将height属性添加到了“.rsp menu”中。CSS中的“最大高度”属性用于设置指定元素的最大高度。它将覆盖“高度”属性。这意味着，如果已声明最大高度，则必须始终声明高度。这样，首先，最大高度为0，高度为172px。0覆盖172，因此不显示菜单。一旦添加了菜单打开类，max height 300就会覆盖0，因此在@Nico 3“你不使用responsive.js”时菜单是可见的：事实上，我甚至没有使用插件的CSS，这都是定制的，并且编码为完全（或几乎）像插件一样。我从零开始，一步一步地模拟插件，或者应该说，模拟你想要的动画，但是以一种更加用户友好的方式。我想我可以说它和插件一样好。我发现它更容易适应你的设计和html比实际的插件，谁的CSS文件与你的冲突。我希望这些能回答你的问题

body{
    margin: 0;
    padding: 0;
    background-color: rgba(120, 160, 100, 0.7);
}


header{
    position: relative;
    width: 100%;
    clear: both;
    display: block;
    background: #FFF;
    height: 110px;
}

.logo{
    font-size: 3.5em;
    color: rgb(0, 0, 0);
    padding: 20px;
    margin-left: 20px;
    -webkit-box-sizing: border-box;
    display: inline-block;
    float: left;
}

nav{
    margin-right: 20px;
}

.nav-menu ul{
    list-style: none;
    margin: 0;
}

.nav-menu ul li{
    margin-top: 0px;
    float: right;
    height: 110px;
    width: 150px;
    padding-top: 50px;
    text-align: center;
    margin-left: 3px;
    background-color: rgba(0, 0, 0, 0.7);
    display: inline;
    -webkit-box-sizing: border-box;
}

.nav-menu ul li a {
    font-size: 20px;
    color: #FFF;
    text-decoration: none;
}

.content{
    z-index: 1;
    margin: 180px 300px 0px 300px;
}

.nav-menu{
    display: inline-block;
    float: right;
}

.rsp-menu{
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 172px;
    max-height: 0px;
    -webkit-transition: max-height 500ms ease-in;
    -moz-transition: max-height 500ms ease-in;
    -o-transition: max-height 500ms ease-in;
    transition: max-height 500ms ease-in;
}

.rsp-menu ul{
    width: 100%;
    margin: 0;
    padding: 0;
}

.rsp-menu ul li{
    width: 100%;
    display: inline-block;
    background: rgba(0, 0, 0, 0.7);
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
}

.rsp-menu ul li a{
    color:#FFF;
    font-size: 20px;
    display: block;
    text-decoration: none;
}

.rsp-menu ul li:hover{
    background: rgba(83, 83, 83, 0.7);
    -webkit-transition: background 500ms ease;
    -moz-transition: background 500ms ease;
    -o-transition: background 500ms ease;
    transition: background 500ms ease;
}

.menu-opened{
    max-height: 300px;
    -webkit-transition: max-height 500ms ease-out;
    -moz-transition: max-height 500ms ease-out;
    -o-transition: max-height 500ms ease-out;
    transition: max-height 500ms ease-out;
}

.rsp-toggle{
    text-decoration: none;
    text-indent: -999px;
    position: relative;
    overflow: hidden;
    width: 70px;
    height: 55px;
    float: right;
    display: none;
}

.rsp-toggle:before {
  color: rgba(0, 0, 0, 0.7); /* Edit this to change the icon color */
  font-family: sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 30px;
  text-transform: none;
  position: absolute;
  content: "≡";
  text-indent: 0;
  text-align: center;
  line-height: 55px;
  speak: none;
  width: 100%;
  top: 0;
  left: 0;
}


.rsp-toggle.active::before {
  font-size: 30px;
  content:"x";
}

/*MEDIA QUERY*/
@media only screen and (max-width : 775px) {
    .nav-menu{
        display: none;
    }

    .rsp-toggle{
        display: block;
    }

    .logo{
        display: block;
        float: none;
    }
}