Question

大家下午好！

我会使用来自this site的插件在响应式菜单中传输我的普通菜单。

我的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>

我的CSS：

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

http://imgur.com/9SvgHq8,TRejRA3,pjguDJz#0

1.Picture：结果（超过760px）

2.Picture：如果屏幕尺寸低于760px，我想要这个结果

第3。图片：按下菜单按钮

我希望你明白我想要的东西，可以帮助我使用这个插件或者解释我如何使用它，我将非常感激所有帮助我会得到:) 谢谢你的帮助，请原谅我糟糕的英语。

感激，尼可

Answer 1

首先，为了实现这一点，我在标题的顶部添加了一个隐藏的响应式菜单。我知道它是现有导航菜单的副本（具有不同的CSS tho），并且有些人可能认为这很糟糕，但有时，如果它很愚蠢但有效，我没有看到任何错误。

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

在样式表中，为了隐藏主导航菜单并显示我们的触发按钮，我添加了一个简单的Media-Query来检查屏幕大小是否低于775px。

最后，为了切换响应式菜单，我们使用一个简单的jquery点击事件，一些'CSS Classes'验证和一些CCS3标记。如果单击该按钮，我们会在触发按钮上添加一个“活动”类，并在响应式菜单中添加一个“打开”类。在第二次单击触发器时，如果打开了响应式菜单，则删除触发器的“活动”类并删除“打开”类。 Open类包含我们所有的CSS3过渡标记，以平滑地显示响应式菜单的内容。

Here is a working example

以下是完整的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：

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

使用ResponsiveNav-Plugin需要帮助

1 个答案: