如何创建响应式下拉菜单

Question

I have managed to create a navigation menu that is responsive however on small screen it gets displayed as per the photo attached.我设法创建了一个响应式导航菜单，但是在小屏幕上它会根据所附照片显示。 I want to group the links into a drop down menu button that display for small screens.我想将链接分组到一个显示小屏幕的下拉菜单按钮中。

This is how it's displayed on large screen这是它在大屏幕上的显示方式

This is how it's displayed on small screen这是它在小屏幕上的显示方式

    <header>
<!-- Navigation Links -->    
<div class="overlay"></div> 
          <div class="topnav">
            <nav>
              <ul>
                <li><a href="#0" class="active"><div class="image-icon"><img src="img/icons/face_icon.ico" alt="Face Icon"></div>Face</a></li>
                <li><a href="#0"><div class="image-icon"><img src="img/icons/forehead_icon.ico" alt="Forehead Icon"></div>Forehead</a></li>
                <li><a href="#0"><div class="image-icon"><img src="img/icons/eyebrow_icon.ico" alt="Eyebrow Icon"></div>Eyebrow</a></li>
                <li><a href="#0"><div class="image-icon"><img src="img/icons/nose_icon.ico" alt="Nose Icon"></div>Nose</a></li> 
                <li><a href="#0"><div class="image-icon"><img src="img/icons/lip_icon.ico" alt="Lip Icon"></div>Lips</a></li>
                <li><a href="#0"><div class="image-icon"><img src="img/icons/ear_icon.ico" alt="Ear Icon"></div>Ears</a></li>
              </ul>
            </nav>
          </div> <!-- .cd-slider-nav -->
</header>

    .topnav {
  text-align: center;
  overflow: hidden;
  position: relative;
}

.topnav ul {
  padding: 0;
  margin: 0;
}

.topnav ul li {
  display: inline-block;
  margin: 30px 30px;
}

.topnav ul li a {
  font-size: 14px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 550;
  color: #fff;
  margin-top: 15px;
}

.topnav ul li a:hover {
  color: #ffbb05;
  text-decoration: none;
}

.topnav ul .active {
  color: #ffbb05;
}

.topnav .image-icon img {
    width: 50px;
  }

.topnav .image-icon {
  margin: 0 auto;
  margin-bottom: 15px;
  display: block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  text-align: center;
  background-color: #ffbb05;
}

.topnav .image-icon:hover {
  background-color: #fff;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}

    /*
========================================
---------- RESPONSIVE STYLE ------------
========================================
*/
@media screen and (max-width: 750px) {
 
  .topnav .image-icon img {
    display: none;
  }

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

jsfiddle - https://jsfiddle.net/Dexter01/vyn3j2d0/ jsfiddle - https://jsfiddle.net/Dexter01/vyn3j2d0/

Answer 1

Hide the menu when it is on a small screen.在小屏幕上隐藏菜单。 Then you can toggle the visibility for the menu by toggling a class.然后您可以通过切换类来切换菜单的可见性。 Something like is-open .像is-open类的东西。

<!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>

Just added a button with show class in the above code block.刚刚在上面的代码块中添加了一个带有show类的按钮。

@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;
  }
}

Added a media query only for handling the menu in small screen size.添加了仅用于处理小屏幕尺寸菜单的媒体查询。

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

Jquery code for toggling the class.用于切换类的 Jquery 代码。

I prefer this, to using normal show() and hide() , This way you can change all descendants of the is-open class.我更喜欢这个，而不是使用普通的show() and hide() ，这样你就可以改变is-open类的所有后代。 Here is the modified jsfiddle这是修改后的jsfiddle

如何创建响应式下拉菜单

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-09-04 22:23:19

如何创建响应式下拉菜单

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-09-04 22:23:19

解决方案1
0 已采纳 2020-09-04 22:23:19