将菜单添加到导航栏的Javascript
我从学校得到了以下代码。如何使用javascript在mySidenav中动态添加更多菜单项 CCS组:将菜单添加到导航栏的Javascript,javascript,html,css,Javascript,Html,Css,我从学校得到了以下代码。如何使用javascript在mySidenav中动态添加更多菜单项 CCS组: .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 6
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
HTML正文:
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
如何将对象xxx添加到mySidenav?好吧,您需要使用普通的javascript来实现这一点,其他什么都不需要
var menu= document.getElementById("mySidenav");
newItem = //create the new item here
menu.insertBefore(newItem, menu.childNodes[0]);
事情是这样的
document
对象的getElementById()
方法定义一个指向侧栏的变量
var menu = document.getElementById("mySidenav");
var newlink= document.createElement("a"); // In this case it's anchor element.
document
对象的createElement()
方法创建一个新元素
var menu = document.getElementById("mySidenav");
var newlink= document.createElement("a"); // In this case it's anchor element.
menu.appendChild(newlink);
爱丽丝。我测试了这个,似乎很有效:
var nav=document.getElementById("mySidenav");
var node = document.createElement("a");
var textnode = document.createTextNode("newlink");
node.appendChild(textnode);
node.setAttribute('href', 'http://www.google.com');
nav.appendChild(node);
您应该补充一点,这不是普通的解决方案,但它需要jQuery库。