杭州网站建设推荐

　　许多网站有一个非常酷的隐藏滑出菜单面板，其中包含一些相关的信息，这个面板是显示给我们，一个很酷的动画，当我们点击一个特定的按钮或悬停在它上面。这通常是使用jQuery实现的。但现在，随着我们走向未来，CSS 3正在成为现实，这里有一个教程，如何构建一个动画幻灯片的面板，只使用CSS 3。

　　注意：本教程使用了一些在Firefox中还不支持的高级CSS 3技术。要获得完整的版本，您应该在一个web工具包引擎中看到现场演示，例如Safari和Chrome。您可以在这里下载源代码。最后的演示也可以在这里看到。

　　目录：

　　仅使用CSS 3滑出菜单面板教程

　　如何在没有学习编程的情况下创建CSS 3弹出菜单

　　仅使用CSS 3滑出菜单面板教程

　　此滑出内容面板可用于各种用途。今天我们可以看到，有许多隐藏的菜单或内容可以向我们透露，通过悬停在一个按钮或点击按钮。别再唠叨了，我们开始吧！

　　步骤1：分析目标

　　滑出面板可用于各种方式。它的用途取决于网站的要求。您可以将其用于滑出登录框，或者只是列出站点的订阅选项。我们将假设这样一个场景：我们希望为屏幕右上角的观众提供一个订阅选项：

　　现在，一旦观众悬停在右上角的订阅按钮上，整个隐藏面板将以非常平滑的动画效果向访问者展示订阅选项。

　　步骤2：创建xHTML框架

　　既然我们已经知道了我们想要实现的目标，那么让我们计划一下整个布局的xHTML架构将是怎样的。我们基本上需要两部分布局。一个部分将是顶部，这将是我们的隐藏面板，并将包含订阅选项。第二部分是整个布局的主要内容区域。该区域将包含对观众可见的所有内容。以下是我们的网站布局代码：

　　[HTML]<；-<；span class=“hiddenSpellError”Pre=“->；DOCTYPE html public”-/W3C/DTD XHTML 1.0过渡性/en“http：/ 1/dtd/xhtml1-Trantional.dtd”>；xmlns=“ http-equv=“X-UA-兼容的”内容=“IE=乳状实体IE7”/>；link href=样式表”type=“text/css”/>；>；/head>；

　　身体>；

　　div id=“幻灯片”>；

　　<；div id=“订阅”类=“页面包装”>；

　　UL>；

　　<；li>；a class=“<；span class=”>；rss>；/a>；>；/li>；

　　<；a class=“<；span class=”>；href=

　　<；li>；<；a class=“fb”href=

　　<；li>；>；a class=“twitter”href=

　　李>；>；a class=“mail”href=

　　<；/ul>；

　　<；div class=“Clear”>；/div>；

　　href=类=“按钮”>；订阅！<；/a>；/div>；

　　<；/div>；

　　<；div id=“主容器”>；

　　<；div class=“页面包装”>；

　　<；H1>；CSS 3：未来即将来临！

　　

Hover over the subscribe button to see the cool slide effect created by using CSS3 purely.Best viewed on Chrome and Safari

　　Integer eu nunc in eros lobortis blandit. Suspendisse potenti.

　　Nunc porta tellus nec velit vehicula sodales. Aliquam vel grav

　　<；/div>；

　　<；/div>；

　　<；/body>；>；/html>；[/html]

　　主体分为滑出和主容器两部分.滑出分区包含订阅链接和订阅超链接按钮。请注意，我们已经给订阅超链接提供了一类按钮。主容器包含所有站点的主文本和信息。滑动分区和主容器分区都分配了apage包装类，以保持它们在屏幕中心对齐。

　　步骤3：设计基本布局的样式

　　样式表只包含一些简单的页面样式。如前所述，将有一个滑出部门，一个主容器和一个页面包装类.这些构成了我们页面的基本样式元素，给它我们想要的外观。

　　用于设计页面基本布局的CSS如下所示：

　　[control-stick steering 操纵杆控制]@import url(‘reset.css’)；主体{颜色：#484848；背景色：#f7f7f7；}.清除{清除：两者；}H1{字体大小：58 px；边距-底部：25 px；高度：68 px；}h3{字体大小：22 px；边距-底部：25 px；}p{文本-对齐：左；边距-底部：20 px；}#滑出{背景颜色：#686868；高度：73 px；颜色：#fff；位置：相对；填充-顶部：25 px；}页-包装{位置：相对；边距-右：自动；边距-左：自动；宽度：635 px；}#主容器{边框#484848；填充-顶部：60 px；文本-对齐：中间；}.按钮{背景-图像：url(“颜色：#ffffff；显示：块；字体大小：18 px；高度：28 px；填充-顶部：5 px；文本-对齐：中心；文本-装饰：无；宽度：105 px；}#订阅ul li a{背景-重复：不重复；显示：块；浮动：左；字体大小：24 px；高度：38 px；边距：0 px 20 px；填充：10 px 0px 0px 55px；颜色：#d3d3d3；文字-装饰：无；行高：正常；}#订阅ul li a：悬停{颜色：#fff；}.rss{背景-图像：URL(‘图像/rss.png’)；}.fb{背景图像：URL(‘图像/facebook.png’)；}.twitter{背景图像：URL(‘图像/twitter.png’)；}.mail{背景图像：URL(‘图像/mail-rss.png’)；边距：0px；}[/css]

　　在我们将基本样式应用到我们的页面之后，它看起来会有点像这样

　　现在页面的基本样式已经完成，我们必须为面板设置隐藏和显示的舞台。要做到这一点，我们需要做的第一件事是让订阅超链接到右下角的幻灯片分割，使它只是窥视出来。要做到这一点，我们必须对样式表中的按钮类进行一些操作。我们将使它的定位是绝对的，然后给它正确的属性值0px。这将按下如下图所示的分区右侧的订阅按钮。

　　现在我们必须把它往下推，这样它就会粘在滑出部分的脚上。要做到这一点，我们只需将负的63px值赋给底部属性。

　　现在我们的订阅按钮已经到了正确的位置，我们所要做的就是从屏幕上按下滑出的div。要做到这一点，我们所要做的就是指定一个负值，相当于滑出div的高度。为了防止IE6中的跳跃式错误，我们还必须将行高值0 px分配给订阅链接的容器，即订阅框。要否定超链接元素上的0行高度，我们也必须给它们分配一个正常的行高。修改按钮类、滑出id、订阅链接元素和订阅id样式后，它们现在将如下所示：

　　[control-stick steering 操纵杆控制]#幻灯片{背景颜色：#686868；高度：73 px；颜色：#fff；位置：相对；填充-顶部：25 px；边距-顶：-98 px；}#订阅{行高：0 px；}.按钮{背景-图像：URL(“底部：-63 px；颜色：#FFFFFF；显示：块；字体大小：18 px；高度：28 px；填充-顶部：5 px；位置：绝对；右：0；文本-对齐：中心；文本-装饰：无；宽度：105 px；z-索引：100；行高：Normal；}订阅ul li a{背景-重复：不重复；显示：块；浮点数：左；字体大小：24 px；高度：38 px；边距：0 px 20 px；填充：10 px 0px 0px 55px；颜色：#d3d3d3；文本-装饰：无；线高：正常；}[/css]

　　我们都非常讨厌InternetExplorer 6，因为我们总是需要添加一些额外的代码，特别是针对它。在这种情况下，我们也必须这样做。为了使布局看起来与其他浏览器相同，我们必须在html页面顶部的Head部分中添加一些IE6特定的样式。

　　[HTML]<；-[如果IE]>；

　　按钮{底部：-64 px；}#订阅ul li一个{边距：0px15px；填充：10 px0px0px55px；}#幻灯片{边距：-83px；}<；/样式>；

　　<；！-[<；span class=“hiddenSpellError”Pre=“>；endif<；/span>；]->；[/html]

　　现在，滑出面板已经隐藏，我们的任务是启用订阅按钮上的悬停事件，这样幻灯片退出div就会从页面顶部显示自己。您可能会问，为什么我们将订阅链接放在幻灯片外的面板中，并将其推到主容器中，而不是将其放置在主容器中。

　　这背后的原因是，我们已经分配了一个负值幻灯片的div，并把它推出了屏幕。为了使它再次可见，我们在它上分配了一个悬停事件，使它的裕度回到0。由于滑出的div不在屏幕上，所以在屏幕上悬停是一个困难的过程。现在，由于订阅超链接实际上是在滑出div内，因此在订阅链接上盘旋也是滑出跳水的悬停事件，使它的最高利润率为0并显示出来。

　　我们可以想象滑出的div是一个藏着的人，他的手对我们来说是可见的。当我们触摸到那只手时，那个人就出来了。悬停事件将使在“订阅”按钮上悬停在浏览器顶部的滑出div弹出，如下所示

　　[control-stick steering 操纵杆控制]#幻灯片：悬停{边距顶部：0px；}[/css]

　　第四步：CSS 3因素！

　　我们的教程快结束了。设置悬停事件。当我们悬停在订阅按钮上时，滑出div就会显示出来。但整个过程没有任何动画效果。现在唯一需要做的就是用一些CSS 3来调味整个事情。使用CSS 3中的过渡属性，我们将使效果成为一个平滑的动画，而不是它现在所产生的突然效果。当我们在悬停时改变它的样式时，我们将在滑出id样式中给出转换属性。修改滑出id样式后，它将如下所示：

　　[control-stick steering 操纵杆控制]

　　#滑出{-moz-过渡：所有1s容易进入-out；-webkit-转换：所有1s容易进入-out；-o-转换：所有1s轻松进入-out；背景颜色：#686868；高度：73 px；颜色：#fff；职位：相对；填充-顶部：25 px；边距-顶部：-98 px；}[/css]

　　您可以通过更改当前设置为1s的转换速度来更改动画速度。这就完成了我们的任务，即在不使用任何javascript的情况下，从页面顶部启动一个平滑的滑出面板。

　　云计算的弊端

　　目前这种方法的主要缺点是CSS 3转换效果仅由webkit浏览器支持，比如Google的Chrome、Apple的Safari和Opera。尽管鼠标悬停上的滑出面板可以在火狐和IE等浏览器上工作，但是动画在它们中不能工作。另一个缺点是它不能在InternetExplorer 6.0上工作，因为它不支持CSS悬停事件。但显然有一个解决办法。

　　Conclusion

　　这个技巧只是展示了如何使用CSS 3来替换JavaScript库(如jQuery和MooTools)提供的一些主要效果。我相信随着时间的推移，这些基本的过渡效应只会被CSS 3转变所取代。它使呈现速度更快，加载时间也减少了，因为不需要JavaScript库插件。创建幻灯片面板的方法很多，JavaScript库确实将其提升到了一个非常高的水平，并提供了更多的功能，而不仅仅是动画效果。有许多教程指导您使用jQuery和CSS一起创建这样的幻灯片面板。有关使用JavaScript滑出面板的进一步阅读，请参阅这些令人敬畏的教程

　　用jQuery构建一个顶部面板

　　简易滑板

　　使用jQuery创建滑入面板

　　如何使用jQuery和CSS 3创建性感的垂直滑动面板

　　使用jQuery构建的漂亮干净的滑动登录面板

　　现在让我们开始另一个关于弹出菜单的教程。准备好的好吧。

　　如何在没有学习编程的情况下创建CSS 3弹出菜单

　　现代网站提供了一个更复杂的导航层次。这种导航有时会使网站菜单上的用户体验有点混乱。使用CSS 3弹出菜单使您更容易在网站上找到您想要的东西。感谢CSS 3，动画现在已经成为可能。

　　使用CSS 3，您可以简单地隐藏和取消隐藏其他元素下的元素。这不仅简化了您的代码，而且使其易于更新。这意味着您现在可以执行一些滑动动画，即使没有编程知识。

　　在本教程中，我将向您展示如何创建一个METRY类型菜单，该菜单在每次鼠标移动时都会隐藏和取消图标下的文本菜单。好吧，让我们摇滚！

　　完成本教程所需的资源：

　　80度白色图标

　　时间和耐心

　　我们的最终产品

　　[演示源=“https：/1stwebsigner.com/demos/pop-out_updated.zip”demo=“https：/1stwebsigner.com/demos/pop-out/”]

　　File Structure

　　我们的文件结构将由四个文件夹和一个H杭州网站建设推荐TML文件组成：

　　index.html – 这将作为我们的主要文件。我们所有的标记都将使用此文件。

　　img folder – For our images and icons

　　fonts folder –All our additional fonts will be place here and loaded by the CSS file (Note: if you choose another font on Google fonts, there’s no need for this folder)

　　css folder – For our styling (CSS)

　　准备菜单图标

　　下载80度白色图标。对于本教程，我们将使用以下图标。

　　家庭图标

　　用户图标

　　投资组合图标

　　聊天图标

　　信封图标

　　使用这些图标，我们将为菜单中的图标创建一个精灵图像。

　　首先，在一个新的Photoshop文件上拖动Home图标，然后转到Image->画布大小，然后在左侧再添加16 px宽度。确保锚指向右边。

　　然后，将用户图标放在右侧。确保正确地对齐它们。您可以通过在键盘上按Ctrl-A并单击“对齐”面板上的“对齐”右边缘按钮来完成此操作。

　　接下来，对其余的图标重复相同的过程，然后最后将其保存为PNG文件。

　　HTML标记

　　对于HTML文件，我们将首先在Head部分中添加HTML 5文档类型和一系列链接。这将包括我们的CSS链接文件。

　　[Hypertext Markup Language 超文本链接标示语言]

　　<；meta charset=“utf-8”/>；CSS 3 Pop out菜单<；link href=样式表”/>；<；link href=样式表”媒体=“creen”/>；[/html]

　　菜单元素包装在无序列表中。每个元素都有一个框类，后面跟着一个锚标记、SPAN图标和一个H2标记(用于元素的标题)。我们所有的菜单都包装在一个容器类中。

　　[Hypertext Markup Language 超文本链接标示语言]

　　

　　

　　

• 　　

  　　

  Home

  　　一个href= class=“有关我的图标框”>；>；a&gf=“#”>；>；/a>；h2>；关于我<；/h2>；

  　　href= class=“图标框组合”>；a&ref=“#”>；>；/a>；h2>；Portfolio>；/h2>；

  　　href= class=“图标盒博客”<；a>；>；/a>；h2>；blog<；/h2>；

  　　href=>li class=“图标框联系人”<；a>；>；/a>；h2>；<；/h2>；

  　　

  　　

　　<；/ul>；

　　[/html]

　　在我们设置HTML标记之后，我们应该有这样的东西。

　　CSS

　　现在是我们的弹出菜单发光的时候了。首先，让我们导入我们将在菜单元素和标题上使用的字体。

　　[control-stick steering 操纵杆控制]@font-face

　　{

　　font-family: Museo500-Regular;

　　src: url(‘

　　}

　　[/css]

　　现在让我们为我们的一般设置添加样式。首先，我们将添加一个十六进制颜色为#263544的背景和M杭州网站建设推荐useo 500的字体。然后，我们还将为锚和h2标记设置一些样式。

　　[control-stick steering 操纵杆控制]

　　body {background: #263544; font-family: Museo500-Regular;}

　　a{text-decoration: none;}

　　h2 {color: #fff; font-size: 22px; margin: 0 24px;}

　　[/css]

　　接下来，让我们在图标框中添加一些样式，以隐藏文本菜单。使用无序列表，让我们使用类图标菜单的样式来保存我们所有的图标菜单。

　　然后，让我们对类图标框进行样式化，并将其维度设为120 px120 px。现在，让我们使用菜单名作为它的类，根据每个框的标题来操作它的背景色。

　　[control-stick steering 操纵杆控制]

　　图标-菜单{边距-顶部：29 px；}li.图标-框{宽度：120 px；高度：120 px；列表样式：无；左：-47 px；位置：相对；边距-底部：3 px；}li.图标-box.home{背景：#e74c3c；{背景：#1 dd0ad；}li.图标-box.Portfolio{背景：#3498 db；}li.图标-box.blog{背景：#f1c40f；}li.图标-框。联系人{背景：#f39c12；}。图标框H2{Museo 500-正则；字体大小：20 px；文本阴影：1px1px2pxrgba(150，150，150，1)；}.图标框a{Display：Block；}

　　[/css]

　　在那之后，让我们也设置我们的菜单图标的位置使用我们的精灵图像。我们将使用span标记并将图标类名附加到它并操作它的位置。

　　[control-stick steering 操纵杆控制]

　　span.icon {display: inline-block; background: url(‘ width: 32px; height: 32px; margin: 43px 45px;}

　　span.icon.home {background-position: 0px 0px;}

　　span.icon.aboutme {background-position: -36px 0px;}

　　span.icon.portfolio {background-position: -72px 0px;}

　　span.icon.blog {background-position: -109px 0px;}

　　span.icon.contact {background-position: -145px 0px;}

　　[/css]

　　对于菜单名称，我们将使用H2标记作为锚标记，并将位置设置为绝对值，然后将其推到左侧。使用样式方法z索引，我们将隐藏菜单下的菜单图标和框.

　　使用Transform属性，我们可以在不使用Flash动画或JavaScript的情况下从一种样式更改为另一种样式时添加效果。这意味着用户每次在图标上鼠标移动时，都会通过向左边添加一个边距值，并使用平滑的动画将其位置更改为右侧。

　　[control-stick steering 操纵杆控制]

　　图标-box.home H2{z-索引：-999；位置：绝对；顶部：0；左：0；不透明度：0；背景：#E74C3C；线高：120 px；宽度：120 px；-webkit-转换：所有.3s；-moz-转换：所有.5s；-ms-过渡：All.5s；-o-过渡：All.5s；左边框：3px固体#a7382 d；

　　}

　　.图标-box.home a：悬停H2{不透明度：1；左：120 px；边距：0；文本对齐：中心；

　　}

　　.图标-box.关于me h2{z-索引：-999；位置：绝对；顶部：0；左：0；不透明度：0；背景：#1 dd0ad；线高：120 px；宽度：120 px；-webkit-转换：所有.3s；-moz-转换：所有.5s；-ms-过渡：所有.5s；-o-过渡：所有.5s；边框-左：3 px固态#0d866e；}

　　.图标-框.关于我a：悬停H2{不透明度：1；左：120 px；边距：0；文本对齐：中心；

　　}

　　.图标-box.Portfolio H2{z-索引：-999；位置：绝对；顶部：0；左：0；不透明度：0；背景：#3498 db；线条-高度：120 px；-webkit-转换：所有.3s；-moz-转换：所有.5s；-ms-过渡：所有.5s；-o-过渡：所有.5s；边框-左：3px固体#2177b1；}

　　.图标-box.Portfolio a：悬停H2{不透明度：1；左：120 px；边距：0；文本对齐：中心；

　　}

　　.图标-box.blog H2{z-索引：-999；位置：绝对；顶部：杭州网站建设推荐0；左：0；不透明度：0；背景：#f1c40f；线高：120 px；宽度：120 px；-webkit-转换：所有.3s；-moz-转换：所有.5s；-ms-过渡：所有.5s；-o-过渡：所有.5s；边框-左：3 px固态#b8960e；}

　　.图标-box.blog a：悬停H2{不透明度：1；左：120 px；边距：0；文本对齐：中心；

　　}

　　联系H2{z-索引：-999；位置：绝对；顶部：0；左：0；不透明度：0；背景：#f39c12；线高：120 px；宽度：120 px；-webkit-转换：所有.3s；-moz-转换：所有.5s；-ms-过渡：所有.5s；-o-过渡：所有.5s；边框-左：3px固态#bc780d；}

　　.图标-框.联系人a：悬停H2{不透明度：1；左：120 px；边距：0；文本对齐：中心；

　　}

　　[/css]

　　我想就是这样了！这样，您的输出将与您在上面的成品上看到的输出相同。

　　结束语

　　使用CSS 3有很多优点。以前不能做的事情，比如动画，现在不用JavaScript就可以了。本教程是一个示例，您可以在动画上执行简单的鼠标操作，同时在没有编程技能的情况下将一个元素隐藏在另一个元素中。希望你已经享受和学习了一些东西为本教程。下次见！干杯