仿新浪下拉菜单

  • 要求
    仿新浪网,鼠标移入显示下拉菜单,鼠标移出隐藏下拉菜单,具体表现如下图:
  • 代码
    <ul>
        <li id="top">微博</li>
        <li class="hide">私信</li>
        <li class="hide">评论</li>
        <li class="hide">@我</li>
    </ul>
    <script>
        var top = document.getElementById('top');
        var hide = document.getElementsByClassName('hide');//返回的是一个元素集合
        var ul = document.querySelector('ul');
        // console.log('123');
        ul.onmouseover = function() {
        //使用top.onmouseover时会在鼠标一离开zd元素时,下拉菜单立即隐藏,应该效果一样才对啊?
           hide[0].style.display = 'block';
           hide[1].style.display = 'block';
           hide[2].style.display = 'block';
        }
        ul.onmouseout = function () {
            hide[0].style.display = 'none';
            hide[1].style.display = 'none';
            hide[2].style.display = 'none';
        }
    </script>
  • 问题
    如注释处

原文地址:https://www.cnblogs.com/liusining/p/12320863.html

时间: 2024-11-07 21:53:45

仿新浪下拉菜单的相关文章

MDNavBarView下拉导航菜单(仿美团导航下拉菜单)

说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下,感觉挺不错的,复用性也比较好,但要 是换成别的样式就要去修改代码了,感觉这有点不方便也比较容易出错.于是参照他的大致思路写了一个仿下拉菜单. 具体的实现就不多说了,觉得有意思的话可以下来看看.下面说一下使用方法吧: 1.添加navbarview包下的代码与对应资源 2.布局文件中添加: <com.m

简单仿京东导航下拉菜单 javascript

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script><script type=&quo

仿QQ下拉菜单

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="description" content=""><meta name="keywords" content=""><script src="http://libs.baidu.com/jquery/1

JS+CSS打造仿QQ面板的三级折叠下拉菜单

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS+CSS打造仿QQ面板的三级折叠下拉菜单-石家庄地毯</title> <style type="text/css"> *{ margin:0px; padding:0px; border:0p

CSS+JS仿QQ面板风格的多级折叠下拉菜单

<html> <head> <title>CSS+JS仿QQ面板风格的多级折叠下拉菜单丨石家庄玻璃隔断|石家庄自动门</title> <style type="text/css"> *{ margin:0px; padding:0px; border:0px; } body{ font-size:12px; color:#333;text-align:center;} .mbox{background:#73C2FF; wid

2015.3.14(知乎首页仿写及纯CSS兼容IE6实现响应式下拉菜单)

昨晚写了一个知乎的首页练习,只完成了上半部分的练习.下半部分做了一个纯CSS的响应式下拉菜单(可以兼容IE6). 可以看出那个知乎两个大字下面的那行字是截图截下来的,有一点色差……代码如下: js的部分只用到了获取可视区域的宽度这一点. function setIndex() { var commonWidth = $(window).outerWidith; var commonWidth = $(window).outerHeight; $(".backTitle").css(&q

Android自定义控件:仿美团下拉菜单及相关代码优化

背景 最近的项目中用到了类似美团中的下拉多选菜单,在实际开发过程中,也发现了一些问题,主要归纳如下: 1.当菜单较为复杂时,如果不能设计好代码逻辑,将造成控件难于维护 2.美团菜单可以连续点击顶部tab,切换不同菜单,而我使用的popupWindow似乎在展开一个菜单时点击其他tab,菜单就会收回. 本文将针对如上两个问题进行一些讨论,最终给出较为合理的解决方案. 程序结构 由于菜单涉及多级多项,如果把UI和其他逻辑堆在一起写,必然会造成代码过于庞大,甚至没有办法扩展,更谈不上及时变更需求. V

yii2框架dropDownList的下拉菜单用法介绍

Yii2.0 默认的 dropdownlist 的使用方法.  代码如下 复制代码 <?php echo $form->field($model, 'name[]')->dropDownList(['a' => 'Item A', 'b' => 'Item B', 'c' => 'Item C']); ?> 在yii2中加放请选择的下拉菜单  代码如下 复制代码  <php echo $form->field($model, 'name[]')->

用JS控制下拉菜单效果

今天,突然想复习下之前学习做导航菜单的一些知识.之后觉得下拉菜单非常好玩儿,于是自己试着用JS调出了效果.网上有众多方法,但是感觉不是很对我的胃口,我喜欢HTML/CSS/JavaScript分离着写,用户体验重要,码农审美也很重要啊,O(∩_∩)O~ 在做下拉菜单的过程中,有以下心得: 1.this是个好东西,比如在鼠标事件中,它代表此时的鼠标事件对象本身,免去去用其他方式代表改对象的麻烦: 2.getElementsByTagName或者getElementById方法获得的是一个数组,需要