菜单栏垂直导航

来源：互联网发布：911segg.info新域名编辑：程序博客网时间：2024/05/16 00:58
<!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>
0 0