个人中心
gpt4 book ai didi

javascript - 多层下拉菜单

转载 作者：太空宇宙 更新时间：2023-11-04 16:18:45 25 4
gpt4 key购买 nike

我三个月前才开始编程。所以，我只是在学习东西我想学习多层下拉菜单，我下载了这个文件，据我所知，它看起来非常高级，我认为它现在对我没有用我设法制作了一个尽可能简单的下拉菜单，我试图将它变成多层，但我无法将 css 添加到它随机弹出的新层我想像多层下拉菜单一样组织它

JavaScript

<script type="text/javascript" >
function show(id)
{
var a=document.getElementById(id);
a.style.visibility="visible";
}
function hide(id)
{
var a=document.getElementById(id);
a.style.visibility="hidden";
}
</script>

HTML

<body>
<ul id="naren">
<li><a href="#" onmouseover="show('n1')" onmouseout="hide('n1')">HOME</a>
<div id="n1" onmouseover="show('n1')" onmouseout="hide('n1')">

<a href="#" >narendra chitrakar</a>
<a href="#" onmouseover="show('n2')" onmouseout="hide('n2')">narendra chitrakar</a>
<a href="#" >narendra chitrakar</a>
<a href="#" >narendra chitrakar</a>

</li></div>

<li><a href="#" onmouseover="show('n2')" onmouseout="hide('n2')">PROFILE</a>
<a href="#" >narendra chitrakar</a>

<a href="#" >narendra chitrakar</a>

<a href="#" onmouseover="show('sm1')" onmouseout="hide('sm1')">narendra chitrakar</a>

<a href="#" >narendra chitrakar</a>

<a href="#" >narendra chitrakar</a>
</li></div>


<li><a href="#" onmouseover="show('n3')" onmouseout="hide('n3')">ABOUT US</a>
<div id="n3" onmouseover="show('n3')" onmouseout="hide('n3')">

<a href="#" >narendra chitrakar</a>

<a href="#" onmouseover="show('sm1')" onmouseout="hide('sm1')">narendra chitrakar</a>

<a href="#" >narendra chitrakar</a> 

<a href="#" >narendra chitrakar</a>

<a href="#" >narendra chitrakar</a>

</li></div>

<div id="sm1" onmouseover="show('sm1')" onmouseout="hide('sm1')" >
<span id="span1" onmouseover="show('n2')" onmouseout="hide('n2')"> 
<a href="#" >this</a>`
<a href="#" >isdasdasd</a>`
<a href="#" >skjlkdf</a>
<a href="#" >phpand mysql</a>
<a href="#" >narendra chitrakar</a></span>
</div>`</ul>

CSS

#naren li
{
margin: 0;
padding: 0;
list-style:none;
float: left;
font: bold 20px arial;
background:#F00;
    color:#CF0;
}




#naren li a:hover
{
color:#03F;
background:#FFFF99;
}



#naren li a
{   display: marker;
margin: 0 1px 0 0;
width: 60px;
background: #8B8874;
color: #FFF;
text-align: center;
text-decoration: none;
padding:0 20px 0 20px;
}

#naren div{
visibility:hidden;
padding:0;
position:fixed;
overflow-style:auto;
white-space:nowrap;
margin:0;
}
#naren div a
{   position: relative;
    display: block;
    margin: 0;
    padding: 5px 10px;
    width: auto;
    white-space: nowrap;
    text-align: left;
    text-decoration: none;
    background: #EAEBD8;
    color: #2875DE;
    font: 11px arial;


}


#naren div a:hover
{   background: #49A3FF;
    color: #FFF}

最佳答案

下载 JQuery。您将能够添加许多效果来构建一个有吸引力的下拉菜单，并以多种方式堆叠它们。您可以不隐藏 div，而是让它们可见但为空，直到您调用 .click() 函数来激活 DIV 的输入。

Download Jquery

关于javascript - 多层下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7006606/

25 4 0
文章推荐： java - OOP 和堆/栈
文章推荐： javascript - 在 Angular2 中添加外部库
文章推荐： c++ - 使用 C++ 进行 strtok 拆分时出错
文章推荐： javascript - 面板内表格的优势