设为首页收藏本站
开启辅助访问
搜索
快捷导航
论坛 › 学院 › 平面设计学院 › 我想把这个菜单做成一个悬浮在左边300px；上边500px；但 ...
发新帖
返回列表
1 719
电梯直达  跳转到指定楼层

[作业] 我想把这个菜单做成一个悬浮在左边300px；上边500px；但是这个定位怎么没有效果呢？

我要学代码|注册会员 |勤币 116 |学币 0
发表于 2018-7-26 13:13 | 复制链接 | 打印 | 上一主题 | 下一主题
JavaScript+jQuery网页前端教程 - 6.4 折叠菜单及手风琴特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="新建文件夹 (2)/jquery-3.0.0/jquery-3.0.0.min.js"></script>

<script>

        $(function(){
                $(".menu").click(function(){
                        $(this).next(".menuA").slideToggle().siblings(".menuA").slideUp();
                       
                       
                        })
               
               
                })
</script>
<style>
        .wrap{ width:300px; height:10000px;position:fixed; left:300px; top:520px}
        .menu{ width:200px; height:30px; background:#999; text-align:center; line-height:30px; color:#FFF;border-bottom:1px solid #FFF; cursor:pointer;  }
        .menuA{ width:200px;  background:#CCC; display:none; }
        a{ text-decoration:none; display:list-item; text-align:center; padding:20px 0; color:#FFF; border-bottom:1px solid #FFF;}
        a:hover{ background:#636;p}
        .menu:hover{ background:#603}
       
</style>
</head>

<body>
<div class="wrap"><!--最外层 包裹层-->
        <div class="menu">菜单一</div> <!--第一个菜单-->
        <div class="menuA">
            <span><a href="#">内容一</a></span>
            <span><a href="#">内容二</a></span>
            <span><a href="#">内容三</a></span>
            <span><a href="#">内容四</a></span>
            <span><a href="#">内容五</a></span>
        </div>


            <div class="menu">菜单二</div><!--第二个菜单-->
        <div class="menuA">
            <span><a href="#">内容一</a></span>
            <span><a href="#">内容二</a></span>
            <span><a href="#">内容三</a></span>
            <span><a href="#">内容四</a></span>
            <span><a href="#">内容五</a></span>
        </div>


         <div class="menu">菜单三</div><!--第三个菜单-->
        <div class="menuA">
            <span><a href="#">内容一</a></span>
            <span><a href="#">内容二</a></span>
            <span><a href="#">内容三</a></span>
            <span><a href="#">内容四</a></span>
            <span><a href="#">内容五</a></span>
        </div>

        <div class="kg"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
</div>   
</body>
</html>
举报 使用道具
| 回复

共1个回复 最后回复于 2018-7-26 17:37

yuanxi52028
注册会员
勤币 614   学币 0  
沙发
发表于 2018-7-26 17:37:33 | 只看该作者
没太懂意思，不是都有效果吗？

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
举报 使用道具
回复 支持 反对
发新帖
返回列表
B Color Image Link Quote Code Smilies
高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表