个人中心
gpt4 book ai didi

html - 如何做一个响应式下拉菜单

转载 作者：行者123 更新时间：2023-11-28 15:09:25 25 4
gpt4 key购买 nike

我正在尝试将本教程应用到我的导航菜单中，我喜欢这个设计。唯一的问题是，对于我的成员(member)部分，它打开和关闭的速度太快，没有给用户选择选项的机会。出于某种原因，它适用于我的更多信息部分。我不确定是什么导致了这个问题？我试图删除一些列表项以查看是否可能是问题所在。我有一种感觉，也许有什么东西在触摸什么东西，但无法弄清楚是什么......我将包括我的移动设备的 html 和 css 代码:

这是我的主要 html 页面..

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

<nav class="navbar">


<ul id="navmenu">
  <li><a href="index.php">Home</a></li>
  <li><a href="header2.php">Member's Section</a><span class="darrow">&#9660;</span>
       <ul class="sub1">
          <li><a href="#">Administrator</a></li>
             <li><a href="#">Watch Videos</a>
                <ul class="sub2">
                   <li><a href="primervideos.php">Primer Level Videos</a></li>
                     <li><a href="level1videos.php">Level 1 Videos</a></li>
                      <li><a href="level2videos.php">Level 2 Lesson</a></li>
                      <li><a href="level3videos.php">Level 3 Lesson</a></li>
                </ul>
             </li>
             <li><a href="practice_diary.php">Practice Diary</a></li>
             <li><a href="display_music_forum.php">Forum</a></li>
               <li><a href="#">Games</a><span class="rarrow">&#9654;</span>
                  <ul class="sub2">
                   <li><a href="guessing_game.php">Guessing Game</a></li>
                   <li><a href="paper_scissors_stone.php">Rock, Paper, Scissor</a></li>

                   </ul>
                 </li>
        </ul>
  </li>
  <li><a href="signup.php">Signup</a></li>
  <li><a href="activate.php">Activate Membership Plan</a></li>
  <li><a href="#">More Information</a><span class="darrow">&#9660;</span>
       <ul class="sub1">
          <li><a href="#">About Us</a></li>
             <li><a href="#">Contact Us</a></li>
             <li><a href="qa.php">Questions and Answers</a></li>

        </ul>

  </li>
</ul>
</nav>

This is my css code for the nav

@media screen and (max-width: 23em) {
  ul#navmenu li {

  width: 250px;
  text-align: center;
  position: relative; /*This is very important to get sub menu absolutely line up with it */
  float: none; 
  left: 3em;
  top: 2em;
}

ul#navmenu a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 30px;
  line-height: 25px;
  border: 1px solid #ccc;
  border-radius: 5px;
}



ul#navmenu .sub1 a {
  margin-top: 5px;

}

ul#navmenu .sub2 a {
  margin-left: 10px;
}




ul#navmenu ul.sub1 {
  display: none;
  position: static;



}



ul#navmenu ul.sub2 {
   display: none;
  position: static;



}

ul#navmenu li:hover .sub1 {
  display: block;
  margin-bottom: 5em;
}

ul#navmenu .sub1 li:hover .sub2 {
  display:block;
}

这是我一直在尝试实现的视频:

https://www.youtube.com/watch?v=rAVQh2gfIfc&t=268s

如果您能在这里指导我并且尽量不要添加太多代码，我将不胜感激....

最佳答案

请按照我的代码片段进行响应式下拉。

$(document).ready(function() {
  $(".nav li a").each(function() {
    if ($(this).next().length > 0) {
      $(this).addClass("parent");
    };
  })

  $(".toggleMenu").click(function(e) {
    e.preventDefault();
    $(this).toggleClass("active");
    $(".nav").toggle();
  });
  adjustMenu();
})

$(window).bind('resize orientationchange', function() {
  ww = document.body.clientWidth;
  adjustMenu();
});

var adjustMenu = function() {
  var ww = document.body.clientWidth;
  if (ww < 768) {
    $(".toggleMenu").css("display", "inline-block");
    if (!$(".toggleMenu").hasClass("active")) {
      $(".nav").hide();
    } else {
      $(".nav").show();
    }
    $(".nav li").unbind('mouseenter mouseleave');
    $(".nav li a.parent").unbind('click').bind('click', function(e) {
      // must be attached to anchor element to prevent bubbling
      e.preventDefault();
      $(this).parent("li").toggleClass("hover");
    });
  } 
  else if (ww >= 768) {
    $(".toggleMenu").css("display", "none");
    $(".nav").show();
    $(".nav li").removeClass("hover");
    $(".nav li a").unbind('click');
    $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
      // must be attached to li so that mouseleave is not triggered when hover over submenu
      $(this).toggleClass('hover');
    });
  }
}
body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
.container {
    width: 90%;
    max-width: 900px;
    margin: 10px auto;
}
.toggleMenu {
    display:  none;
    background: #666;
    padding: 10px 15px;
    color: #fff;
}
.nav {
    list-style: none;
     *zoom: 1;
     background:#175e4c;
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 9em;
}
.nav a {
    padding: 10px 15px;
    color:#fff;
}
.nav li {
    position: relative;
}
.nav > li {
    float: left;
    border-top: 1px solid #104336;
}
.nav > li > .parent {
    background-image: url("https://cdn4.iconfinder.com/data/icons/spirit20/sort-desc-alt.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    background: #1d7a62;
    position: relative;
    z-index:100;
    border-top: 1px solid #175e4c;
}
.nav li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}

@media screen and (max-width: 768px) {
    .active {
        display: block;
    }
    .nav > li {
        float: none;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("https://cdn4.iconfinder.com/data/icons/spirit20/sort-desc-alt.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <a class="toggleMenu" href="#">Menu</a>
  <ul class="nav">
    <li  class="test">
      <a href="#">Shoes</a>
      <ul>
        <li>
          <a href="#">Womens</a>
          <ul>
            <li><a href="#">Sandals</a></li>
            <li><a href="#">Sneakers</a></li>
            <li><a href="#">Wedges</a></li>
            <li><a href="#">Heels</a></li>
            <li><a href="#">Loafers</a></li>
            <li><a href="#">Flats</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Mens</a>
          <ul>
            <li><a href="#">Loafers</a></li>
            <li><a href="#">Sneakers</a></li>
            <li><a href="#">Formal</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Shirts</a>
      <ul>
        <li>
          <a href="#">Mens</a>
          <ul>
            <li><a href="#">T-Shirts</a></li>
            <li><a href="#">Dress Shirts</a></li>
            <li><a href="#">Tank Tops</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Womens</a>
          <ul>
            <li><a href="#">T-Shirts</a></li>
            <li><a href="#">Blouses</a></li>
            <li><a href="#">Dress Shirts</a></li>
            <li><a href="#">Tunics</a></li>
            <li><a href="#">Camisoles</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Pants</a>
      <ul>
        <li>
          <a href="#">Mens</a>
          <ul>
            <li><a href="#">Trousers</a></li>
            <li><a href="#">Slacks</a></li>
            <li><a href="#">Jeans</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Womens</a>
          <ul>
            <li><a href="#">Trousers</a></li>
            <li><a href="#">Slacks</a></li>
            <li><a href="#">Jeans</a></li>
            <li><a href="#">Leggings</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Skirts</a>
      <ul>
        <li>
          <a href="#">Long</a>
          <ul>
            <li><a href="#">Denim</a></li>
            <li><a href="#">Knits</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Short</a>
          <ul>
            <li><a href="#">Denim</a></li>
            <li><a href="#">Knits</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Mini</a>
          <ul>
            <li><a href="#">Denim</a></li>
            <li><a href="#">Knits</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Dresses</a>
      <ul>
        <li>
          <a href="#">Casual</a>
        </li>
        <li>
          <a href="#">Formal</a>
          <ul>
            <li><a href="#">Wedding</a></li>
            <li><a href="#">Party</a></li>
          </ul>
        </li>

      </ul>
    </li>
    <li>
      <a href="#">Sweaters</a>
      <ul>
        <li>
          <a href="#">Mens</a>
          <ul>
            <li><a href="#">Wool</a></li>
            <li><a href="#">Knitwear</a></li>
            <li><a href="#">Light Sweaters</a></li>
            <li><a href="#">Cardigans</a></li>
            <li><a href="#">Hoodies</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Womens</a>
          <ul>
            <li><a href="#">Wool</a></li>
            <li><a href="#">Knitwear</a></li>
            <li><a href="#">Light Sweaters</a></li>
            <li><a href="#">Cardigans</a></li>
            <li><a href="#">Hoodies</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Accessories</a>
      <ul>
        <li>
          <a href="#">Womens</a>
          <ul>
            <li><a href="#">Belts</a></li>
            <li><a href="#">Bags</a></li>
            <li><a href="#">Jewelery</a></li>
            <li><a href="#">Hats</a></li>
            <li><a href="#">Eyewear</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Mens</a>
          <ul>
            <li><a href="#">Belts</a></li>
            <li><a href="#">Hats</a></li>
            <li><a href="#">Eyewear</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Outerwear</a>
      <ul>
        <li>
          <a href="#">Womens</a>
          <ul>
            <li><a href="#">Winter</a></li>
            <li><a href="#">Spring/Fall</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Mens</a>
          <ul>
            <li><a href="#">Winter</a></li>
            <li><a href="#">Spring/Fall</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Shipping Info</a>
    </li>
  </ul>
</div>

关于html - 如何做一个响应式下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53085027/

25 4 0
文章推荐： html - 通过 URL 插入时，SVG 图标显示损坏的图像
文章推荐： javascript - AngularJS $q 与 socket.io 的 promise
文章推荐： javascript - ngClass 不应用父指令中的更改
文章推荐： css - 为文本制作带有渐变的底部边框
行者123
个人简介

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

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