在本教程中,我们将向你展示如何实现一个侧滑导航菜单。侧滑导航菜单是现在网站设计中的一个普遍的趋势,你可以看到很多网站喜欢这种类型的菜单。它可以更好的展示重点内容,使其更具可读性、美观度。今天我将向你展示如何实现如上图的侧滑菜单。在线预览 源码下载为了建立导航菜单,让我 ...
在本教程中,我们将向你展示如何实现一个侧滑导航菜单。侧滑导航菜单是现在网站设计中的一个普遍的趋势,你可以看到很多网站喜欢这种类型的菜单。它可以更好的展示重点内容,使其更具可读性、美观度。
今天我将向你展示如何实现如上图的侧滑菜单。
在线预览 源码下载
为了建立导航菜单,让我们先看看html结构:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Animation Menu Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src='/images/loading.gif' data-original="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> <script src='/images/loading.gif' data-original="script.js"></script> <link rel="stylesheet" href="style.css"></head><body> <!-- Content goes here --></body></html>
原标题:如何用CSS和jQuery实现一个侧滑导航菜单
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。