CSS弹出菜单

最新推荐文章于 2024-07-10 17:40:43 发布
最新推荐文章于 2024-07-10 17:40:43 发布
阅读量293 收藏 2
点赞数
文章标签： xhtml 前端 ViewUI
原文链接：http://www.cnblogs.com/webshow/archive/2011/07/19/2110528.html
版权
CSS弹出菜单

一款灰色风格的CSS弹出菜单，美化一般，重要是突出功能和实现方法，为CSS爱好者提供一份二级弹出菜单的样例，整体效果不错，兼容性也说得过去，高手可以继续完善。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Css滑出菜单</title>
<style type="text/css">
<!--
div{
   widht:100px;
   height:auto;
  }
/*弹出菜单*/
td{ 
   border:1px solid #cceeff;/* 单元格样式 */
  }
#PopUp ul{
   list-style:none;
   font-size:12px;
   text-decoration:none;
  }
#PopUp li{
   float:left;
   margin-right:10px;
   padding:0px;
   background:#ddd;
   border:1px solid #ffeecc;
   }
#PopUp li a{
   line-height:30px;
   width:100px;
   display:block;
   text-align:center;
   text-decoration:none;
   }
#PopUp li a:hover{
   position:relative;
   }
#PopUp li span{
   display:none;
   border:0px solid #cceeff;
   }
#PopUp li a:hover span{
   display:block;
   position:absolute;
   top:27px;left:-3px;
   }
#PopUp li:hover,#PopUp li a:hover span,#PopUp li a:hover dt{}
#PopUp dt{
   background:none;
   }
#PopUp li a:hover dt a{
   float:left;
   background:#ddd;
   margin-top:1px;
   }
#PopUp li a:hover,#PopUp li a:hover dt a:hover{ /* 鼠标放上后背景样式 */
   background:#ff6600;
   }
-->
</style>
</head>
<body>
<div id="PopUp">
<h2>弹出菜单</h2>
<ul>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
	<dl>
		<dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
        <dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
	</dl>
	</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
	<dl>
		<dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
	</dl>
	</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
	<dl>
		<dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
	</dl>
	</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
	<dl>
		<dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
	</dl>
	</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我4
<span>
<table><tr><td>
	<dl>
		<dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
	</dl>
	</td></tr></table>
</span>
</a>
</li>
</ul>
</div>
<table width="900" border="1" id="PopUp">
  <tr>
    <td><li>
<a href="#here">滑过我
<span>
<table><tr><td>
	<dl>
		<dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
        <dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
	</dl>
	</td></tr></table>
</span>
</a>
</li></td>
    <td><li>
<a href="#here">滑过我
<span>
<table><tr><td>
	<dl>
		<dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
        <dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
	</dl>
	</td></tr></table>
</span>
</a>
</li></td>
    <td><li>
<a href="#here">滑过我
<span>
<table><tr><td>
	<dl>
		<dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
        <dt><a href="#m1">menu1</a></dt>
		<dt><a href="#m2">menu2</a></dt>
		<dt><a href="#m3">menu3</a></dt>
		<dt><a href="#m4">menu4</a></dt>
		<dt><a href="#m5">menu5</a></dt>
		<dt><a href="#m6">menu6</a></dt>
	</dl>
	</td></tr></table>
</span>
</a>
</li></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>
posted on 2011-07-19 14:10  前端设计 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/webshow/archive/2011/07/19/2110528.html

aiyi7725
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
10-31
### 编写纯CSS弹出菜单的原理及实现 #### 摘要 本文由shawl.qiu撰写，主要介绍了如何使用CSS技术来创建适用于多种浏览器（如Opera、Firefox、IE）的弹出式菜单。文章重点讲解了利用CSS属性（如`display`和`:hover`...
常用的css弹出菜单
kingsen829的专栏
07-23 385
 常用的css弹出菜单 水平方向弹出菜单http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml" >    无标题页*{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12
css实现弹出菜单动画（微信小程序）
苏苏就是小苏苏的博客
03-24 5708
1.实现效果 2.实现原理 定义一个菜单列表，图标，名称，跳转路由 menuList: [ { name: '菜单一', src: 'https://i.postimg.cc/Bn1XpkSn/susu.jpg', url: '' }, { name: '菜单二', src: 'https://i.postimg.cc/Gm7KjGmN/111.jpg', url: '' }, {
HTML+CSS+JS 动态展开式菜单
最新发布
宁夏前端工程师，马卫斌，wx：1457508895
07-10 71
实现了一个可展开菜单按钮的效果，点击按钮会弹出一个菜单列表，菜单列表中包含多个选项。按钮的样式为一个圆形背景，中间有三条横线，表示可以展开。当按钮被点击后，三条横线会变成一个叉号，表示可以收起。菜单列表的样式为一个白色背景，四周有阴影，包含多个选项，每个选项都有一个图标和文字。当菜单展开时，选项会以渐变的方式出现。
css 点击弹出菜单,CSS3--点击弹出菜单动画
weixin_29912855的博客
08-03 559
CSS3--点击弹出菜单动画.action{position:fixed;z-index:98;bottom:20%;right:0.3rem;display:flex;flex-direction:column;align-items:flex-end}.action.open .group{width:5.6rem}.action .option .btn.open{transform:rot...
几款纯div+css制作的弹出菜单标准且无js
yjp2006的专栏
06-14 765
1.内容不会挤跑 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml" l
用纯css实现下拉菜单的几种方式
Javaxiaobaismc的博客
04-08 1294
第一种:display:none和display:block切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul{ ...
利用transform实现一个纯CSS弹出菜单的示例代码
11-19
在本文中，我们将探讨如何利用CSS3的`transform`属性实现一个纯CSS的弹出菜单。这种技术不仅简化了代码，还提高了性能，因为避免了对JavaScript的依赖。 首先，让我们回顾一下`transform`属性的基本概念。在CSS中，...
css弹出层代码分享
09-25
CSS弹出层是一种常见的网页交互元素，用于展示额外的信息或功能，例如提示、菜单、对话框等，当用户触发特定事件（如鼠标悬停或点击）时会显现。在这个例子中，我们看到一个简单的HTML结构配合CSS来创建一个鼠标悬停...
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
10-24
通过以上的知识点介绍，我们可以了解到如何使用CSS和JavaScript来实现一个简单的网页交互功能——点击文字后弹出一个可自动关闭的DIV层菜单。这个例子不仅涉及了基本的HTML标签使用、CSS样式设置，还包含了...
纯CSS(无JS)实现的二级弹出菜单效果代码
12-13
本文实例讲述了纯CSS(无JS)实现的二级弹出菜单效果代码。分享给大家供大家参考。具体如下： 这是一款采用纯CSS(无JS)制作的二级弹出菜单，你会发现这款菜单并没有使用JavaScript代码，也没有引用外部文件，但是它却...
向上弹出式菜单（css+js）
05-09
一个简单的向上弹出式菜单！ 当鼠标移到上面后显示菜单， 当鼠标移开后不显示菜单！ 达到一个隐藏的效果！
5款纯div+css制作的弹出菜单(标准且无js)
joerong666
06-16 510
5款纯div+css制作的弹出菜单(标准且无js)   一、最基本的：二级dropdown弹出菜单&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://w...
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 746
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
【微信小程序】css弹出菜单+多语言切换功能
糖葫芦哎的博客
03-07 892
微信小程序实现纯css弹出菜单+多语言切换功能
css3动画：弹出式菜单
weixin_30686845的博客
10-01 950
css3动画：弹出式菜单 今天主要来讲讲transition和transform结合做的动画，会举一些现在（2017年）常见的动画例子。 注：本人也接触css3不久，如果写的有纰漏请指出，不喜勿喷。 弹出式菜单 效果： 要做这个效果主要用到的是translate()，思路就是把整个菜单放到右下角，并且设置rigth为负值，当hover的时候，translate()的x值设为负值，菜单项就会往...
用HTML+CSS实现优雅的菜单栏弹出效果
weixin_46095138的博客
08-26 5039
模仿腾讯官网菜单栏弹出效果。仅供参考学习，运行效果如下：
纯CSS弹出菜单实现详解
"编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu" 在网页设计中，创建交互式用户体验的一个重要元素是弹出菜单。本文由 shawl.qiu 提供，详细阐述了如何利用纯 CSS 实现适用于 Opera、Firefox 和 IE 浏览器的弹出...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值