Javascript 如何创建响应性下拉菜单_Javascript_Html_Css

Javascript 如何创建响应性下拉菜单

javascript html css

Javascript 如何创建响应性下拉菜单,javascript,html,css,Javascript,Html,Css,我已经设法创建了一个导航菜单，该菜单响应迅速，但在小屏幕上，它会按照所附的照片显示出来。我想把链接组合成一个下拉菜单按钮，在小屏幕上显示这就是它在大屏幕上的显示方式这就是它在小屏幕上的显示方式托普纳夫先生{ 文本对齐：居中；溢出：隐藏；位置：相对位置； } 托普纳夫{ 填充：0；保证金：0； } 托普纳夫·乌利{ 显示：内联块；利润率：30px 30px； } topnav ul li a.先生{ 字体大小：14px；文本转换：大写；文本对齐：居中；字号

我已经设法创建了一个导航菜单，该菜单响应迅速，但在小屏幕上，它会按照所附的照片显示出来。我想把链接组合成一个下拉菜单按钮，在小屏幕上显示

这就是它在大屏幕上的显示方式

这就是它在小屏幕上的显示方式










托普纳夫先生{
文本对齐：居中；
溢出：隐藏；
位置：相对位置；
}
托普纳夫{
填充：0；
保证金：0；
}
托普纳夫·乌利{
显示：内联块；
利润率：30px 30px；
}
topnav ul li a.先生{
字体大小：14px；
文本转换：大写；
文本对齐：居中；
字号：550；
颜色：#fff；
边缘顶部：15px；
}
topnav ul li a:悬停{
颜色：#ffbb05；
文字装饰：无；
}
.topnav ul.激活{
颜色：#ffbb05；
}
.topnav.图像图标img{
宽度：50px；
}
.topnav.image图标{
保证金：0自动；
边缘底部：15px；
显示：块；
宽度：70px；
高度：70像素；
线高：70px；
边界半径：50%；
文本对齐：居中；
背景色：#ffbb05；
}
.topnav.图像图标：悬停{
背景色：#fff；
-moz过渡：所有0.2s线性；
-o过渡：所有0.2s线性；
-webkit转换：所有0.2s线性；
}
/*
========================================
----------响应式------------
========================================
*/
@媒体屏幕和屏幕（最大宽度：750px）{
.topnav.图像图标img{
显示：无；
}
.topnav.image图标{
显示：无；
}
}

jshiddle-

在小屏幕上隐藏菜单。然后可以通过切换类来切换菜单的可见性。类似于

的内容是打开的

<!DOCTYPE html>
<html lang="en">

  <head>

    <!-- Basic Page Needs -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content=" ">
    <meta name="author" content=" ">

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobileoptimized" content="0" />

    <!-- FONT -->
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;642;700&display=swap" rel="stylesheet">

    <!-- CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/style.css">

    <!-- Scripts -->
    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

  </head>

  <body>

    <header>
    <button class="show">
    Show
    </button>
      <!-- Navigation Links -->
      <div class="overlay"></div>
      <div class="topnav">
        <nav>
          <ul>
            <li><a href="#0" class="active">
                <div class="image-icon"></div>Face
              </a></li>
            <li><a href="#0">
                <div class="image-icon"></div>Forehead
              </a></li>
            <li><a href="#0">
                <div class="image-icon"></div>Eyebrow
              </a></li>
            <li><a href="#0">
                <div class="image-icon"></div>Nose
              </a></li>
            <li><a href="#0">
                <div class="image-icon"></div>Lips
              </a></li>
            <li><a href="#0">
                <div class="image-icon"></div>Ears
              </a></li>
          </ul>
        </nav>
      </div> <!-- .cd-slider-nav -->
    </header>

    <!-- Footer -->
    <footer>
    </footer>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
      window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')

    </script>

    <!-- End Document -->
  </body>

</html>

添加了仅用于处理小屏幕菜单的媒体查询

$(".show").click(() => {
    $(".topnav ul").toggleClass("is-open");
})

用于切换类的Jquery代码

我更喜欢这样，而不是使用普通的

show（）和hide（）

，这样可以更改

is open

类的所有后代。

这是修改后的

签出CSS媒体查询签出引导程序-，这将帮助您做出响应websites@NikhilSingh为这样的单个任务推荐一个完整的框架是不必要的，而且还有其他框架。这里的答案应该是基于事实而不是基于观点的，并且建议一个甚至没有被问及的框架绝对是基于观点的@NikhilSingh这仍然是一个远远超出他们要求的建议，如果它让一个没有经验的用户偏离了错误的方向或进入了超出他们知识水平的领域，它甚至可能是有害的，因此，最好将这些建议留给对框架感兴趣的用户，而不是简单的任务，以保留有关主题的信息。甚至评论也应该在主题上：）@FluffyKitten下次一定会注意更具体：）

@media screen and (max-width: 750px) {

  .topnav .image-icon img {
    display: none;
  }

  .topnav .image-icon {
    display: none;
  }
  
  .topnav ul {
    display: none;
  }
  .topnav ul.is-open {
    display: flex;
    flex-direction: column;
  }
}

$(".show").click(() => {
    $(".topnav ul").toggleClass("is-open");
})