我希望菜单最小化到移动屏幕后成为汉堡包图标

Posted 2023-03-06

【中文标题】我希望菜单最小化到移动屏幕后成为汉堡包图标

【英文标题】：I want the menu to become a hamburger icon once it minimizes to mobile screen

【发布时间】：2021-10-09 04:04:05

【问题描述】：

我正在尝试将菜单设置为汉堡图标，当我最小化到移动屏幕时为 3 层，但我做错了，我不知道为什么它不起作用。在最小化到移动屏幕之前，该图标不应该显示。但是，图标在那里，但它只是一行。

我知道有问题，但我无法固定它。

[附上的图片是一些帮助我理解代码的指南。] [1]：https://i.stack.imgur.com/Dc5U5.jpg [2]：https://i.stack.imgur.com/nwhMo.jpg [3]：https://i.stack.imgur.com/Et5Uw.jpg

< script type = "text/javascript" >
  $(document).ready(function() 
    $("header p").click(function() 
      $("nav").toggleClass("slideDown");
    );

    $('.slick').slick(
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
      fade: true,
      autoplay: true,
      autoplaySpeed: 2.5,
      dots: true,
    );
  );

$(window).scroll(function() 
  $("header").stop().animate(
    top: $(document).scrollTop()
  , 'slow');
);

$("#hamburger").click(function() 
  $(this).toggleClass("change");
  $("nav").toggleClass("slideDownFurther");
); <
/script>

@media screen and (max-width:640px) 
  .floatRight,
  .floatLeft 
    float: none;
  
  .slick,
  #pinkkimono 
    display: block;
    width: 95%;
    min-width: 95%;
    margin: auto;
  


@media screen and (min-width:641px) 
  #hamburger 
    display: none;
  


.p 
  display: none;


@font-face 
  font-family: 'agendaimport';
  src: url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff2') format('woff2'), url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;


h3 
  font-family: 'agenda';
  font-size: 1.8em;


body 
  background-image: url("../Demo\ Site\ Stage\ 3\ pt\ 2/images/BRICKSxMORTAR.jpg");
  background-size: 200px;
  background-color: black;
  color: floralwhite;
  font-size: 1.2em;
  font-family: 'Courier New', Courier, monospace;
  width: 100%;
  height: auto;
  margin: auto;


a 
  color: aquamarine;
  font-size: 25px;


#wrapper 
  width: 80%;
  height: auto;
  margin: auto;
  padding: 1em;
  background: #000;
  position: relative;
  top: 4.5em;
  z-index: 0;


div 
  color: rgb(255, 255, 255);
  font-size: 20px;


#img 
  display: block;
  margin: auto;


#logo 
  display: block;
  margin: auto;
  width: 60%;
  height: auto;
  max-width: 200%;


nav 
  width: 100%;
  height: auto;
  background: aquamarine;
  margin-right: auto;
  margin-left: auto;
  margin-top: -99em;
  padding: 1em 0;
  text-align: center;
  margin-bottom: 1em;
  padding-top: 1em rgb(255, 255, 255);
  padding-bottom: 1em white;
  color: magenta;
  /*border-top: 1px white;
            border-bottom: 1px white;*/
  transition: margin-top 0.8s ease-in-out;


a.menu:link 
  display: block;
  color: black;


a.menu:visited 
  color: rgb(6, 8, 8);
  text-decoration: none;


a.menu.slideDown 
  color: magenta;
  text-decoration: underline;
  background-color: aquamarine;


a.menu:active 
  text-decoration: underline;
  background-color: aquamarine;


#magenta 
  font-size: 0.8em;


#smaller 
  font-size: 0.8em;
  color: black;


footer 
  width: 100%;
  background-color: floralwhite;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  clear: both;


footer p 
  margin: auto;
  width: 90%;
  color: magenta;


footer a 
  margin: auto;
  width: 90%;
  color: magenta;


footer p:link 
  color: black;


footer a:link 
  color: black;


.slick 
  width: 50%;
  height: auto;
  min-width: 200px;
  max-width: 500px;
  margin: 1.5em;
  position: relative;
  top: -1em;


.slider 
  width: 100%;
  height: auto;


#magentaman 
  width: 50%;
  height: auto;
  min-width: 300px;
  max-width: 800px;
  margin: 1em;


.floatLeft 
  float: left;


.floatRight 
  float: right;


#banner 
  width: 100%;
  height: auto;
  background: #000;
  border-bottom: 1px solid #fff;
  position: fixed;
  z-index: +1;
  top: 0;
  left: 0;
  right: 0;


header 
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  z-index: +1;


header p 
  width: 99%;
  height: auto;
  color: black;
  background-color: aquamarine;
  font-weight: bold;
  padding-left: 1%;



/*header:hover nav
            margin-top:-1em;
        
    
        header.slideDown nav
            margin-top:-1em;
        */

.slideDown 
  margin-top: -1em;


.slideDownFurther 
  margin-top: 3em;


header:hover p 
  color: magenta;
  cursor: pointer;


h3 
  animation-name: strobe;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;


@keyframes strobe 
  0% 
    color: floralwhite;
  
  50% 
    color: magenta;
  
  100% 
    color: white;
  


#hamburger 
  top: 0.95em;
  left: 1em;
  cursor: pointer;


#bar1 
  width: 35px;
  height: 5px;
  top: 6px;
  bottom: 6px;
  background-color: aquamarine;
  transition-property: 0.5s;


#bar2 
  width: 35px;
  height: 5px;
  top: 6px;
  bottom: 6px;
  background-color: aquamarine;
  transition-property: 0.5s;


#bar3 
  width: 35px;
  height: 5px;
  top: 6px;
  bottom: 6px;
  background-color: aquamarine;
  transition-property: 0.5s;


.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);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Index.html</title>
  <meta name="description" content="The homepage of Bricks and Mortar, Toronto's premiere custom clothing shop." />
  <link rel="stylesheet" href="external.css">
  <script src="script/jquery-ui.js"></script>
  <script src="script/jquery-3.6.0.min.js"></script>
  <script src="script/slick/slick.js"></script>
  <link rel="stylesheet" href="script/slick/slick.css" />
  <link rel="stylesheet" href="script/slick/slick-theme.css" />
  <link rel="stylesheets" href="stylesheets/mediaqueries.css">

  <script type="text/javascript">
    $(document).ready(function() 
      $("header p").click(function() 
        $("nav").toggleClass("slideDown");
      );

      $('.slick').slick(
        infinite: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        fade: true,
        autoplay: true,
        autoplaySpeed: 2.5,
        dots: true,
      );
    );

    $(window).scroll(function() 
      $("header").stop().animate(
        top: $(document).scrollTop()
      , 'slow');
    );

    $("#hamburger").click(function() 
      $(this).toggleClass("change");
      $("nav").toggleClass("slideDownFurther");
    );
  </script>
</head>


<body>
  <br>



  <div id="banner">

    <br>

    <div id="hamburger">
      <div id="bar1"></div>
      <div id="bar2"></div>
      <div id="bar3"></div>
    </div>

    <img src="images/logo.png" id="logo"></div>
  <br>
  <br>
  <br>
  <br>


  <div id="wrapper">
    <header>
      <p>menu</p>
      <nav>
        <a class="menu" href="OURSTORY.HTML">OUR STORY</a>
        <a class="menu" href="#">OUR SERVICES</a>
        <a class="menu" href="#">LOCATIONS</a>
        <a class="menu" href="F.A.Q.html">F.A.Q</a>
      </nav>
    </header>

    <div id="mission">
      <h3 style="color:magenta">The mission of BRICKSxMORTAR is to transform how Canadians think about fashion.</h3>


      <div class="slick floatRight">
        <div><img class="slider" src="images/aqua-androgynous.jpg" /></div>
        <div><img class="slider" src="images/bandmate-blouses.jpg" /></div>
        <div><img class="slider" src="images/sequins-and-stones.jpg" /></div>
        <div><img class="slider" src="images/roses-vest.jpg" /></div>
      </div>

      <p>For too long consumers have been forced to fit into a mould of one kind or another—assigned a size on an arbitrary scale of unrealistic and unhealthy beauty and body standards. In an over-sexualized and Photoshopped fashion market, we offer a different
        kind of clothing philosophy.

        <br>
        <br>
        <br> BRICKSxMORTAR strives to connect with the individual and to consult and create custom clothing for them with them in a collaborative manner. By doing so, our fashion studio endeavours to change consumers' perceptions of the current fashion
        landscape as well as their own views about their bodies and their fashion choices.


        <img class="floatLeft" id="magentaman" src="images/kimono-and-shorts.jpg" />


        <br> What does it feel like to wear something especially made for one's body rather than fitting one's body into a predetermined shape? We aim to answer this question a million times over as we help every client move towards a more comfortable
        version of themselves.
      </p>
      <!--end of mission-->

      <br>
      <br>
      <br>
      <br>

      <br>

      <footer>
        <h3>
          <div class="magenta"></div>
          <p>
            <div class="smaller" font-size="0.8em">

          </p>
        </h3>
        <p>©BRICKSxMORTAR, inc. 2018-2020 // 1.888.708.9950 //
          <a class="menu" href="mailto:[e-mail]" style="color:magenta"> <u>[e-mail]</u></a>
        </p>
      </footer>

      </div>
      <!--end of wrapper-->

</html>
</body>

【问题讨论】：

您希望汉堡仅出现在较小的屏幕上吗？如果只是这样，从我所看到的情况来看它工作正常

您在<link> 中对斜线的使用不一致。尽管允许，但没有任何 HTML 规范要求在此处使用右斜杠，它没有任何意义，也没有任何作用。

【参考方案1】：

尝试仅在页面宽度发生变化（最小化）时进行媒体查询。

#hamburger 
    display: none


    @media screen and (max-width:641px) 
      #hamburger 
        display: inherit;
      
    

【参考方案2】：

我希望这会有所帮助，我从您的代码中删除了不需要的 jquery，因为它显示了控制台错误。如果您想要菜单响应式菜单，请访问此Link

$(document).ready(function() 
      $("header p").click(function() 
        $("nav").toggleClass("slideDown");
      );

    

      $(window).scroll(function() 
        $("header").stop().animate(
          top: $(document).scrollTop()
        , 'slow');
      );

      $("#hamburger").click(function() 
        $(this).toggleClass("change");
        $("nav").toggleClass("slideDownFurther");
      );
    );

@media screen and (min-width:641px) 
  #hamburger 
    display: none;
  


.p 
  display: none;


@font-face 
  font-family: 'agendaimport';
  src: url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff2') format('woff2'), url('../Demo\ Site\ Stage\ 3\ pt\ 2/type/agenda_medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;


h3 
  font-family: 'agenda';
  font-size: 1.8em;


body 
  background-image: url("../Demo\ Site\ Stage\ 3\ pt\ 2/images/BRICKSxMORTAR.jpg");
  background-size: 200px;
  background-color: black;
  color: floralwhite;
  font-size: 1.2em;
  font-family: 'Courier New', Courier, monospace;
  width: 100%;
  height: auto;
  margin: auto;


a 
  color: aquamarine;
  font-size: 25px;


#wrapper 
  width: 80%;
  height: auto;
  margin: auto;
  padding: 1em;
  background: #000;
  position: relative;
  top: 4.5em;
  z-index: 0;


div 
  color: rgb(255, 255, 255);
  font-size: 20px;


#img 
  display: block;
  margin: auto;


#logo 
  display: block;
  margin: auto;
  width: 60%;
  height: auto;
  max-width: 200%;


nav 
  width: 100%;
  height: auto;
  background: aquamarine;
  margin-right: auto;
  margin-left: auto;
  margin-top: -99em;
  padding: 1em 0;
  text-align: center;
  margin-bottom: 1em;
  padding-top: 1em rgb(255, 255, 255);
  padding-bottom: 1em white;
  color: magenta;
  /*border-top: 1px white;
            border-bottom: 1px white;*/
  transition: margin-top 0.8s ease-in-out;
      position: absolute;
    left: 0;


a.menu:link 
  display: block;
  color: black;


a.menu:visited 
  color: rgb(6, 8, 8);
  text-decoration: none;


a.menu.slideDown 
  color: magenta;
  text-decoration: underline;
  background-color: aquamarine;


a.menu:active 
  text-decoration: underline;
  background-color: aquamarine;


#magenta 
  font-size: 0.8em;


#smaller 
  font-size: 0.8em;
  color: black;


footer 
  width: 100%;
  background-color: floralwhite;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  clear: both;


footer p 
  margin: auto;
  width: 90%;
  color: magenta;


footer a 
  margin: auto;
  width: 90%;
  color: magenta;


footer p:link 
  color: black;


footer a:link 
  color: black;


.slick 
  width: 50%;
  height: auto;
  min-width: 200px;
  max-width: 500px;
  margin: 1.5em;
  position: relative;
  top: -1em;


.slider 
  width: 100%;
  height: auto;


#magentaman 
  width: 50%;
  height: auto;
  min-width: 300px;
  max-width: 800px;
  margin: 1em;


.floatLeft 
  float: left;


.floatRight 
  float: right;


#banner 
  width: 100%;
  height: auto;
  background: #000;
  border-bottom: 1px solid #fff;
  position: fixed;
  z-index: +1;
  top: 0;
  left: 0;
  right: 0;


header 
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  position: relative;
  z-index: +1;


header p 
  width: 99%;
  height: auto;
  color: black;
  background-color: aquamarine;
  font-weight: bold;
  padding-left: 1%;




.slideDown 
  margin-top: -1em;


.slideDownFurther 
  margin-top: 3em;


header:hover p 
  color: magenta;
  cursor: pointer;


h3 
  animation-name: strobe;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;


@keyframes strobe 
  0% 
    color: floralwhite;
  
  50% 
    color: magenta;
  
  100% 
    color: white;
  


#hamburger 
  top: 0.95em;
  left: 1em;
  cursor: pointer;


#bar1 
  width: 35px;
  height: 5px;
  top: 6px;
  bottom: 6px;
  background-color: aquamarine;
  transition-property: 0.5s;
      margin: 5px 0;


#bar2 
  width: 35px;
  height: 5px;
  top: 6px;
  bottom: 6px;
  background-color: aquamarine;
  transition-property: 0.5s;
      margin: 5px 0;


#bar3 
  width: 35px;
  height: 5px;
  top: 6px;
  bottom: 6px;
  background-color: aquamarine;
  transition-property: 0.5s;


.change #bar1 
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);


.change #bar2 
  opacity: 0;


.change #bar3 
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);


@media screen and (max-width:640px) 
  .floatRight,
  .floatLeft 
    float: none;
  
  .slick,
  #pinkkimono 
    display: block;
    width: 95%;
    min-width: 95%;
    margin: auto;
  
  div#wrapper header p 
    display: none;
  
  

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!-- Meta View Port -->
<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Index.html</title>
  <meta name="description" content="The homepage of Bricks and Mortar, Toronto's premiere custom clothing shop." />
  <link rel="stylesheet" href="external.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
</head>


<body>
  <br>



  <div id="banner">

    <br>

    <div id="hamburger">
      <div id="bar1"></div>
      <div id="bar2"></div>
      <div id="bar3"></div>
    </div>

    <img src="images/logo.png" id="logo"></div>
  <br>
  <br>
  <br>
  <br>


  <div id="wrapper">
    <header>
      <p>menu</p>
      <nav>
        <a class="menu" href="OURSTORY.HTML">OUR STORY</a>
        <a class="menu" href="#">OUR SERVICES</a>
        <a class="menu" href="#">LOCATIONS</a>
        <a class="menu" href="F.A.Q.html">F.A.Q</a>
      </nav>
    </header>

    <div id="mission">
      <h3 style="color:magenta">The mission of BRICKSxMORTAR is to transform how Canadians think about fashion.</h3>


      <div class="slick floatRight">
        <div><img class="slider" src="images/aqua-androgynous.jpg" /></div>
        <div><img class="slider" src="images/bandmate-blouses.jpg" /></div>
        <div><img class="slider" src="images/sequins-and-stones.jpg" /></div>
        <div><img class="slider" src="images/roses-vest.jpg" /></div>
      </div>

      <p>For too long consumers have been forced to fit into a mould of one kind or another—assigned a size on an arbitrary scale of unrealistic and unhealthy beauty and body standards. In an over-sexualized and Photoshopped fashion market, we offer a different
        kind of clothing philosophy.

        <br>
        <br>
        <br> BRICKSxMORTAR strives to connect with the individual and to consult and create custom clothing for them with them in a collaborative manner. By doing so, our fashion studio endeavours to change consumers' perceptions of the current fashion
        landscape as well as their own views about their bodies and their fashion choices.


        <img class="floatLeft" id="magentaman" src="images/kimono-and-shorts.jpg" />


        <br> What does it feel like to wear something especially made for one's body rather than fitting one's body into a predetermined shape? We aim to answer this question a million times over as we help every client move towards a more comfortable
        version of themselves.
      </p>
      <!--end of mission-->

      <br>
      <br>
      <br>
      <br>

      <br>

      <footer>
        <h3>
          <div class="magenta"></div>
          <p>
            <div class="smaller" font-size="0.8em">

          </p>
        </h3>
        <p>©BRICKSxMORTAR, inc. 2018-2020 // 1.888.708.9950 //
          <a class="menu" href="mailto:[e-mail]" style="color:magenta"> <u>[e-mail]</u></a>
        </p>
      </footer>

      </div>
      <!--end of wrapper-->

</html>

</body>