菜单栏垂直导航

最新推荐文章于 2022-02-17 16:38:04 发布

陈小煋

最新推荐文章于 2022-02-17 16:38:04 发布

阅读量374

点赞数

分类专栏： javascript 文章标签： javascript js 脚本菜单栏

本文链接：https://blog.csdn.net/Star_Chan/article/details/51439438

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作菜单</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        //鼠标移到P标签时显示隐藏内容，移出后隐藏
        $(document).ready(function(e){
            $(".p1,.u1").mousemove(function (e) {
                $(".u1").addClass("dis");
            });
            $(".u1").mouseout(function (e) {
                $(".u1").removeClass("dis")
            });
            $(".p2,.u2").mousemove(function (e) {
                $(".u2").addClass("dis");
            });
            $(".u2").mouseout(function (e) {
                $(".u2").removeClass("dis")
            });
            $(".p3,.u3").mousemove(function (e) {
                $(".u3").addClass("dis");
            });
            $(".u3").mouseout(function (e) {
                $(".u3").removeClass("dis")
            });
            $(".p4,.u4").mousemove(function (e) {
                $(".u4").addClass("dis");
            });
            $(".u4").mouseout(function (e) {
                $(".u4").removeClass("dis")
            });
            $(".p5,.u5").mousemove(function (e) {
                $(".u5").addClass("dis");
            });
            $(".u5").mouseout(function (e) {
                $(".u5").removeClass("dis")
            });
            //给li加背景颜色
            $("li").hover(
                    function(){$(this).addClass("cc")},
                    function(){$(this).removeClass("cc")});
        });

    </script>
</head>
<style>
    *{ margin:0px; padding: 0px;}
    .all{ width: 300px;margin: 0px auto;  }
    .dis{ display:block;}
    .cc{ background-color: #939393;}
    p{ border: 1px solid black; padding: 5px;}
    ul { display: none; border: 1px solid black;}
    li{ list-style:none;}

</style>
<body>
<div class="all">
    <p class="p1">文学馆</p>
    <ul class="u1">
        <li>文学</li>
        <li>小说</li>
        <li>青春文学</li>
        <li>传记</li>
        <li>动漫</li>
    </ul>
    <p class="p2">少儿馆</p>
    <ul class="u2">
        <li>儿童文学</li>
        <li>绘本</li>
        <li>科普百科</li>
        <li>幼儿启蒙</li>
        <li>智力开发</li>
        <li>手工游戏</li>
        <li>动漫卡通</li>
        <li>玩具书</li>
    </ul>
    <p class="p3">教育馆</p>
    <ul class="u3">
        <li>中小学教辅</li>
        <li>外语学习</li>
        <li>考试</li>
        <li>大中专教材</li>
        <li>字典词典/工</li>
    </ul>
    <p class="p4">社科馆</p>
    <ul class="u4">
        <li>历史</li>
        <li>心理学</li>
        <li>国学古籍</li>
        <li>文化</li>
        <li>哲学宗教</li>
        <li>政治军事</li>
        <li>法律</li>
        <li>社会科学</li>
    </ul>
    <p class="p5">计算机馆</p>
    <ul class="u5">
        <li>编程语言</li>
        <li>办公软件</li>
        <li>图形图像</li>
        <li>网页制作</li>
        <li>网络与通信</li>
        <li>数据库</li>
        <li>操作系统</li>
        <li>更多分类</li>
    </ul>

</div>
</body>
</html>