Question

我正在使用JavaScript / CSS / HTML，并且需要在右上角创建一个反应式“汉堡包”菜单栏。

此处的目标是显示带有“家庭服务图库评论联系人”的图形标题...然后，由于移动设备而导致屏幕尺寸变小或调整屏幕大小时，这些屏幕应该消失并仅保留3行“汉堡”。

我已经尝试过各种方法来考虑移动DIV的位置，进行细微更改并保存以确定断点的位置，而我发现的唯一结果是，当添加图形的Div表时，破损了

样式属性：

<style>
    .container {
            display: inline-block;
      cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
      width: 35px;
      height: 5px;
      background-color: #333;
      margin: 6px 0;
      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);
    }

    .navbar {
        overflow: hidden;
        position: fixed;
        top: 0;
        width: 100%;
    }


.navbar a {
float: left;
display: block;
color: #000000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.navbar a:hover {
background-color: #ddd;
color: black;
}

.active {
background-color: #4CAF50;
color: white;
}

.navbar .icon {
display: none;
}

@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {display: none;}
.navbar a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.navbar.responsive {position: relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}
</style>
<title></title>
</head>
<body>
<div class="navbar" id="mynavbar">
    <a class="icon" href="javascript:void(0);" onclick="myFunction()">
    <div align="right" class="container" onclick="myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
    </div></a>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</body>
</html>

这是汉堡栏HTML：

        <div class="navbar" id="mynavbar">

      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <div align="right" class="container" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
      </a>
    </div>

Photoshop的图形标题生成的HTML表：

     <div class="navbar">
      <table width="100%" border="0" cellspacing="5" cellpadding="5">
      <tr>
        <td align="left"><img src="images/logo.jpg" width="300" 
height="100" alt="Logo" position="Left"></td>
        <td>
    <table id="Table_01" width="100%" height="100" border="0" 
cellpadding="0" cellspacing="0" align="center">
        <tr>

        </tr>
        <tr>
            <td><a href="index.html">
                <img src="images/Home.jpg" width="103" height="37" 
   alt="Home"></a>
                </td>
            <td><a href="services.html">
                <img src="images/Services.jpg" width="130" height="37" 
    alt="Services"></a>
                </td>
            <td><a href="Gallery.html">
                <img src="images/Gallery.jpg" width="109" height="37" 
    alt="Gallery"></a>
                </td>
            <td><a href="Reviews.html">
                <img src="images/Reviews.jpg" width="122" height="37" 
    alt="Reviews"></a>
                </td>
            <td><a href="Contact.html">
                <img src="images/Contact.jpg" width="136" height="37" 
alt="Contact"></a>
                </td>
    </div>

Answer 1

希望这会有所帮助，我从一个项目中获取了这段代码。

$(document).ready(function() {

  // vibration for mobile
  // support for all navigator vibrate veriants
  navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
  // vibrate on tap
  $('.vib').click(function() {
    navigator.vibrate(50);
  });


  // nav menu
  $("#navButton").click(function() {
    $(".navigation").slideToggle("slow", function() {});
  });

  $(window).on('resize', function() {
    if ($(this).width() > 800) {
      $('.navigation').css({
        'display': 'flex'
      });
    } else {
      $('.navigation').css({
        'display': 'none'
      });
    }
  });
});

#navButton {
  display: none;
  text-align: right;
}

#navButton p i{
  text-align: right;
  font-size: 2.4em;
}

#navButton p span{
  position: relative;
  top: -6px;
  left: -6px;
  font-size: 0.8em;
}



/* the bar the nav is located in */

.navigation {
  list-style: none;
  background-color: #333333;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: flex-end;
  padding: 0px;
}


/* links styles */

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: #ffffff;
  justify-content: space-between;
}


/* rows of each link styles */

.navigation li {
  list-style-type: none;
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
}


/* hover over the links */

.navigation a:hover {
  background: #444444;
  color: #61D6D6;
}


/* if screen is smaller than 800px / tablet */

@media all and (max-width: 800px) {
  .navigation li {
    display: block;
    flex-direction: column;
  }
  .navigation {
    justify-content: space-around;
    display: none;
  }
  #navButton {
    display: block;
  }
}


/* if screen is smaller than 600px / mobile */

@media all and (max-width: 600px) {
  .navigation {
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
    padding: 0;
    display: none;
  }
  .navigation a {
    text-align: center;
    padding: 10px;
  }
  .navigation li:last-of-type a {
    border-bottom: none;
  }
  #navButton {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<nav>
  <div class="masthead">
    <div class="navMenuBox">
      <div id="navButton" class="vib">
        <p><i class="fas fa-bars"></i> <br><span>menu</span></p>
      </div>
    </div>
  </div>
  <ul class="navigation">
    <li><a class="vib active" href="#">Link 1</a></li>
    <li><a class="vib" href="#">Link 2</a></li>
    <li><a class="vib" href="#">Link 3</a></li>
    <li><a class="vib" href="#">Link 4</a></li>
  </ul>
</nav>

当我添加图形标题时，反应性汉堡包菜单中断

1 个答案: