个人中心
gpt4 book ai didi

javascript - 当我添加图形标题时，响应式(Reactive)汉堡包菜单中断

转载 作者：行者123 更新时间：2023-11-28 00:32:02 26 4
gpt4 key购买 nike

我正在使用 JavaScript/CSS/HTML，需要在右上角制作一个响应式“汉堡包”菜单栏。

这里的目标是让它显示一个带有“Home Services Gallery Reviews Contact”的图形标题......然后当屏幕尺寸因移动设备而变小，或者调整屏幕尺寸时，那些应该消失，只留下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>

最佳答案

希望这有帮助，我从我的一个元素中获取了这段代码。它是一个响应式导航栏(为移动用户提供振动!)

$(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>

关于javascript - 当我添加图形标题时，响应式(Reactive)汉堡包菜单中断，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54354575/

26 4 0
文章推荐： Javascript 滚动 Div 循环
文章推荐： javascript - Google Maps Javascript API v3 map 显示在桌面浏览器上，但不会显示在移动浏览器上
文章推荐： javascript - 如何使用正则表达式进行正确的输入验证？
文章推荐： javascript - Slick.js 无法与 Google Maps API 中的 infoBox.js 配合使用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com