炫动导航栏代码教程

本文预计阅读时间 6 分钟
很多人问过本站的导航栏怎么做的,那么七墨今天就把本站导航栏源码全部拿出来,因为时间原因,不做详细解释,只把教程公布给大家,谢谢支持~

[只针对知更鸟主题,其它主题可以进行模仿修改,因为修改的主要还是css。]

第一步:修改菜单结构

点击外观->菜单,选择你自己命名的导航菜单,然后就可以看到菜单结构。

炫动导航栏代码教程

另外,选择好导航菜单之后,需要点击右上角的“显示选项”,根据下图进行选择:

炫动导航栏代码教程

下面就是代码部分

修改一级标题:本站首页

导航标签添加代码:

  1. <i class="fa-home fa"></i> <span class="font-text">本站首页</span>

CSS类添加代码:

  1. cddh cddh1 wow animated

修改一级标题:Java篇

导航标签添加代码:(同上)

CSS类添加代码:

  1. cddh wow animated cddh2

修改一级标题:Linux篇

导航标签添加代码:(同上)

CSS类添加代码:

  1. cddh wow animated cddh5

修改一级标题:网站建设

导航标签添加代码:(同上)

CSS类添加代码:

  1. cddh wow animated cddh6

修改一级标题:资源分享

导航标签添加代码:(同上)

CSS类添加代码:

  1. cddh wow animated cddh7

修改一级标题:留言板

导航标签添加代码:(同上)

CSS类添加代码:

  1. cddh wow animated cddh8

修改一级标题:关于本站

导航标签添加代码:(同上)

CSS类添加代码:

  1. wow animated cddh8 cddh

第二步:添加css代码

将以下css代码添加到style.css中:

  1. .down-menu>li.sfHover>a,#site-nav .down-menu>li>a:hover{animation-duration:.8s;animation-name:fadeInUp;background:#666 none repeat scroll 0 0;color:#fff!important}#site-nav .down-menu>.current-menu-item>a,#site-nav .down-menu>.current-menu-item>a:hover{animation-duration:.8s;animation-name:fadeInUp;background:#c40000 none repeat scroll 0 0;color:#fff!important}@keyframes fushang{0%{opacity:0;transform:translateY(-300px)}10%{opacity:0}100%{opacity:1;transform:translateY(0)}}@keyframes fushang{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}

基本就算完成了,希望测试后的朋友,将出现的问题发表到留言处,七墨晚上有空帮大家处理,谢谢支持~

weinxin
七墨微信
请留下您宝贵的意见,或者每天来本站的文章页面签到,七墨将不胜感激~~
七墨
700多份网站主题源码
Adobe软件最新全家桶(win、mac)

评论已关闭!

目前评论:1   其中:访客  1   博主  0

    • 杨小杰 杨小杰 0

      杨小杰博客来访贵站