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

一点优化 2019年12月27日18:36:03
评论
1.2K看 1795字
广告也精彩
很多人问过本站的导航栏怎么做的,那么企鹅seo今天就把本站导航栏的源码全部拿出来,因为时间原因,不做详细解释,只把教程公布给大家,谢谢支持~

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

第一步:修改菜单结构

点击外观->菜单,选择你自己命名的导航菜单,然后就可以看到菜单结构。
wordpress美化-网站炫动导航栏代码教程
另外,选择好导航菜单之后,需要点击右上角的“显示选项”,根据下图进行选择:
wordpress美化-网站炫动导航栏代码教程
下面就是代码部分:
①修改一级标题:本站首页
导航标签添加代码:

<i class=“fa-home fa”></i> <span class=“font-text”>本站首页</span>

CSS类添加代码:

cddh cddh1 wow animated

②修改一级标题:Java篇
导航标签添加代码:(同上)
CSS类添加代码:

cddh wow animated cddh2

③修改一级标题:Linux篇
导航标签添加代码:(同上)
CSS类添加代码:

cddh wow animated cddh5

④修改一级标题:网站建设
导航标签添加代码:(同上)
CSS类添加代码:

cddh wow animated cddh6

⑤修改一级标题:资源分享
导航标签添加代码:(同上)
CSS类添加代码:

cddh wow animated cddh7

⑥修改一级标题:留言板
导航标签添加代码:(同上)
CSS类添加代码:

cddh wow animated cddh8

⑦修改一级标题:关于本站
导航标签添加代码:(同上)
CSS类添加代码:

wow animated cddh8 cddh

第二步:添加css代码

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

.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}

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

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
修改WordPress数据库前缀完后台无法登陆教程 WP综合教程

修改WordPress数据库前缀完后台无法登陆教程

一点优化操作完上一个如何修改WordPress数据库前缀修改完之后,发现网站后台无法登陆了,百思不得其姐,然后在百度的帮助下,解决了这个问题,后续的教程请看下面。 如果你将数据库导入到运营中的服务器登...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: