一款漂亮的动画边境反弹的菜单 - HTML5+CSS3教程 - 科蚁网
请选择 进入手机版 | 继续访问电脑版

一款漂亮的动画边境反弹的菜单

原作者: Manoela 收藏 分享 邀请


    有一天我看到一个非常好的菜单UI8网站的概念。CreativeDash立即实现,华丽的概念,我有一些想法更多的影响涉及边界过渡也与桌面。所以今天,我想向您展示如何创建类似的东西,然后提供一些更多的鼓舞人心的例子。

请注意,我们将使用转换和动画也不会工作在一些浏览器(例如SafariMobile Safari)

所以,让我们开始吧!

标记

菜单的HTML结构将由一个 nav元素将包含一个触发锚和一个无序列表图标的菜单项,包括:

<nav id="bt-menu" class="bt-menu">

         <a href="#" class="bt-menu-trigger"><span>Menu</span></a>

         <ul>

                 <li><a href="#" class="bt-icon icon-zoom">Zoom</a></li>

                 <li><a href="#" class="bt-icon icon-refresh">Refresh</a></li>

                 <li><a href="#" class="bt-icon icon-lock">Lock</a></li>

                 <li><a href="#" class="bt-icon icon-speaker">Sound</a></li>

                 <li><a href="#" class="bt-icon icon-star">Favorite</a></li>

         </ul>

</nav>

让我们这种风格。

CSS

注意,CSS将不会包含任何特定的前缀,但你会发现他们在文件。
让我们使用border-box box-sizing:

*,

*:after,

*::before {

         box-sizing: border-box;

}

让我们设置一些身体和主容器的样式:

body  {

         background: #04a466;

}

 

.container {

         padding: 80px;

}

填充将帮助提供一些空间在我们的内容,因此当出现边界,我们保证有足够的空间。

主菜单元素位置固定,这样,无论我们所在的页面,边境总是在视窗。我们设置一个初始边框样式,但是这个价格我们将过渡到一个更大的边界。最初的高度设置为0将确保不包括任何最初的菜单。落后或关闭高度过渡将会有一个延迟0.3年代:

.bt-menu {

         position: fixed;

         top: 0;

         left: 0;

         width: 100%;

         height: 0;

         border-width: 0px;

         border-style: solid;

         border-color: #333;

         background-color: rgba(0,0,0,0);

         transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;

}

当我们打开菜单,我们将设置高度为100%(��们不会过渡,财产)和边界将动画左侧90 px30 px的所有其他方面。背景颜色将半透明使用RGBA价值。这将服务器作为叠加颜色:

.bt-menu.bt-menu-open {

         height: 100%;

         border-width: 30px 30px 30px 90px;

         background-color: rgba(0,0,0,0.3);

         transition: border-width 0.3s, background-color 0.3s;

}

现在我们不得不使用一个小技巧。我们将添加另一个元素使用JavaScript将服务器作为虚拟容器覆盖整个页面,除了边境。这将使我们能够区分我们点击关闭整个事情。我们不希望菜单关闭当单击边界只有当点击之间的空间。

.bt-overlay {

         position: absolute;

         width: 100%;

}

当我们打开菜单,这个元素会有完整的高度:

.bt-menu-open .bt-overlay {

         height: 100%;

5

鲜花
1

握手

雷人

路过

鸡蛋

刚表态过的朋友 (6 人)

该文章已有5人参与评论

请发表评论

全部评论

    • 引用 QQ群521595826 2016-1-5 22:53
      【怎么学习网页制作】 现在很多小伙伴喜欢在互联网上找视频资料学习网页制作,但是光看视频你是不可能学会的,没有人指导你,而且很多视频已经过时了 并没有什么用!  如果你真的想学习网页制作这门技术,你可以来这个群  前面是五二一,中间是五九五,后面是八二六  在这里有最新的网页制作课程 每晚免费课堂学习 课后老师答疑解惑  也有很多人指导你 进步 不需要你付出什么 只要你有一颗学习的心就可以了 如果不是真心想学习的就不要加了!

查看全部评论>>