DIV下拉式菜单（一）
时间： 2021-07-31 作者：daque
这是一个特殊大略的菜单，固然大略，但咱们不妨从这个示例中进修到少许相关css和javascripts的少许相关常识，对于看法下拉式菜单的创造道理和普通有很大的长处。在这个示例中，我用到了div标识来动作我的下拉菜单列，而用一个table来做我的菜单头。道理即是经过辨别鼠标挪动来电门下拉菜单列的表露属性。 底下是这个div菜单的功效，你可单击页面任何空缺地来废除下拉菜单的表露。
期刊本领站点 派别站点 部分保藏站点
天极网 yesky.com 电脑商谍报 新潮电子
新浪网 sina 搜狐 sohu 网易 netease
耗子搜集编制程序站 华夏同窗录 华夏软硬件开拓网
好了，即使我报告你，如许的功效也就几十行的代码，你信吗？尽管如何样，让咱们来一步一步进修这个菜单是如何做出来的。step-by-step，let's go. 第一步，你须要设置一下菜单项和菜单列的 css层叠款式表，这边，即使你不领会css是什么道理，请参见《电脑报网站》的相关css的教程。咱们设置两个css的class，一个是meun，另一个是submenu， menu设置了表露在菜单顶上的款式，而submenu设置了下拉菜单列的表露款式。这边，须要提防的是submenu中的“position:absolute;width:200”css属性，这是必需的，由于这确定了咱们表露这个submenu的场所。而其它的css的属性是可要可不要的。底下是这两个css class的刻画，你不妨把底下这段话放在网的<head></head>之间，或是<body></body>之间。
<style> <!-- .menu {background-color:green;width:120; height:20;color: white; text-align: center;font-size:9pt;font-weight:bolder} .submenu {position:absolute;top:40;background-color:lightyellow;width:180; font-size:9pt} --> </style>
第二步，咱们来看一下湮没和表露下拉菜单列的javascript的代码。这段代码特殊大略，只有学过一点javascripts的人该当是很简单看懂的。即使你不懂javascript的话，也请参见《电脑报网站》上的相关javascripts的作品。这段代码的含意是，不管什么功夫，只有鼠标一加入菜单项（menu）元件中，那么它的下拉菜单列就会被一个叫show因变量表露出来。这个show因变量重要功效是表露暂时的下拉菜单列，并湮没其它的菜单列，并把暂时所表露的菜单项放入变量cm中。其余，在这边，我还介入了一个大略的鼠标单击事变（onclick）句柄，当鼠标单击网页时，就湮没一切的下拉菜单列。底下，我给出了所有javascript的步调，个中有一个叫 getpos 的因变量，这是用来获得下拉菜单列的表露场所的。
<script> var cm=null; document.onclick = new function("show(null)") function getpos(el,sprop) {var ipos = 0 while (el!=null) {ipos+=el["offset" + sprop] el = el.offsetparent} return ipos} function show(el,m) {if (m) {m.style.display=' '; m.style.pixelleft = getpos(el,"left") m.style.pixeltop = getpos(el,"top") + el.offsetheight} if ((m!=cm) && (cm)) cm.style.display='none' cm=m } </script>
相关推荐
推荐下载
热门阅览
最新排行
- 1 手机如何装windows系统，手机装windows系统教程
- 2 微信公众号重大调整 新公注册公众号将没有留言功能
- 3 烧杯app最剧烈的反应有哪些？ 烧杯app攻略
- 4 微信小程序怎么用 微信小程序使用教程
- 5 360快剪辑怎么使用？360快剪辑图文视频教程
- 6 八分音符外挂神器：绝望中的战斗机
- 7 2017热门微信小程序排行榜 微信小程序二维码大全
- 8 微信聊天记录导出到电脑 怎么在电脑上查看微信聊天记录
- 9 在U递上赚钱和省钱教程 教你在U递上怎么赚钱何省钱
- 10 u递邀请码申请教程 u递邀请码领取方法
- 11 如何解决爱奇艺账号登陆验证 跳过爱奇艺账号手机登录验证方法分享 亲测好用
- 12 手机申请无限制申请QQ靓号 手机怎样无限申请Q号