当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Need help by using the ResponsiveNav-Plugin

问题描述:

Good afternoon everybody!

I would transfer my normal menu in a responsive-menu with the Plugin from this site.

My 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>

My 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: Result (over 760px)

2.Picture: If the screen size is under 760px I want this result

3. Picture: Menu button pressed

I hope you understand what I want and can help me with this plugin or explain me how to use it, I would be grateful for all help I would get :)

Thanks for all your help and excuse my bad english.

Grateful, Nico

网友答案:

First of all, in order to achieve this, I added a hidden responsive menu at the top of the header. I know that it's a duplicate of the existing nav menu (with different CSS tho), and that some might view this as bad, but sometimes, if it's stupid but works, I don't see anything wrong by doing it.

Next, I added a Responsive menu trigger. This pseudo link/button will toggle the display of the menu content.

In the stylesheet, in order to hide the main nav menu and display our trigger button, I added a simple Media-Query that checks if the screen size is lower than 775px.

Finally, in order to toggle the responsive menu, we use a simple jquery click event, some 'CSS Classes' verfification and some CCS3 markup. If the button is clicked, we add an 'active' class to the trigger button and an 'Open' class to the responsive menu. On a second click on the trigger, if the responsive menu is opened, remove the 'active' class of the trigger and remove the 'Open' class. The Open class contains all our CSS3 transition markup to smoothly display the content of the responsive menu.

Here is a working example

Here is the full 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>

Here is the full 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;
    }
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: