3.写一个简单的弹出菜单

效果图

首先来看一下html结构，很简单

<div class="pop-con">hover<ul class="pop"><li><a href="#">公告</a></li><li><a href="#">投诉</a></li><li><a href="#">搜索</a></li><li><a href="#">绑定微信</a></li><li><a href="#">修改密码</a></li><li><a href="#">查看二维码</a></li><li><a href="#">退出登录</a></li></ul>
</div>

这是css

a{text-decoration: none;
}
li{list-style: none;
}
.pop-con{position: relative;width: 50px;height: 20px;margin: 0 auto;border: 1px solid #eee;padding: 10px;
}
.pop-con:hover>.pop{visibility: visible;
}
.pop{visibility: hidden;position: absolute;padding-left: 0;background: white;width: 110px;top: 0;left: -10px;margin-top: 44px;filter: drop-shadow(0px 3px 5px rgba(0,0,0,.32));border-radius: 4px;padding-top: 0.25rem;padding-bottom: 0.25rem;
}
.pop::before{content: '';height: 0;width: 0;border: 10px solid transparent;border-color: transparent transparent white transparent;/*这是个三角形*/position: absolute;top: -20px;left: 10px;}
.pop li{color: #333;text-align: center;padding-left: 0.25rem;height: 30px;line-height: 30px;}
.pop li>a{display: inline-block;height: 32px;line-height: 30px;font-size: 15px;width: 100%;color: #333;
}

想象一下，其实很多的菜单原理都是一样的，修改一下尺寸，修改一下定位就能购应用在很多场景，比如我模仿天猫写的的这个，当然下面这个需要结合js，相对复杂一些：

转载于:https://www.cnblogs.com/famLiu/p/7201079.html

3.写一个简单的弹出菜单相关推荐

silverlight创建新的控件——一个简单的弹出菜单
照旧,直接贴代码 <UserControlxmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ...
简单css弹出菜单，ie8一定要在头部加!DOCTYPE html PUBLIC 。。。不然没反应。花了一个小时才找到这个原因，mlgbd！！...
简单css弹出菜单,ie8一定要在头部加以下代码,不然没反应.花了一个小时才找到这个原因,mlgbd!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
jQuery写一个简单的弹幕墙
近几年由于直播,弹幕流行起来,之前看到过用js制作弹幕墙的思路,觉得很有趣.自己就花了点时间把他做成了更灵活的jQuery插件,现在分享出来. 详细代码下载:http://www.demodashi ...
为什么二级菜单会被挡住_父页面弹出菜单被子页面挡住问题
常规的方法是不能解决问题的. 子页面既然挡在主页面的前面,被遮挡的区域就不可能显示主页面的内容,无论主页面里面 DOM 对象的 zIndex 调到多高也没用. 我记得官方技术人员在另一个类似问题的帖子 ...
Mockplus的组件（弹出菜单）的简单使用方法。
Mockplus的弹出菜单在交互组件中,首先将弹出菜单组件拉到界面UI上.如图双击该组件,可以修改菜单显示的文本,如图之后将菜单里的链接点链接到其他页面,当前页面或其他组件上, 选择一个组件,用来 ...
popupmenu java_Java基于JPopupMenu实现系统托盘的弹出菜单，解决PopupMenu弹出菜单中文乱码...
本人萌新,利用业余时间学习Java.最近在写一个GUI程序的时候遇到一个问题,系统托盘创建弹出菜单中文乱码,网上搜索很多内容都没有找到解决方案,现将个人解决方案分享给大家,希望有所帮助一.Popup ...
html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布，模仿苹果官网导航块的半透明效果。...
需求提要我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...
Android自定义弹出菜单+动画实现
看到网上一个Demo里面弹出菜单的动画效果很好看,自己就利用工作空余时间也写了一下.具体实现如下: 1 自定义一个显示Icon的ImageView,主要用来判断该ImageView是否需要放在父布局底 ...
一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)...
(一).说明功能类似Windows 操作系统自带的记事本. 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开保存对话框等控件用法以及记事本菜单事件的具体代码) (二).图片示例 (三) ...
android菜单键变成箭头,Android：DropPopMenu — 显示位置跟随操作按钮显示的带箭头的弹出菜单(转载,写的很好)...
转载请注明出处:http://blog.csdn.net/hmyang314/article/details/70920295DropPopMenu 显示位置跟随操作按钮显示的带箭头的弹出菜单 Git ...

3.写一个简单的弹出菜单

3.写一个简单的弹出菜单相关推荐

最新文章

热门文章