下面我们先去添加导航菜单需要的 HTML，如果你很熟悉 HTML，可以直接跳过这节 …
打开网页 … 找到要添加导航菜单的位置 ….
先添加一个 nav 标签 … 在上面定义一个 nav Id .. nav 就是 navigation 的简写，就是导航的意思 … 我的编辑器里安装了 Emmet ，所以可以这样来写 nav#nav
然后是
- 无序的列表标签 … 里面是一些
- 标签定义的列表项目 … 这里添加五个
- 标签 … 列表里面是 标签 …
再上面再添加一个 href 属性 … 值可以使用一个占位符 … 加上一个 # 号 … 再每个项目上再添加点文字 …
然后按一下 tab 键 ….
nav#nav>ul>li*5>a[href="#"]{项目 $}
按钮
下面我们需要准备两个按钮 … 一个是打开导航用的按钮，一个是关闭导航用的按钮 … 按钮上的图标可以使用 font awsome (http://fontawesome.io/ ) … Get Started …
直接使用 BootstrapCDN 上的 font-awesome … 复制一下这行代码 ….
回到网页 … 粘贴到
标签上 … 这样就可以使用 font awecome 上面的图标了 …先处理一下开启导航菜单的小图标 …
再回到 font awesome … 点击 icons … 在这里你可以找到想要使用的图标 … 搜索一下 reorder … 点击这个小图标 …
然后复制显示这个小图标的代码 … 回到网页 … 粘贴 …
页面上会显示一个三条横线的小图标 … 再去给它添加一个
一个 a 标签… 一会要给它添加样式，所以可以在上面定义一些类 … 添加一个 open 类 … 同时再添加一个 toggle-btn 类 … 然后是 href 属性 … 属性的
最低0.47元/天 解锁文章
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
