无法弄清楚如何在移动视图中使我的菜单按钮工作

时间：2018-02-18 18:41:20

标签： jquery css menu navigation responsive

我试图从头开始学习并使我的导航响应，并且我一直在使菜单按钮工作。通过它的工作意味着当我点击菜单图标时，菜单会像我们看到的大多数网站一样滑落。我已经检查并尝试从W3Schools学习这种方法，但我无法在此处应用它。任何人都可以帮助我只使用现有的HTML ，而不是添加额外的HTML代码。我知道它可以做到，但我在这方面是新的，似乎无法做到。救命！ :)

P.S。菜单图标的代码变成了＆＃39; X＆＃39;是用JavaScript编写的，因为我无法将其转换为jQuery。更喜欢jQuery。谢谢:)）

这里是链接：https://codepen.io/selate/full/yvvyzz/ 

<html>
...all html code here.(in CodePen)
</html>

2 个答案:

答案 0 :(得分：0)

要将您的vanilla js函数更改为jquery，它看起来像这样：

$('.menu-icon').on('click', function(){
     $(this).toggleClass('change'); //add the class change to the element clicked
     $('.header-list').toggleClass('open'); //adds a new class to the menu list
});

您还可以在菜单列表中添加一个类，然后定义css以正确显示它。我举一个非常基本的例子。你不得不搞砸它以使它看起来不错。

以下是我更改的相关CSS，以便在点击手机时显示菜单列表：

.header-list {
    display: none;
}

.header-list.open {
    display: block;
    width: 400px;
    position: absolute;
    left: 0;
    height: 400px;
    background: beige;
}

我还删除了这个事件处理程序，因为我们现在正在使用jquery来做同样的事情。

<div class="menu-icon" onclick="menuFunction(this)">

＆＃13;
＆＃13; 
$(document).ready(function() {

  $('.menu-icon').on('click', function() {
    $(this).toggleClass('change');
    $('.header-list').toggleClass('open');
  });

  $(function() {
    $('.header-logo h2').fadeIn(1000);
    $('.faq-list-item').click(function() {
      var $answer = $(this).find('.answer');
      if ($answer.hasClass('open')) {
        $answer.removeClass('open');
        $answer.slideUp();
        $(this).find('span').text('+');
      } else {
        $answer.addClass('open');
        $answer.slideDown();
        $(this).find('span').text('-');
      }
    });

    $('.header-logo').click(function() {
      $('html, body').animate({
        'scrollTop': 0
      }, 'slow')
      return false;
    });

    $('.header-list a').click(function() {

      var id = $(this).attr('href');
      var position = $(id).offset().top;
      $('html,body').animate({
        'scrollTop': position - 80
      }, 900);
      /*
       event.preventDefault();
       event.stopPropagation(); */
      return false;
    });

  });
});
＆＃13; 
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
div {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Lato";
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

p {
  opacity: 0.7;
}

header {
  height: 80px;
  width: 100%;
  background: rgb(11, 173, 198);
  position: fixed;
  top: 0;
  z-index: 10;
}

.header-logo h2 {
  font-size: 40px;
  line-height: 80px;
  color: #fff;
  font-family: "Lobster", cursive, sans-serif;
  font-weight: 500;
  display: none;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
}

.header-logo h2:hover {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.header-left {
  float: left;
}

.header-right {
  float: right;
}

.header-list li {
  float: left;
}

.header-list a {
  line-height: 80px;
  color: #fff;
  display: inline-block;
  padding: 0 30px;
  font-size: 20px;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.header-list a:hover {
  background-color: #fff;
  color: #0BADC6;
}

.top-wrapper {
  background-image: url("https://s-media-cache-ak0.pinimg.com/originals/97/7c/2e/977c2e8c480428e79cc15cdffdda95ad.jpg");
  background-size: cover;
  background-position: center;
  text-align: center;
  height: 500px;
  color: #fff;
  margin-top: 80px;
}

.container {
  max-width: 1170px;
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

.avatar {
  padding-top: 100px;
}

.avatar img {
  width: 180px;
  border: 5px solid #fff;
  border-radius: 50%;
  -webkit-transition: all 0.7s;
  transition: all 0.7s;
}

.avatar img:hover {
  /*  UNSURE */
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.top-wrapper h1 {
  font-size: 70px;
  font-weight: 100;
  padding-top: 30px;
  letter-spacing: 2px;
}

.about-wrapper,
.skill-wrapper,
.project-wrapper,
.contact-wrapper,
.faq-wrapper {
  padding: 80px 0 60px;
  border-bottom: 1px solid #eee;
  min-height: 500px;
  text-align: center;
}

.heading {
  color: #0BADC6;
  border: 2px dashed #0BADC6;
  display: inline-block;
  padding: 8px 20px;
  margin-bottom: 60px;
  font-weight: 400;
}

.about-wrapper p {
  text-align: center;
  line-height: 40px;
}

blockquote p {
  text-align: right !important;
}

.skill {
  float: left;
  width: 25%;
}

.skill-icon {
  position: relative;
}

.skill-icon p {
  position: absolute;
  top: 90px;
  width: 100%;
  color: #fff;
  opacity: 1;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.skill-icon:hover>p {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.project-wrapper {
  height: 600px;
}

.project img {
  width: 25%;
  height: 300px;
  border: 1px outset #eee;
  padding: 5px;
  margin-bottom: 20px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}

.project img:hover {
  -webkit-box-shadow: inset 0 0 0 25px #ccc;
  box-shadow: inset 0 0 0 25px #ccc;
}

.faq-wrapper {
  color: #5f5d60;
}

#faq-list {
  width: 500px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.faq-list-item {
  margin: 10px;
  border-bottom: 1px solid #ccc;
  position: relative;
  cursor: pointer;
  text-align: left;
}

.faq-list-item h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.faq-list-item span {
  position: absolute;
  top: -3px;
  right: 5px;
  color: #b3b3b3;
  font-size: 16px;
}

.answer {
  font-size: 16px;
  padding: 5px 0;
  margin-bottom: 15px;
  display: none;
  line-height: 22px;
}

.contact-wrapper {
  height: 600px;
}

.form-wrapper {
  width: 70%;
  margin: 0 auto;
  text-align: center;
}

input,
textarea {
  width: 100%;
  border: 1px solid #eee;
  padding: 10px;
  margin-bottom: 20px;
}

#message {
  height: 100px;
}

.form-wrapper p {
  padding-bottom: 15px;
  text-align: left;
}

.submit {
  padding: 10px 40px;
  background-color: #0BADC6;
  border-radius: 4px;
  color: #fff;
  border: none;
  -webkit-box-shadow: 0 4px #036170;
  box-shadow: 0 4px #036170;
  cursor: pointer;
  opacity: 0.8;
}

.submit:hover {
  opacity: 1;
}

.submit:active {
  -webkit-box-shadow: none;
  box-shadow: none;
  position: relative;
  top: 4px;
}

footer {
  height: 80px;
  color: #fff;
  background-color: #0BADC6;
}

.footer-logo {
  float: left;
}

.footer-logo h3 {
  padding-top: 26px;
  font-weight: 100;
  font-size: 25px;
}

.footer-icons {
  float: right;
  padding-top: 26px;
}

.footer-icons a {
  color: #fff;
  margin-right: 20px;
  font-size: 20px;
  display: inline-block;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.footer-icons a:hover {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.menu-icon {
  font-size: 2em;
  color: #fff;
  margin-top: 25px;
  display: none;
}


/* Responsive */

@media (max-width: 1000px) {
  .top-wrapper h1 {
    font-size: 30px;
  }
  .avatar img {
    width: 150px;
  }
  .top-wrapper {
    height: 400px;
  }
  .skill-wrapper {
    height: 700px;
  }
  .skill {
    width: 50%;
    margin-bottom: 30px;
  }
  .project-wrapper {
    height: 700px;
  }
  .project-wrapper img {
    width: 70%;
    height: 400px;
  }
}

@media (max-width: 670px) {
  .top-wrapper {
    height: 350px;
  }
  .top-wrapper h1 {
    font-size: 25px;
  }
  .avatar img {
    width: 120px;
  }
  .about-wrapper p {
    font-size: 12px;
    line-height: 30px;
  }
  .header-list {
    display: none;
  }
  .header-list.open {
    display: block;
    width: 400px;
    position: absolute;
    left: 0;
    height: 400px;
    z-index: 9999;
    background: beige;
  }
  .header-list li {
    display: block;
  }
  /* Menu    */
  .menu-icon {
    display: block;
    cursor: pointer;
  }
  .bar1,
  .bar2,
  .bar3 {
    width: 35px;
    height: 5px;
    margin: 5px 0;
    background-color: #fff;
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }
  .change .bar2 {
    opacity: 0;
  }
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
  }
  .project img {
    width: 80%;
    height: 400px;
  }
  .footer-logo h3 {
    font-size: 20px;
  }
  .footer-icons a {
    font-size: 18px;
    line-height: 35px;
    margin-right: 15px;
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="container">
    <div class="header-left">
      <div class="header-logo">
        <a href="#">
          <h2>SH</h2>
        </a>
      </div>
    </div>
    <div class="header-right">
      <div class="menu-icon">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </div>
      <!--
			<span class="fa fa-bars menu-icon"></span>
			-->
      <ul class="header-list">
        <li><a href="#about">About</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#faq">Faq</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</header>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我已经看过小提琴了，这是小提琴的工作环节，让我知道。它会https://codepen.io/anon/pen/jZZEda/?editors=1101

吗？

如果您想知道我改变了什么以及为什么，

<强> JS

以下是使用淡入淡出效果切换可见性的简单jQuery代码（fadeToggle是方法）。

/* Menu */
var menuIcon = $('.menu-icon');
  menuIcon.on('click', function(){
    $('.header-list').fadeToggle();
})

<强> CSS

我在您的媒体查询670 breakpoints中添加了这些CSS规则。提供了在移动屏幕上可见的背景

.header-list {
  background: #000;
  width: 100%;
  position: absolute;
  left: 0;
  top: 100%;
}
.header-list li{
  display: block;
  float: none;
}

我希望这会有所帮助。 :)

相关问题
最新问题