下面我们先去添加导航菜单需要的 HTML，如果你很熟悉 HTML，可以直接跳过这节 …
打开网页 … 找到要添加导航菜单的位置 ….
先添加一个 nav 标签 … 在上面定义一个 nav Id .. nav 就是 navigation 的简写，就是导航的意思 … 我的编辑器里安装了 Emmet ，所以可以这样来写 nav#nav
然后是 <ul> 无序的列表标签 … 里面是一些 <li> 标签定义的列表项目 … 这里添加五个 <li> 标签 … 列表里面是 <a> 标签 …
再上面再添加一个 href 属性 … 值可以使用一个占位符 … 加上一个 # 号 … 再每个项目上再添加点文字 …
然后按一下 tab 键 ….
nav#nav>ul>li*5>a[href="#"]{项目 $}
按钮
下面我们需要准备两个按钮 … 一个是打开导航用的按钮，一个是关闭导航用的按钮 … 按钮上的图标可以使用 font awsome （http://fontawesome.io/ ） … Get Started …
直接使用 BootstrapCDN 上的 font-awesome … 复制一下这行代码 ….
回到网页 … 粘贴到 <head> 标签上 … 这样就可以使用 font awecome 上面的图标了 …
先处理一下开启导航菜单的小图标 …
再回到 font awesome … 点击 icons … 在这里你可以找到想要使用的图标 … 搜索一下 reorder … 点击这个小图标 …
然后复制显示这个小图标的代码 … 回到网页 … 粘贴 …
页面上会显示一个三条横线的小图标 … 再去给它添加一个 <a> 标签 … 让它链向 #nav 这个 ID …
一个 a 标签… 一会要给它添加样式，所以可以在上面定义一些类 … 添加一个 open 类 … 同时再添加一个 toggle-btn 类 … 然后是 href 属性 … 属性的值是 nav 这个 ID …
a.open.toggle-btn[href="#nav"]
把显示小图标的代码放在这组 <a> 标签的里面 …
关闭
再去找一个关闭按钮 … 搜索 remove … 选择这个 … 复制一下显示小图标的代码 … 回到网页 …
这个关闭按钮，把它放在 <nav> 标签的里面 …
再去给它添加一组 <a> 标签 …
一个 a 标签 … 定义一个 close 类 .. 再加上一个 toggle-btn 类 … href 属性 .. 属性的值是 #top …
a.open.toggle-btn[href="#top"]
把小图标放在这组 <a> 标签里面 …
然后在 <body> 标签上，定义一个 top 的 id …
完成
现在，我们就准备好了导航菜单需要的所有的 HTML 代码 …. 下面视频，我们再去给它们添加一些样式 …
