如何创建叠加移动菜单?

时间:2017-06-15 19:38:01

标签: javascript jquery html css

我想创建一个单击汉堡按钮时出现的菜单。我试图自己做,但我感到沮丧,因为我尝试的一切都没有用。我想用jQuery

来做

以下是现在的样子:

enter image description here

这是HTML:

<div class="intro">
    <div class="container">

        <!-- Navigation -->

        <div class="menu">
            <ul class="navigation">
                <li><a href="#">HOME</a></li>
                <li><a href="#contactMe" class="jump-contact">CONTACT</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#myWork" class="jump-work">MY WORK</a></li>
            </ul>
        </div>

        <div class="toggle-nav">&#9776;</div>

        <!-- Intro Section -->

        <h1>Nelson Lupanda</h1>
        <h3>Front End Developer</h3>
    </div>
</div>

这是CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    font-weight: lighter;
}

@media only screen and (min-width: 380px) and (max-width: 500px) and 
  (orientation:portrait), (max-width:480px) and (orientation:landscape) {

    html {
        font-size: 16px;
    }

    * {
        box-sizing:border-box;
        moz-box-sizing:border-box;
        webkit-box-sizing:border-box;
    }

    hr {
        size:1;
        width: 15%;
    }

    /* intro section */ 

    .intro {
        background-color: #f2f2f2;
        height: auto;
        width: 100%;
        font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    }

    .intro .container {
        height: 100%;
        padding: 20px 15px 50px 15px;
    }

    .intro .menu {
        text-align: center;
        display: none;
    }

    .intro .menu ul {
        background-color: #f2f2f2;
    }

    .intro .menu li {
        display: block;
        list-style: none;
        margin-top: 10px;
    }

    .intro .menu li a {
        text-decoration: none;
        color: #000000;
    }

    .intro .toggle-nav {
        float: right;
        clear: right;
        margin-right: 20px;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .intro h1 {
        margin: 60px 0 0 0;
    }

    .intro h3 {
        margin-bottom: 30px;
    }

    .intro h1, .intro h3 {
        font-weight: bolder;
        text-align: center;
    }

}

2 个答案:

答案 0 :(得分:0)

这只是一个简单的示例,可以帮助您入门,只需将div放在所有内容之上(您可能必须使用z-index)并切换隐藏并在单击某些内容时显示该叠加。

&#13;
&#13;
$(document).ready(function() {
    $('.menu').on('click', function() {
       $('.overlay').show();
    });
    $('.close').on('click', function() {
       $('.overlay').hide();
    })
})
&#13;
.content {
  width: 100%; 
  height: 20000px;
  background-color: yellow;
}
.menu {
  margin-left: 1rem;
  margin-top: 1rem; 
}
.overlay {
  background-color: rgba(0,0,0,.8);
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:none;
}
.close {
  margin-left: 1rem; 
  margin-top: 1rem;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
    <div class="overlay">
        <button class="close">close</button>
    </div>
    <button class="menu">menu</button>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我已经找到了solution

<强> JS:

$(function(){
  $(".toggle-nav").click(function(){
    $(".menu").toggleClass("open");
  });
});

<强> HTML:

<div class="intro">
    <div class="container">

        <!-- Navigation -->
        <div class="toggle-nav">&#9776;</div>
        <div class="menu">
            <ul class="navigation">
                <li><a href="#">HOME</a></li>
                <li><a href="#contactMe" class="jump-contact">CONTACT</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#myWork" class="jump-work">MY WORK</a></li>
            </ul>
        </div>



        <!-- Intro Section -->

        <h1>Nelson Lupanda</h1>
        <h3>Front End Developer</h3>
    </div>
</div>

<强> CSS:

html, body {
width: 100%;
height: 100%;
margin: 0px;
font-weight: lighter;
}
@media only screen and (min-width: 380px) and (max-width: 500px) and (orientation:portrait), (max-width:480px) and (orientation:landscape) {
    html {
        font-size: 16px;
    }

    * {
        box-sizing:border-box;
        moz-box-sizing:border-box;
        webkit-box-sizing:border-box;
    }

    hr {
        size:1;
        width: 15%;
    }

    /* Style for the menu */



    /* intro section */ 

    .intro {
        background-color: #f2f2f2;
        height: auto;
        width: 100%;
        font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
    }

    .intro .container {
        height: 100%;
        padding: 20px 15px 50px 15px;
    }

    .intro .menu {
        text-align: center;
        display: none;
    }

    .intro .menu ul {
        background-color: #f2f2f2;
    }

    .intro .menu li {
        display: block;
        list-style: none;
        margin-top: 10px;
    }

    .intro .menu li a {
        text-decoration: none;
        color: #000000;
    }

    .intro .toggle-nav {
        float: right;
        clear: right;
        margin-right: 20px;
        font-size: 1.5rem;
        cursor: pointer;
        display: block;
        width: 100%;
    }

    .intro h1 {
        margin: 60px 0 0 0;
    }

    .intro h3 {
        margin-bottom: 30px;
    }

    .intro h1, .intro h3 {
        font-weight: bolder;
        text-align: center;
    }

    .container > .toggle-nav {
        text-align: right;
    }

    .menu.open {
        display: block;  
    }
}

-