美化网站炫动导航栏代码教程

　　很多人问过本站的导航栏怎么做的，那么企鹅seo今天就把本站导航栏的源码全部拿出来，因为时间原因，不做详细解释，只把教程公布给大家，谢谢支持~
　　[只针对知更鸟主题，其它主题可以进行模仿修改，因为修改的主要还是css。]
　　第一步：修改菜单结构
　　点击外观->菜单，选择你自己命名的导航菜单，然后就可以看到菜单结构。
　　另外，选择好导航菜单之后，需要点击右上角的＂显示选项＂，根据下图进行选择：
　　下面就是代码部分：
　　①修改一级标题：本站首页
　　导航标签添加代码：
　　<em class=＂＂fa-home＂></em><span class=＂＂font-text＂＂>本站首页</span>
　　CSS类添加代码：
　　cddhcddh1wowanimated
　　②修改一级标题：Java篇
　　导航标签添加代码：（同上）
　　CSS类添加代码：
　　cddhwowanimatedcddh2
　　③修改一级标题:Linux篇
　　导航标签添加代码：（同上）
　　CSS类添加代码：
　　cddhwowanimatedcddh5
　　④修改一级标题:网站建设
　　导航标签添加代码：（同上）
　　CSS类添加代码：
　　cddhwowanimatedcddh6
　　⑤修改一级标题:资源分享
　　导航标签添加代码：（同上）
　　CSS类添加代码：
　　cddhwowanimatedcddh7
　　⑥修改一级标题:留言板
　　导航标签添加代码：（同上）
　　CSS类添加代码：
　　cddhwowanimatedcddh8
　　⑦修改一级标题:关于本站
　　导航标签添加代码：（同上）
　　CSS类添加代码：
　　wowanimatedcddh8cddh
　　第二步：添加css代码
　　将以下css代码添加到style.css中：
　　.down-menu&gt;li.sfHover&gt;a,#site-nav.down-menu&gt;li&gt;a:hover{animation-duration:.8s;animation-name:fadeInUp;background:#666nonerepeatscroll00;color:#fff!important}#site-nav.down-menu&gt;.current-menu-item&gt;a,#site-nav.down-menu&gt;.current-menu-item&gt;a:hover{animation-duration:.8s;animation-name:fadeInUp;background:#c40000nonerepeatscroll00;color:#fff!important}@keyframesfushang{0%{opacity:0;transform:translateY(-300px)}10%{opacity:0}100%{opacity:1;transform:translateY(0)}}@keyframesfushang{0%{opacity:0;transform:translateY(-300px)}10%{opacity:0}100%{opacity:1;transform:translateY(0)}}.fushang{animation-name:fushang}.fushang{animation-name:fushang}.cddh{animation-name:fushang;z-index:5}.cddh1{animation-duration:.7s}.cddh2{animation-duration:.8s}.cddh3{animation-duration:1s}.cddh4{animation-duration:1.1s}.cddh5{animation-duration:1.2s}.cddh6{animation-duration:1.3s}.cddh7{animation-duration:1.4s}.cddh8{animation-duration:1.5s}.cddh9{animation-duration:1.7s}.cddh9{animation-duration:1.7s}.cddh10{animation-duration:.5s;animation-name:fushang}
　　基本就算完成了，希望测试后的朋友，将出现的问题发表到留言处，企鹅SEO晚上有空帮大家处理，谢谢支持~