导航栏显示跟隐藏

满目山河。 2020-08-24 02:14:45

想请教大佬们，关于这个类型的导航栏有没有代码分享一下，然后讲解一下，让我学习学习，多谢大佬

...全文

12111 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

满目山河。 2020-09-10

打赏
举报

引用 17 楼 FLTmiao的回复:

简单，源码之家网站，里面一大堆导航啊，下拉之类的效果，下载别人的源码，可以进行参考，我刚开始学习的时候也是这样

感谢，又捞了一个。

FLTmiao 2020-09-10

打赏
举报

简单，源码之家网站，里面一大堆导航啊，下拉之类的效果，下载别人的源码，可以进行参考，我刚开始学习的时候也是这样

sha虫剂 2020-09-08

打赏
举报

本质上就是鼠标移入的时候改变css 把css的display变为block，移出的时候又变成none

chinaskysun 2020-09-07

打赏
举报

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>鼠标悬浮菜单出现二级菜单</title>
    <style>
        a {
            color: #fff;
            text-decoration: none;
        }

        ul {
            margin: 0;
            list-style: none;
        }

        #menu {
            width: 500px;
            height: 60px;
            background: slategray;
            border-radius: 6px;
            box-shadow: 2px 2px 5px snow;
        }

        #menu li {
            float: left;
            line-height: 60px;
            padding: 0;
            position: relative;
        }

        #menu li a {
            padding: 0 20px;
            display: inline-block;
        }

        #menu li .lis {
            width: 300px;
            height: 40px;
            line-height: 40px;
            border-radius: 5px;
            background: lightblue;
            position: absolute;
            top: 50px;
            display: none;
            left: 0;
        }

        #menu li .lis a {
            padding: 0 10px;
            background: none;
            opacity: 1;
            color: #fff;
        }

        #menu li .lis a:hover {
            text-decoration: underline;
        }

        #menu li:hover>.lis {
            display: unset;
        }
    </style>

</head>

<body>
    <div>
        <ul id="menu">
            <li>
                <a href="javascript:;">水果</a>
                <div class="lis">
                    <a>苹果</a>
                    <a>西瓜</a>
                    <a>香蕉</a>
                </div>
            </li>
            <li>
                <a href="javascript:;">蔬菜</a>
                <div class="lis">
                    <a>青菜</a>
                    <a>白菜</a>
                    <a>番茄</a>
                    <a>土豆</a>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>

满目山河。 2020-08-30

打赏
举报

引用 11 楼 chinaskysun的回复:

能用CSS实现的就不要用js,借用8楼的代码,在style里插入一下内容。 .menu>li:hover>.lis{display:inline} 一行css，替换那么多js，是不是很清爽？

谢谢(*°∀°)=3大佬，我捣鼓捣鼓。

满目山河。 2020-08-30

打赏
举报

引用 10 楼今夜雨声烦的回复:

推荐一个库，你可以摸索一下 http://www.jq22.com/

多谢大佬，感谢感谢。

满目山河。 2020-08-30

打赏
举报

引用 9 楼一介青烟小生的回复:

用下组件库就好了嘛。elementui

多谢大佬，感谢感谢。

一介青烟小生 2020-08-29

打赏
举报

用下组件库就好了嘛。elementui

chinaskysun 2020-08-29

打赏
举报

能用CSS实现的就不要用js,借用8楼的代码,在style里插入一下内容。 .menu>li:hover>.lis{display:inline} 一行css，替换那么多js，是不是很清爽？

shuxhan 2020-08-29

打赏
举报

推荐一个库，你可以摸索一下 http://www.jq22.com/

吃火锅啵咯 2020-08-26

打赏
举报

js: v-show v-if
css: display

满目山河。 2020-08-26

打赏
举报

引用 7 楼 wzh970514 的回复:

<!DOCTYPE html> <html> <head > <meta charset="utf-8"> <title>鼠标悬浮菜单出现二级菜单</title > <style> a{ color: #fff; text-decoration: none; } ul { margin: 0; list-style: none; } #menu { width: 500px; height: 60px; background: slategray; border-radius: 6px; box-shadow: 2px 2px 5px snow; } #menu li { float: left; margin-top: 10px; line-height: 22px; padding: 0; position: relative; } #menu li a { padding: 10px 20px; display: inline-block; } #menu li .lis { width: 300px; height: 40px; line-height: 40px; border-radius: 5px; background: lightblue; position: absolute; top: 70px; } #menu li .lis a { padding: 0 10px; background: none; opacity: 1; color: #fff; } #menu li .lis a:hover { text-decoration: underline; } </style> <script> window.onload = function() { var oUl = document.getElementById('menu'); var aLi = oUl.getElementsByTagName('li'); var aDiv = oUl.getElementsByTagName('div'); var timer = null; for (var i = 0; i < aLi.length; i++) { var oA = aLi[i].getElementsByTagName('a')[0]; oA.index = i; clearTimeout(timer); oA.onmouseover = function() { aDiv[this.index].style.display = 'block'; } oA.onmouseout = function() { n = this.index; timer = setTimeout(function() { aDiv[n].style.display = 'none'; }, 200); } aDiv[i].onmouseover = function() { clearTimeout(timer); this.style.display = 'block'; } aDiv[i].onmouseout = function() { this.style.display = 'none'; } } } </script> </head> <body> <div> <ul id = "menu"> <li> <a href ="javascript:;" >水果</a> <div class ="lis" style ="display:none;"> <a>苹果</a > <a>西瓜</a> <a>香蕉</a> </div> </li> <li> <a href="javascript:;">蔬菜</a> <div class="lis" style="display:none;"> <a>青菜</a> <a>白菜</a> <a>番茄</a> <a>土豆</a> </div> </li> </ul> </div> </body> </html>

真爱，谢谢你！

吃火锅啵咯 2020-08-26

打赏
举报

<!DOCTYPE html>

<html>
<head >
<meta charset="utf-8">
<title>鼠标悬浮菜单出现二级菜单</title >
<style>
a{
color: #fff;
text-decoration: none;
}
ul {
margin: 0;
list-style: none;
}
#menu {
width: 500px;
height: 60px;
background: slategray;
border-radius: 6px;
box-shadow: 2px 2px 5px snow;
}
#menu li {
float: left;
margin-top: 10px;
line-height: 22px;
padding: 0;
position: relative;
}
#menu li a {
padding: 10px 20px;
display: inline-block;
}
#menu li .lis {
width: 300px;
height: 40px;
line-height: 40px;
border-radius: 5px;
background: lightblue;
position: absolute;
top: 70px;
}
#menu li .lis a {
padding: 0 10px;
background: none;
opacity: 1;
color: #fff;
}
#menu li .lis a:hover {
text-decoration: underline;
}
</style>
<script>
window.onload = function() {
var oUl = document.getElementById('menu');
var aLi = oUl.getElementsByTagName('li');
var aDiv = oUl.getElementsByTagName('div');
var timer = null;
for (var i = 0; i < aLi.length; i++) {
var oA = aLi[i].getElementsByTagName('a')[0];
oA.index = i;
clearTimeout(timer);
oA.onmouseover = function() {
aDiv[this.index].style.display = 'block';
}
oA.onmouseout = function() {
n = this.index;
timer = setTimeout(function() {
aDiv[n].style.display = 'none';
}, 200);
}
aDiv[i].onmouseover = function() {
clearTimeout(timer);
this.style.display = 'block';
}
aDiv[i].onmouseout = function() {
this.style.display = 'none';
}
}
}
</script>
</head>
<body>
<div>
<ul id = "menu">
<li>
<a href ="javascript:;" >水果</a>
<div class ="lis" style ="display:none;">
<a>苹果</a >
<a>西瓜</a>
<a>香蕉</a>
</div>
</li>
<li>
<a href="javascript:;">蔬菜</a>
<div class="lis" style="display:none;">
<a>青菜</a>
<a>白菜</a>
<a>番茄</a>
<a>土豆</a>
</div>
</li>
</ul>
</div>
</body>
</html>

满目山河。 2020-08-26