一个常见下拉菜单的样式：一体化小三角（纯css手写解决）
类似下拉菜单2个一体化小三角，习惯上用字体图标加jQuery处理，比较方便，但是下面纯css手写解决方式，效果也还不错，对CSS知识也是一个比较好的孔固。
小三角用了2种不同处理方式：1、利用border属性；2、利用正方形旋转45度。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<style>
*{
margin: ;
padding: ;
}
.select {
margin: 50px auto;/*居中*/
width: 180px;
text-align: center;
}
.select a {
color: #fff;
text-decoration: none;
}
.select ul,.select li {
list-style: none;
}
.select span {
line-height: 46px;
background-color: #41b1d9;
display: block;
margin-bottom: 20px;
position: relative;
z-index: ;
border-radius: 5px;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.select span a:after{
content: " ";
display: inline-block;
width: ;
height: ;
font-size: ;
line-height: ;
border-bottom: solid 6px #fff;
border-left: solid 4px transparent;
border-right: solid 4px transparent;
vertical-align: 3px;
margin-left: 10px;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
/*给以整体的阴影和圆角 但是不能overflow*/
.drop {
left: ;
right: ;
top: -9999px;
box-shadow: 2px rgba(, , , 0.2);
border-radius: 5px;
position: absolute;
z-index: ;
-webkit-transform: translateY(-50px);/*y轴方向平移*/
transform: translateY(-50px);
opacity: ;
-webkit-transition: all .2s ease-in;/*平移时间0.2s*/
transition: all .2s ease-in;
}
/*给送个下拉助攻*/
.select:hover span{
background-color: #1f93bc;
}
.select:hover span a:after{
-webkit-transform: rotate(180deg);/*旋转180度*/
transform: rotate(180deg);
}
.select:hover .drop{
position: static;
opacity: ;
-webkit-transform: translateY();
transform: translateY();
}
/*一个很重要的三角形*/
.drop li:first-child:before {
content: " ";
font-size: ;
line-height: ;
margin: auto;/*居中*/
display: block;/*独占一行*/
box-shadow: 2px rgba(, , , 0.2); /*配合整体一样的投影*/
background-color: #fff;
width: 10px;
height: 10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); /*一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来*/
position: relative;
top: -5px; /*果断的露出上半部分*/
z-index: ; /*果断的隐藏下半部分*/
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.drop li a {
color: #;
line-height: 46px;
border-bottom: solid 1px #eee;
font-size: 14px;
display: block;
background-color: #fff; /*要有背景色才能盖住呀*/
position: relative;
z-index: ; /*这里很重要 要挡住三角形的下半部分*/
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
/*以下两块：控制第一个和最后一个li要圆角，因为最外边的div没有overflow 也不可以overflow*/
.drop li:first-child a{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-top: -10px;
}
.drop li:last-child a{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom: none;
}
/*hover事件给了li，先改变三角 再改变a*/
.drop li:hover:before{
background-color: #41b1d9;
}
.drop li:hover a {
background-color: #41b1d9;
color: #fff;
}
</style>
</head>
<body>
<div class="select">
<span><a href="javascript:void(0);">鼠标浮上来</a></span>
<div class="drop">
<ul>
<li>
<a href="javascript:void(0);">下拉菜单一</a>
</li>
<li>
<a href="javascript:void(0);">下拉菜单二</a>
</li>
<li>
<a href="javascript:void(0);">下拉菜单三</a>
</li>
<li>
<a href="javascript:void(0);">下拉菜单四</a>
</li>
</ul>
</div>
</div>
</body>
</html>
效果如下：
一个常见下拉菜单的样式：一体化小三角（纯css手写解决）的更多相关文章
- 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- 下拉菜单被表单、图片、FLASH挡住的解决办法
设置Flash的参数: <param name="wmode" value="opaque"> <object classid="c ...
- jQuery制作一个多彩下拉菜单按钮
最终效果图: html代码: <div id="list"> <div id="btn"> <div class="ic ...
- SpinnerViewPop【PopWindow样式（单选）、Dialog样式（单选+多选）的下拉菜单】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 对下拉菜单的文本区域和列表区域进行了封装.包括两种展现方式:popwindow(单选).dialog(单选+多选) 因为该封装需要在 ...
- Bootstrap下拉菜单、按钮式下拉菜单
1. 概述 下拉菜单使用频率也是比较高的,比较常见的使用场景是在导航菜单栏,某个主菜单含有下拉的子菜单. Bootstrap为下拉菜单提供了两种实现方式,即普通的下拉菜单还有按钮式的下拉菜单.我们先看 ...
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- MDNavBarView下拉导航菜单（仿美团导航下拉菜单）
说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下, ...
- 纯CSS实现带小角的对话框式下拉菜单
最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
随机推荐
- UVALive - 6912 Prime Switch （状压DP）
题目链接:传送门 [题意]有n个灯,m个开关,灯的编号从1~n,每个开关上有一个质数,这个开关同时控制编号为这个质数的倍数的灯,问最多有多少灯打开. [分析]发现小于根号1000的质数有10个左右,然 ...
- 第1天：Django框架简介与工程创建
Django简介 Django特点 环境搭建 创建工程 启动服务 使用pycharm打开工程 创建子应用 Django简介 Django,是用Python语言写的开源web开发框架,并遵循MVC设计. ...
- 线性表之顺序栈C++实现
线性表之顺序栈 栈是限定仅在表尾(栈顶)进行插入删除操作的线性表,FILO:先进后出 一.顺序栈的头文件:SeqStack.h //顺序栈头文件 #include<iostream> us ...
- [BZOJ4811][YNOI2017]由乃的OJ(树链剖分+线段树)
起床困难综合症那题,只要从高往低贪心,每次暴力跑一边看这一位输入0和1分别得到什么结果即可. 放到序列上且带修改,只要对每位维护一个线段树,每个节点分别记录0和1从左往右和从右往左走完这段区间后变成的 ...
- bzoj 2998 第k小字串
这道题用后缀数组貌似会T. 后缀自动机做法: t==0:第k小的本质不同字串 首先把后缀自动机建出来,我们会得到一个DAG,并且只存在一个点入度为0(我们称之为根),可以证明字符串的任意一个本质不同的 ...
- Splay-Tree理解
简介 splay tree其实就是不停的旋转,没进行一个操作都要进行旋转:例如,当访问某一个结点的时候,会通过旋转其结点使得该结点变为树根,这样保证其的平均复杂度为O(nlogn); 其的操作包括: ...
- MySQL规约（阿里巴巴）
建表规约 [强制]表达是与否概念的字段,必须使用 is _ xxx 的方式命名,数据类型是 unsigned tinyint ( 1 表示是,0 表示否 ) ,此规则同样适用于 odps 建表. 说明 ...
- python开发_函数的参数传递
在这个用例中,我们要讨论的是关于函数的传参问题 我所使用的python版本为3.3.2 对于函数: def fun(arg): print(arg) def main(): fun('hello,Ho ...
- python 爬虫 处理超级课程表传输的数据
借鉴的别人的思路 http://www.oschina.net/code/snippet_2463131_53711 抓取超级课程表传输的数据 他的传输数据居然是明文的-- 现在已经把自己的课表都抓出 ...
- HDU 5714 拍照 前缀和
拍照 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5714 Description 小明在旅游的路上看到了一条美丽的河,河上有许多船只,有的船只向左 ...