文章目录：
求CSS下拉菜单源码
用CSS 快速定制下拉菜单
访问过 Microsoft 中文主页的很多人都不会忘记它新奇的下拉式菜单吧. 它的确给我们带来一股清新的网风, 它实现了网页上下拉菜单, 不仅剩去了很多点击的麻烦, 并开创了一个网页设计的
未来之路.
我们知道, 通过 CSS 可以确切地定义一个 HTML 元素的样式，包括它的颜色、字体、边框、3D效果、滤镜等等，我们在考虑制作下拉菜单时，首先是想到 CSS 的定位技术，它精确的定位能力可以使我们放心的甚至是在三维空间设置位置和可见性。
CSS 定位使用"position"属性的两种方法定位 HTML 元素，这就是相对定位(relative)和绝对定位（absolute),相关的定位属性有9个：
position、left、top、width、height、clip、overflow、z-index、visibility
当使用"absolute(绝对)"定位元素时，该元素就被当作一个矩形覆盖物来格式化，格式化后的矩形区域就变成了一个可以放置其他 HTML 元素的容器，这个容器可以凌驾于 HTML 文档的布局之上，区域下面的文字和图形永远也无法环绕和透过该容器显示出来。这样被绝对定位了的元素我们称之为块级元素，在块级元素内放置的 HTML元素我们称之为子元素。
另外，当我们在移动鼠标时，具有对 HTML 元素有感应的 JAVA 动作是 onmouseup、onMouseOver、onMouseOut.
onmouseup 为鼠标点击之后的释放动作
onMouseOver 为鼠标经过时的动作
onMouseOut 为鼠标离开某区域时的动作.
除此之外，我们建立菜单都是为了表达一定的快捷的操作，通常是超级连接(URL).菜单上的每一条命令都应该对鼠标的行踪、点击有感应。所以，必须建立菜单对鼠标行为的多级捕获。首先是容器本身(块级元素)对鼠标经过时和离开时建立捕获，其次是菜单上各条命令对鼠标行为的捕获。也就是鼠标经过时，菜单打开响应，鼠标离去是菜单关闭。
因为菜单都是在网页调入时动态建立的，为了减轻浏览器的运行负担，加快速度，所以各个菜单只初始化一次，以后的打开和关闭操作仅仅是容器本身(块级元素)的可视与隐藏而已。
菜单的动态建立用 document.write 语句完成。 ---- 也因为是使用 CSS,因此每个菜单的第一句开头应该如此：
document.write (' STYLE type="text/css" ...后跟菜单定位语法,根据浏览器的不同一般而言，Netscape 用相对定位， IE 用绝对定位要好一些。
然后是建立容器(块级元素) 对鼠标 onMouseOver 、 onMouseOut 的捕获。可以这样写: document.write(' span id=菜单标识 onMouseOver="发生的打开动作" onMouseOut="菜单的关闭动作" ...
其次，以如下方式层层建立菜单及捕获行为。需要注意的是菜单项定义是和鼠标感应操作定义在一块的。
a href="超级连接" onMouseOver="菜单响应事件" onMouseOver="菜单关闭事件" 第一条命令 /a br
a href="超级连接" onMouseOver="菜单响应事件" onMouseOver="菜单关闭事件" 第二条命令 /a br
a href="超级连接" onMouseOver="菜单响应事件" onMouseOver="菜单关闭事件" 第三条命令 /a br
...
如果要把菜单加上边框的话，只须在菜单(块级元素)属性里加上 border: 粗细 长度 颜色 三维效果 即可。例如：
...{padding: 2pt} #TestMenu1{border:thin soild outset; position:absolute;... 就成为一个立体的细边菜单。
以下是原代码 6KB，载入浏览器时，鼠标在“下拉菜单演示”、“编译器”和“许可说明” 停靠时，便会出现下拉式菜单。
如何用CSS和jQuery实现一个侧滑导航菜单
可以参考：
为了建立导航菜单，让我们先看看html结构：
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
titleAnimation Menu Demo/title
link rel="stylesheet" href=""
link href='' rel='stylesheet' type='text/css'
link rel="stylesheet" href=""
script src=""/script
script src="script.js"/script
link rel="stylesheet" href="style.css"
/head
body
!-- Content goes here --
/body
/html
首先，我们引用normalize.css作为默认样式，以确保我们的菜单在每个浏览器是一样的。我们使用字体图标fontawesome来显示菜单项向下的图标。我们还需要引用jQuery来实现菜单的切换。
面板按钮
每个网站面板导航按钮都类似。它往往是一个图标字体，如fontawesome，但在本教程中我想添加一些动画，所以我们用横线来实现。基本上，我们的按钮是一个跨度，包含三个div显示为水平横线。
span class="e448-c69a-42d1-de8b toggle-button"
div class="c69a-42d1-de8b-3a8e menu-bar menu-bar-top"/div
div class="42d1-de8b-3a8e-e0f9 menu-bar menu-bar-middle"/div
div class="de8b-3a8e-e0f9-b374 menu-bar menu-bar-bottom"/div
/span
样式看起来如下：
.toggle-button {
position: fixed;
width: 44px;
height: 40px;
padding: 4px;
transition: .25s;
z-index: 15;
}
.toggle-button:hover {
cursor: pointer;
}
.toggle-button .menu-bar {
position: absolute;
border-radius: 2px;
width: 80%;
transition: .5s;
}
.toggle-button .menu-bar-top {
border: 4px solid #555;
border-bottom: none;
top: 0;
}
.toggle-button .menu-bar-middle {
height: 4px;
background-color: #555;
margin-top: 7px;
margin-bottom: 7px;
top: 4px;
}
.toggle-button .menu-bar-bottom {
border: 4px solid #555;
border-top: none;
top: 22px;
}
.button-open .menu-bar-top {
transform: rotate(45deg) translate(8px, 8px);
transition: .5s;
}
.button-open .menu-bar-middle {
transform: translate(230px);
transition: .1s ease-in;
opacity: 0;
}
.button-open .menu-bar-bottom {
transform: rotate(-45deg) translate(8px, -7px);
transition: .5s;
}
按钮有一个固定的位置，不动时滚动页面。它也有一个 z-index :15的样式，以保证它总是保持在其他重叠元素之上。按钮由三条横线。每横线都有自已的样式，我们给它加上.menu-bar样式。类其余的样式被移动到单独的样式文件中。动画发生时，我们添加一个类.button-open。我们引用jQuery，可以比较方便的实现它：
$(document).ready(function() {
var $toggleButton = $('.toggle-button');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
});
});
初学者可能不熟悉jQuery，让我解释一下这是怎么回事。首先，我们初始化一个变量称为$togglebutton，其中包含我们的按钮。我们将它存储为一个变量，然后我们创建一个事件监视器监听点击按钮。每单击一次，事件监听器会执行方法 function toggleclass()来切换.button-open。
.button-open我们可以用它来改变这些元素的显示方式。我们使用CSS3 translate()和rotate()功能使顶部和底部的横线旋转45度，与中间的横线逐渐消失。你可以点击Demo中的按钮来看看效果。
侧滑菜单
侧滑菜单的html的结构如下：
div class="50be-c58f-7912-ee2c menu-wrap"
div class="c58f-7912-ee2c-729e menu-sidebar"
ul class="7912-ee2c-729e-5007 menu"
lia href="#"Home/a/li
lia href="#"About/a/li
lia href="#"Blog/a/li
li class="ee2c-729e-5007-abeb menu-item-has-children"a href="#"Click The Arrow/a
span class="729e-5007-abeb-aa87 sidebar-menu-arrow"/span
ul class="5007-abeb-aa87-a719 sub-menu"
lia href="#"Alignment/a/li
lia href="#"Markup/a/li
lia href="#"Comments/a/li
/ul
/li
lia href="#"Courses/a/li
lia href="#"Get In Touch/a/li
/ul
/div
/div
在这里不详细解释每个风格的菜单，我们看下.menu-wrap 的div。它的样式如下：
.menu-wrap {
background-color: #6968AB;
position: fixed;
top: 0;
height: 100%;
width: 280px;
margin-left: -280px;
font-size: 1em;
font-weight: 700;
overflow: auto;
transition: .25s;
z-index: 10;
}
它的位置是固定的，所以菜单一直在同一个地方滚动。高度设为100%。注意，左边距设置为负数，使这菜单从视图中消失。为了让它有一个出现的特效，我们用jquery来了调用另一class来显示和关闭。JavaScript代码如下：
$(document).ready(function() {
var $toggleButton = $('.toggle-button'),
$menuWrap = $('.menu-wrap');
$toggleButton.on('click', function() {
$(this).toggleClass('button-open');
$menuWrap.toggleClass('menu-show');
});
});
我们增加一个变量$menuwrap其中包含菜单的所有项，并使用相同的事件来创建按钮。这个.menu-show的左边距为0，并增加了一些盒子阴影效果。
.menu-show {
margin-left: 0;
box-shadow: 4px 2px 15px 1px #B9ADAD;
}
子菜单和链接
你可能会注意到一个列表项的class .menu-item-has-children。包含子菜单。同时，链接后，有一个class .sidebar-menu-arrow。
li class="abeb-aa87-a719-cd69 menu-item-has-children"a href="#"Click The Arrow/a
span class="aa87-a719-cd69-f7ab sidebar-menu-arrow"/span
ul class="a719-cd69-f7ab-e448 sub-menu"
!-- List items --
/ul
/li
span 有一个::after伪元素包实现fontawesome箭头。默认情况下，子菜单是隐藏的，只有单击父级菜单时才出现：
$(document).ready(function() {
var $sidebarArrow = $('.sidebar-menu-arrow');
$sidebarArrow.click(function() {
$(this).next().slideToggle(300);
});
});
当我们单击箭头，一个函数被调用时，它的目标的下一个元素之后的span并使其可见。我们使用的jquery的slidetoggle。它使一个元素滑动效果的出现或消失，函数有一个动画时间参数。
最后，我们的演示菜单项有一个悬停效果。它是使用一个::after伪元素。代码如下：
.menu-sidebar li a::after {
content: "";
display: block;
height: 0.15em;
position: absolute;
top: 100%;
width: 102%;
left: 50%;
transform: translate(-50%);
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
transition: background-position .2s .1s ease-out;
background-size: 200% auto;
}
.menu-sidebar li a:hover::after {
background-position: -100% 0;
}
这个::after伪元素包含在每个环节下绝对定位的块级元素，随着0.15em高度和宽度。我们不只是应用背景颜色的线，我们使用linear-gradient() 在背景图像功能。虽然这个功能的目的是使颜色梯度，我们可以通过指定的百分比，做了一个渐变的颜色变化。
.menu-sidebar li a::after {
background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}
这里一半的线是透明的，另一半是黄色的。通过背景大小200%的宽度，使透明部分占用的所有链接的宽度。
html5 浮动侧滑菜单栏怎样实现
一共有4种侧滑动画特效。这款CSS3菜单的特点是鼠标划过时即可以各种动画方式展开和隐藏菜单项，该动画方式由CSS3中的transition-delay属性来完成
style type="text/css"
/*Fontawesome Iconfont*/
@import url();
@import url();
* {margin: 0; padding: 0;}
li {list-style-type: none;}
.grid {float: left;width:980px;margin: 0 auto;}
.grid li { width: 285px; height: 500px; overflow: hidden; float: left; margin: 20px 0 20px 30px; position: relative; }
.grid li:hover {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);}
.gridli section {position: relative; transition: all 0.25s; width: 100%;}
.gridli h2 {font: bold 14px montserrat; color: #fff; text-transform: uppercase; position: absolute; text-align: center; width: 60%; left: 20%; top: 100px; padding: 10px 0; border: 2px solid white; border-radius: 4px;}
.sidenav { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(rgba(50,60,60, 1), rgba(50,60,60, 0.7)); width: 50px; transition: all 0.25s; overflow: hidden; padding-top: 100px;}
.sidenav li { _overflow: hidden; width: 150px; }
.sidenav a { text-decoration: none; color: #eee; display: block; line-height: 48px; }
.sidenav span {display: block;}
.sidenav b { padding-left 10px; display: block; color: white; font-family: Montserrat; font-size: 12px; line-height: 4; opacity: 0; }
.sidenav a i { display: block; float: left; font-size: 16px; line-height: 48px; width: 50px; text-align: center; }
/*All instances*/
.gridli:hover .sidenav {width: 150px;}
.gridli:hover section {margin-left: 150px;}
.gridli:hover b {opacity: 1;}
.sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a {transition-delay: .08s;}
.sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a {transition-delay: .16s;}
.sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a {transition-delay: .24s;}
.sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a {transition-delay: .32s;}
.sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a {transition-delay: .40s;}
.sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a {transition-delay: .48s;}
/*Three*/
.three .w {transform: perspective(100px) translateZ(-24px);}
.three b {transform: perspective(100px) rotateY(180deg) translateZ(24px) scale(0.5); }
.three:hover b {transform: perspective(100px) rotateY(0) translateZ(24px) scale(1); transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: transparent;}
.three .sidenav {width: 150px;}
/*Two*/
.two .w {transform: perspective(100px) translateZ(-24px);}
.two b {transform: perspective(100px) rotateX(90deg) translateZ(24px) scale(1.5); opacity: 0; }
.two:hover b {transform: perspective(100px) rotateX(0) translateZ(24px) scale(1); transition: all .4s; opacity: 1;}
.two .sidenav {width: 150px;}
/*One*/
.one .w {transform: perspective(100px);}
.one b {transform: perspective(100px) rotateY(90deg); _opacity: 0; transform-origin: left center; _border: 1px solid white;}
.one:hover b {transform: perspective(100px) rotateX(0); transition: all .4s; opacity: 1;}
.one .sidenav {width: 150px;}
.one .sidenav span {float: left; width: 100px;}
/style
!--[if IE]
script src=""/script
![endif]--
/head
body
div class="cd69-f7ab-e448-c69a htmleaf-container"
header class="f7ab-e448-c69a-42d1 htmleaf-header bgcolor-11"
div class="e448-c69a-42d1-de8b htmleaf-demo center"
a href="index.html"DEMO1/a
a href="index2.html" class="c69a-42d1-de8b-3a8e current"DEMO2/a
a href="index3.html"DEMO3/a
a href="index4.html"DEMO4/a
/div
div style="text-align:center;clear:both;"
script src="/gg_bd_ad_720x90.js" type="text/javascript"/script
script src="/follow.js" type="text/javascript"/script
/div
/header
div class="42d1-de8b-3a8e-e0f9 htmleaf-content bgcolor-8"
ul class="de8b-3a8e-e0f9-b374 grid"
li class="50be-c58f-7912-ee2c one"
ul class="c58f-7912-ee2c-729e sidenav"
liai class="7912-ee2c-729e-5007 fa fa-check"/ispan class="ee2c-729e-5007-abeb w"bTasks/b/span/a/li
liai class="729e-5007-abeb-aa87 fa fa-inbox"/ispan class="5007-abeb-aa87-a719 w"bMessages/b/span/a/li
liai class="abeb-aa87-a719-cd69 fa fa-pencil"/ispan class="aa87-a719-cd69-f7ab w"bNew Post/b/span/a/li
liai class="a719-cd69-f7ab-e448 fa fa-cog"/ispan class="cd69-f7ab-e448-c69a w"bSettings/b/span/a/li
liai class="f7ab-e448-c69a-42d1 fa fa-star"/ispan class="e448-c69a-42d1-de8b w"bStarred/b/span/a/li
liai class="c69a-42d1-de8b-3a8e fa fa-power-off"/ispan class="42d1-de8b-3a8e-e0f9 w"bLogout/b/span/a/li
/ul
section
h2Door Opening/h2
img src="img/mb1.png"/
/section
/li
li class="de8b-3a8e-e0f9-b374 two"
ul class="50be-c58f-7912-ee2c sidenav"
liai class="c58f-7912-ee2c-729e fa fa-check"/ispan class="7912-ee2c-729e-5007 w"bTasks/b/span/a/li
liai class="ee2c-729e-5007-abeb fa fa-inbox"/ispan class="729e-5007-abeb-aa87 w"bMessages/b/span/a/li
liai class="5007-abeb-aa87-a719 fa fa-pencil"/ispan class="abeb-aa87-a719-cd69 w"bNew Post/b/span/a/li
liai class="aa87-a719-cd69-f7ab fa fa-cog"/ispan class="a719-cd69-f7ab-e448 w"bSettings/b/span/a/li
liai class="cd69-f7ab-e448-c69a fa fa-star"/ispan class="f7ab-e448-c69a-42d1 w"bStarred/b/span/a/li
liai class="e448-c69a-42d1-de8b fa fa-power-off"/ispan class="c69a-42d1-de8b-3a8e w"bLogout/b/span/a/li
/ul
section
h2Flip Down/h2
img src="img/mb2.png"/
/section
/li
li class="42d1-de8b-3a8e-e0f9 three"
ul class="de8b-3a8e-e0f9-b374 sidenav"
liai class="50be-c58f-7912-ee2c fa fa-check"/ispan class="c58f-7912-ee2c-729e w"bTasks/b/span/a/li
liai class="7912-ee2c-729e-5007 fa fa-inbox"/ispan class="ee2c-729e-5007-abeb w"bMessages/b/span/a/li
liai class="729e-5007-abeb-aa87 fa fa-pencil"/ispan class="5007-abeb-aa87-a719 w"bNew Post/b/span/a/li
liai class="abeb-aa87-a719-cd69 fa fa-cog"/ispan class="aa87-a719-cd69-f7ab w"bSettings/b/span/a/li
liai class="a719-cd69-f7ab-e448 fa fa-star"/ispan class="cd69-f7ab-e448-c69a w"bStarred/b/span/a/li
liai class="f7ab-e448-c69a-42d1 fa fa-power-off"/ispan class="e448-c69a-42d1-de8b w"bLogout/b/span/a/li
/ul
ottom"/div/span样式看起来如下：.toggle-button { position: fixed; width: 44px; height: 40px; padding: