首页新闻找找看学习计划

请教弹出下拉菜单的问题

0
[已解决问题] 解决于 2017-12-06 12:02

在网页中,经常会看到鼠标经过时会有一个下拉菜单出来,想请问一下,这个是怎么实现的呢?

一只啥也不懂的小白的主页 一只啥也不懂的小白 | 菜鸟二级 | 园豆:202
提问于:2017-12-01 22:50
< >
分享
最佳答案
0

http://www.cnblogs.com/lyd447113735/p/7920555.html
这是我博客中记录的怎么写下拉菜单的步骤和代码,因为不知道你有没有学函数,所以这篇是用css代码写的,比较简便和清晰,有基础知识就可以看懂。有问题可以留言

奖励园豆:5
西红柿里没有番茄 | 小虾三级 |园豆:538 | 2017-12-03 19:02
其他回答(7)
0

js事件。 鼠标悬停事件吧。 你可以百度一下

至尊宝" | 园豆:208 (菜鸟二级) | 2017-12-02 00:41
0

你可以先在一个元素上设置onHover事件,当鼠标触发这个事件的时候,你可以创建一个下拉列表,然后移开的时候,把它移除掉。也可以预先就设置好下拉列表,然后设置隐藏,当触发的时候显示就ok啦。

HDWK | 园豆:206 (菜鸟二级) | 2017-12-02 10:16
0

首先,我们要完成鼠标悬停事件就得先知道要用到的两个关键词:

(1)onmouseout   鼠标从某元素移开触发的事件

(2)onmouseover  鼠标移到某元素之上后触发的事件

具体的代码demo如下:

<script type="text/javascript">
    function out() {
        $("#sel").empty();
        $("#sel").append("<dt>菜单列表</dt>");
    }
    function move() {
        $("#sel").append("<dd>用户中心</dd><dd>登录</dd><dd>注册</dd><dd>消息</dd><dd>退出</dd>");
    }
</script>

<dl onmouseout="out()" onmouseover="move()" id="sel">
    <dt>菜单列表</dt>
</dl>

演示效果,目前我还不会插入图片,见谅啊

温煦 | 园豆:202 (菜鸟二级) | 2017-12-02 11:15
0

css也可以轻松实现,不一定需要js,可以搜下“纯css下拉菜单”

风不平 | 园豆:109 (初学一级) | 2017-12-03 11:17
0

css就可以实现,参考:

<style>
        body{padding-top: 0px;}
        .starter {padding: 40px 15px; text-align: center;}
        .nav > li .dropdown-menu { margin: 0; border-radius: 0px; background: #212121; border-color: #212121; } 
        .nav > li:hover .dropdown-menu { display: block; }
        .dropdown-menu > li > a:hover { background: #08c; }
        .dropdown-menu li a{color: #fff;}
         .btn-primary{
    background-color: #118DF0;
    color: #fff;
    border: 2px solid #118DF0;
    border-color:#118DF0;
     }    
</style>
ycyzharry | 园豆:18627 (专家六级) | 2017-12-04 10:10
0
<style>
        body{padding-top: 0px;}
        .starter {padding: 40px 15px; text-align: center;}
        .nav > li .dropdown-menu { margin: 0; border-radius: 0px; background: #212121; border-color: #212121; } 
        .nav > li:hover .dropdown-menu { display: block; }
        .dropdown-menu > li > a:hover { background: #08c; }
        .dropdown-menu li a{color: #fff;}
         .btn-primary{
    background-color: #118DF0;
    color: #fff;
    border: 2px solid #118DF0;
    border-color:#118DF0;
     }    
</style>
鸿燕藏锋 | 园豆:568 (小虾三级) | 2017-12-04 10:37
0

相对来说的话css计较简单,伪类元素:hover就能实现其效果

~逍遥★星辰~ | 园豆:245 (菜鸟二级) | 2017-12-04 16:36
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册