你的位置:首页 > 软件开发 > Java > 如何用CSS和jQuery实现一个侧滑导航菜单

如何用CSS和jQuery实现一个侧滑导航菜单

发布时间:2016-05-07 13:00:06
在本教程中,我们将向你展示如何实现一个侧滑导航菜单。侧滑导航菜单是现在网站设计中的一个普遍的趋势,你可以看到很多网站喜欢这种类型的菜单。它可以更好的展示重点内容,使其更具可读性、美观度。今天我将向你展示如何实现如上图的侧滑菜单。在线预览 源码下载为了建立导航菜单,让我 ...

如何用CSS和jQuery实现一个侧滑导航菜单

在本教程中,我们将向你展示如何实现一个侧滑导航菜单。侧滑导航菜单是现在网站设计中的一个普遍的趋势,你可以看到很多网站喜欢这种类型的菜单。它可以更好的展示重点内容,使其更具可读性、美观度。

如何用CSS和jQuery实现一个侧滑导航菜单

今天我将向你展示如何实现如上图的侧滑菜单。

在线预览   源码下载

为了建立导航菜单,让我们先看看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

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。