欢迎来到做网站吧,请先 登录注册

教程观看记录

资源投稿 | 网站地图 | 联系我们 | 收藏本站 |

做网站吧 > HTML5 > HTML5+CSS3 >
收 藏
2600

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

所属栏目:HTML5+CSS3 来源:未知 内容发布:做网站吧

 有一天我看到一个非常好的菜单UI8网站的概念。CreativeDash立即实现,华丽的概念,我有一些想法更多的影响涉及边界过渡也与桌面。所以今天,我想向您展示如何创建类似的东西,然后提供一些更多的鼓舞人心的例子。
请注意,我们将使用转换和动画也不会工作在一些浏览器(例如Safari和Mobile 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 px和30 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%;

文章关键词:

相关推荐
网友评论
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
上一篇:纯CSS3绘制3D按钮实例教程
下一篇:如何创建一个圆形的按钮

返回顶部