如何将菜单更改为切换菜单? [英] How can I change my menu to the toggle menu?
本文介绍了如何将菜单更改为切换菜单?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的菜单会在鼠标悬停时自动打开，并且在鼠标不再悬停时会关闭菜单，但是此功能不是您想要的功能，实际上我想更改菜单代码以切换菜单和所有ul我的菜单，我该怎么做? 下面的代码是我可以查看的菜单代码.
代码:
#ABT-Container {
font-family: 'Roboto', sans-serif;
background: transparent;
width: 100%;
float: right;
}
a {
text-align: center;
font-family: 'Roboto', sans-serif;
color: #333;
}
#nav {
float: right;
font-family: 'Roboto', sans-serif;
padding: 2px 6px 0;
line-height: 100%;
border-radius: 1em;
background: white;
/* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF');
/* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF));
/* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
/* for firefox 3.6+ */
border: solid 1px white;
}
#nav li {
font-family: 'Roboto', sans-serif;
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-family: 'Roboto', sans-serif;
color: #353535;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
}
/* sub levels link hover */
#nav ul li:hover a,
#nav li:hover li a {
font-family: 'Roboto', sans-serif;
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
/* level 2 list */
#nav ul {
font-family: 'Roboto', sans-serif;
background: #FFFFFF;
/* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF');
/* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF));
/* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #FFFFFF);
/* for firefox 3.6+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
right: 0;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}
/* dropdown */
#nav li:hover>ul {
font-family: 'Roboto', sans-serif;
display: block;
}
#nav ul li {
font-family: 'Roboto', sans-serif;
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-family: 'Roboto', sans-serif;
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
font-family: 'Roboto', sans-serif;
right: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child>a {
-webkit-border-top-right-radius: 1px;
-moz-border-radius-topleft: 1px;
-webkit-border-top-left-radius: 1px;
-moz-border-radius-topright: 1px;
}
#nav ul li:last-child>a {
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius-bottomleft: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
}
/* clearfix */
#nav:after {
font-family: 'Roboto', sans-serif;
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
font-family: 'Roboto', sans-serif;
display: inline-block;
}
html[xmlns] #nav {
font-family: 'Roboto', sans-serif;
display: block;
}
* html #nav {
height: 1%;
}
.menu_line {
width: 25px;
height: 2px;
background-color: black;
color: black;
margin: 4px 0;
}
<nav class="navbar">
<div id="ABT-Container">
<ul id="nav">
<li class="w3-animate-right">
<a href="#">
<p class="menu_line"></p>
<p class="menu_line"></p>
<p class="menu_line"></p>
</a>
<ul>
<li><a href="#">About US</a>
<ul>
<li>
</li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Sales</a>
<ul>
<li><a href="#">Support</a></li>
</ul>
</li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Department</a>
</li>
</ul>
</li>
</li>
</ul>
</ul>
</ul>
</div>
</nav>
解决方案
您也可以在不使用jquery的情况下执行此操作，但是我个人会添加一些内容以指示某些内容具有子菜单，因为您现在必须尝试找出答案. /p>
let hovering = false;
function toggle(element) {
const nodes = getChildNodes(element.parentElement);
const parentNodes = getChildNodes(element.parentElement.parentElement);
if(parentNodes.length > 1) {
parentNodes.forEach(function(parentNode) {
const parentChildNodes = getChildNodes(parentNode);
if(parentChildNodes.length > 1 && parentChildNodes[1].style.display === 'block' && parentChildNodes[1] !== nodes[1]) {
parentChildNodes[1].style.display = 'none';
}
});
}
if(nodes[1].style.display === 'block') {
nodes[1].style.display = 'none';
} else {
nodes[1].style.display = 'block';
}
}
function getChildNodes(node) {
let children = new Array();
for(const child in node.childNodes) {
if(node.childNodes[child].nodeType == 1) {
children.push(node.childNodes[child]);
}
}
return children;
}
window.onload = function() {
// For clicks inside the element
document.getElementById('menuElement').onclick = function(e) {
// Make sure the event doesn't bubble from your element
if (e) { e.stopPropagation(); }
else { window.event.cancelBubble = true; }
// Place the code for this element here
};
// For clicks elsewhere on the page
document.onclick = function() {
const uls = document.getElementById('nav').getElementsByTagName('ul');
for (i = 0; i < uls.length; i++) {
uls[i].style.display = 'none';
}
};
};
#ABT-Container {
font-family: 'Roboto', sans-serif;
background: transparent;
width:100%; float:right;
}
a {
text-align: center;
font-family: 'Roboto', sans-serif;
color: #333;
}
#nav {
float: right;
font-family: 'Roboto', sans-serif;
padding: 2px 6px 0;
line-height: 100%;
border-radius: 1em;
background: white; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF); /* for firefox 3.6+ */
border: solid 1px white;
}
#nav li {
font-family: 'Roboto', sans-serif;
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-family: 'Roboto', sans-serif;
color: #353535;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
}
/* level 2 list */
#nav ul {
font-family: 'Roboto', sans-serif;
background: #FFFFFF; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #FFFFFF); /* for firefox 3.6+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
right: 0;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}
/* dropdown */
#nav ul li {
font-family: 'Roboto', sans-serif;
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-family: 'Roboto', sans-serif;
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
font-family: 'Roboto', sans-serif;
right: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-right-radius: 1px;
-moz-border-radius-topleft: 1px;
-webkit-border-top-left-radius: 1px;
-moz-border-radius-topright: 1px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius-bottomleft: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
}
/* clearfix */
#nav:after {
font-family: 'Roboto', sans-serif;
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
font-family: 'Roboto', sans-serif;
display: inline-block;
}
html[xmlns] #nav {
font-family: 'Roboto', sans-serif;
display: block;
}
* html #nav {
height: 1%;
}
.menu_line{
width: 25px;
height: 2px;
background-color: black;
color: black;
margin: 4px 0;
}
<nav class="navbar">
<div id="ABT-Container">
<ul id="nav">
<li class="w3-animate-right" id="menuElement">
<a href="#" onclick="toggle(this)">
<p class="menu_line"></p>
<p class="menu_line"></p>
<p class="menu_line"></p>
</a>
<ul>
<li>
<a href="#" onclick="console.log('about us clicked')">About US</a>
<ul>
<li></li>
</ul>
</li>
<li>
<a href="#" onclick="toggle(this)">Multi-Levels</a>
<ul>
<li>
<a href="#" onclick="toggle(this)">Sales</a>
<ul>
<li>
<a href="#" onclick="console.log('support clicked')">Support</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="console.log('another link clicked')">Another Link</a>
</li>
<li>
<a href="#" onclick="console.log('department clicked')">Department</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="toggle(this)">Multi-Levels2</a>
<ul>
<li>
<a href="#" onclick="toggle(this)">Sales2</a>
<ul>
<li>
<a href="#" onclick="console.log('support2 clicked')">Support2</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="toggle(this)">Sales3</a>
<ul>
<li>
<a href="#" onclick="console.log('support clicked3')">Support3</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="console.log('another link2 clicked')">Another Link2</a>
</li>
<li>
<a href="#" onclick="console.log('department clicked2')">Department2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
现在也关闭了菜单上未单击的位置.
My menu opens automatically on mouse hover and it closes the menu when the mouse isn't hovering anymore, But this functionality is not the desired one , I actually want to change my menu code to toggle for menu and all of ul in my menu , how can I do that ? The below code is my menu code that you can look at it.
The code:
#ABT-Container {
font-family: 'Roboto', sans-serif;
background: transparent;
width: 100%;
float: right;
}
a {
text-align: center;
font-family: 'Roboto', sans-serif;
color: #333;
}
#nav {
float: right;
font-family: 'Roboto', sans-serif;
padding: 2px 6px 0;
line-height: 100%;
border-radius: 1em;
background: white;
/* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF');
/* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF));
/* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF);
/* for firefox 3.6+ */
border: solid 1px white;
}
#nav li {
font-family: 'Roboto', sans-serif;
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-family: 'Roboto', sans-serif;
color: #353535;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
}
/* sub levels link hover */
#nav ul li:hover a,
#nav li:hover li a {
font-family: 'Roboto', sans-serif;
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
/* level 2 list */
#nav ul {
font-family: 'Roboto', sans-serif;
background: #FFFFFF;
/* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF');
/* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF));
/* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #FFFFFF);
/* for firefox 3.6+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
right: 0;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}
/* dropdown */
#nav li:hover>ul {
font-family: 'Roboto', sans-serif;
display: block;
}
#nav ul li {
font-family: 'Roboto', sans-serif;
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-family: 'Roboto', sans-serif;
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
font-family: 'Roboto', sans-serif;
right: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child>a {
-webkit-border-top-right-radius: 1px;
-moz-border-radius-topleft: 1px;
-webkit-border-top-left-radius: 1px;
-moz-border-radius-topright: 1px;
}
#nav ul li:last-child>a {
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius-bottomleft: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
}
/* clearfix */
#nav:after {
font-family: 'Roboto', sans-serif;
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
font-family: 'Roboto', sans-serif;
display: inline-block;
}
html[xmlns] #nav {
font-family: 'Roboto', sans-serif;
display: block;
}
* html #nav {
height: 1%;
}
.menu_line {
width: 25px;
height: 2px;
background-color: black;
color: black;
margin: 4px 0;
}
<nav class="navbar">
<div id="ABT-Container">
<ul id="nav">
<li class="w3-animate-right">
<a href="#">
<p class="menu_line"></p>
<p class="menu_line"></p>
<p class="menu_line"></p>
</a>
<ul>
<li><a href="#">About US</a>
<ul>
<li>
</li>
</ul>
</li>
<li><a href="#">Multi-Levels</a>
<ul>
<li><a href="#">Sales</a>
<ul>
<li><a href="#">Support</a></li>
</ul>
</li>
<li><a href="#">Another Link</a></li>
<li><a href="#">Department</a>
</li>
</ul>
</li>
</li>
</ul>
</ul>
</ul>
</div>
</nav>
解决方案
You can also do this without jquery, but personally I'd add something to indicate something has a submenu, as you now have to try to find out.
let hovering = false;
function toggle(element) {
const nodes = getChildNodes(element.parentElement);
const parentNodes = getChildNodes(element.parentElement.parentElement);
if(parentNodes.length > 1) {
parentNodes.forEach(function(parentNode) {
const parentChildNodes = getChildNodes(parentNode);
if(parentChildNodes.length > 1 && parentChildNodes[1].style.display === 'block' && parentChildNodes[1] !== nodes[1]) {
parentChildNodes[1].style.display = 'none';
}
});
}
if(nodes[1].style.display === 'block') {
nodes[1].style.display = 'none';
} else {
nodes[1].style.display = 'block';
}
}
function getChildNodes(node) {
let children = new Array();
for(const child in node.childNodes) {
if(node.childNodes[child].nodeType == 1) {
children.push(node.childNodes[child]);
}
}
return children;
}
window.onload = function() {
// For clicks inside the element
document.getElementById('menuElement').onclick = function(e) {
// Make sure the event doesn't bubble from your element
if (e) { e.stopPropagation(); }
else { window.event.cancelBubble = true; }
// Place the code for this element here
};
// For clicks elsewhere on the page
document.onclick = function() {
const uls = document.getElementById('nav').getElementsByTagName('ul');
for (i = 0; i < uls.length; i++) {
uls[i].style.display = 'none';
}
};
};
#ABT-Container {
font-family: 'Roboto', sans-serif;
background: transparent;
width:100%; float:right;
}
a {
text-align: center;
font-family: 'Roboto', sans-serif;
color: #333;
}
#nav {
float: right;
font-family: 'Roboto', sans-serif;
padding: 2px 6px 0;
line-height: 100%;
border-radius: 1em;
background: white; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#FFFFFF), to(#FFFFFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #FFFFFF, #FFFFFF); /* for firefox 3.6+ */
border: solid 1px white;
}
#nav li {
font-family: 'Roboto', sans-serif;
margin: 0 5px;
padding: 0 0 8px;
float: right;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-family: 'Roboto', sans-serif;
color: #353535;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 0em;
-moz-border-radius: 0em;
text-shadow: 0 0px 0px rgba(0, 0, 0, .3);
}
/* level 2 list */
#nav ul {
font-family: 'Roboto', sans-serif;
background: #FFFFFF; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#FFFFFF'); /* for IE */
background: -webkit-gradient(linear, right top, right bottom, from(#fff), to(#FFFFFF)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #FFFFFF); /* for firefox 3.6+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
right: 0;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
box-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}
/* dropdown */
#nav ul li {
font-family: 'Roboto', sans-serif;
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-family: 'Roboto', sans-serif;
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
font-family: 'Roboto', sans-serif;
right: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-right-radius: 1px;
-moz-border-radius-topleft: 1px;
-webkit-border-top-left-radius: 1px;
-moz-border-radius-topright: 1px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-right-radius: 1px;
-moz-border-radius-bottomleft: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius-bottomright: 1px;
}
/* clearfix */
#nav:after {
font-family: 'Roboto', sans-serif;
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
font-family: 'Roboto', sans-serif;
display: inline-block;
}
html[xmlns] #nav {
font-family: 'Roboto', sans-serif;
display: block;
}
* html #nav {
height: 1%;
}
.menu_line{
width: 25px;
height: 2px;
background-color: black;
color: black;
margin: 4px 0;
}
<nav class="navbar">
<div id="ABT-Container">
<ul id="nav">
<li class="w3-animate-right" id="menuElement">
<a href="#" onclick="toggle(this)">
<p class="menu_line"></p>
<p class="menu_line"></p>
<p class="menu_line"></p>
</a>
<ul>
<li>
<a href="#" onclick="console.log('about us clicked')">About US</a>
<ul>
<li></li>
</ul>
</li>
<li>
<a href="#" onclick="toggle(this)">Multi-Levels</a>
<ul>
<li>
<a href="#" onclick="toggle(this)">Sales</a>
<ul>
<li>
<a href="#" onclick="console.log('support clicked')">Support</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="console.log('another link clicked')">Another Link</a>
</li>
<li>
<a href="#" onclick="console.log('department clicked')">Department</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="toggle(this)">Multi-Levels2</a>
<ul>
<li>
<a href="#" onclick="toggle(this)">Sales2</a>
<ul>
<li>
<a href="#" onclick="console.log('support2 clicked')">Support2</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="toggle(this)">Sales3</a>
<ul>
<li>
<a href="#" onclick="console.log('support clicked3')">Support3</a>
</li>
</ul>
</li>
<li>
<a href="#" onclick="console.log('another link2 clicked')">Another Link2</a>
</li>
<li>
<a href="#" onclick="console.log('department clicked2')">Department2</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
Edit: Now also closing on clicking somewhere not on the menu.
这篇关于如何将菜单更改为切换菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
