html - 如何做一个响应式下拉菜单
问题描述
我正在尝试将本教程应用于我的导航菜单，我喜欢这个设计。唯一的问题是，对于我的会员部分，它打开和关闭太快，没有给用户选择选项的机会。出于某种原因，它适用于我的更多信息部分。我不确定是什么导致了问题？我试图删除一些列表项，看看这是否是问题所在。我有一种感觉，也许有些东西正在触动某些东西，但无法弄清楚是什么......我将为我的移动设备包含我的 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">▼</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">▶</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">▼</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>推荐阅读
- python - UnicodeEncodeError: 'ascii' codec can't encode character '\xe9' when printing in UTF-8 locale
- javascript - 每个孩子独一无二的“钥匙”道具
- python - 在模板中使用 iterator() 优化 Django 数据库查询
- excel - 满足条件时将 [SPECIFIC] 数据从 sheet1 传输到 sheet2
- javascript - 在公共命名空间下导入多个 MaterialUI 组件而不导入整个库的最佳方法？
- python - 将列表传递给 PL/SQL 过程
- sql - 无法弄清楚这个 Postgresql 递归自联接
- php - 在 Laravel 5.8 中聊天
- c# - 如何使用 C# 将 XML 解析为 lisp 的 S-Expression？
- kubernetes - 为什么我们在 Kuberntes 部署/容器定义中需要一个端口/容器端口？