鸡西网—微信标志
  • 鸡西网站制作
  • 鸡西网客服热线已更改为”400-0467-004“,请广大客户周知。
  • 鸡西网站设计为您提供免费技术问答.如有您有计算机的相关问题欢迎前来咨询!
  • 敢不敢在鸡西网High一下
  • 网站地图

鸡西网站设计 D8主题2.2 置顶导航菜单(修正版)

WordPress Danny.✔ 3151浏览 0评论 百度收否

自从上次发布的《大前端 D8主题 置顶导航菜单》一文后,鸡西网站设计广受使用D8主题的网站设计者们的好评。但毕竟D8主题并非鸡西网站设计首创,有写BUG个跟着D8的官方版本出来的,设备也不够,受到了测试的限制。这几天收到了很多网站设计者们给鸡西网站设计提出的一些BUG。现以本文修正上次的版本。

注意:本教程共分五步,其中第一步和第二步是针对之前按照《大前端 D8主题 置顶导航菜单》一文修改过的D8主题。也就是说,之前按照《大前端 D8主题 置顶导航菜单》修改过的,今天的五步都需要操作,作用是把相关代码恢复到D82.2版本的默认状态。没有按照之前发布的《大前端 D8主题 置顶导航菜单》一文操作的朋友,直接从第三步开始操作就可以了。本教程看似很长,其实真正修改起来没有那么麻烦。只需认真根据教程里的提示操作修改就可以了。

 

 

第一步 打开主题目录中的header.php文件。

查找以下代码:

<div id="navbar" style="width: 1320px;">
<div class="navbar">

修改成:

<div class="navbar">

继续查找代码:

</div>
<div class="speedbar">

修改成

<div class="speedbar">

第二步 打开主题目录中的style.css文件。

查找以下代码:

#navbar{position: fixed;width:100%;*z-index:3;top:0px;}
.navbar{height:52px;

修改成

.navbar{height:52px;

继续查找代码:

.pagesider-menu li.current-menu-item a{z-index:0;}
.pagecontent{margin-left:

修改成:

.pagecontent{margin-left:

继续查找代码:

body{margin:0;padding-top: 52px;

修改成:

body{margin:0;

第三步 打开主题目录中的header.php文件。

查找以下代码:

<body <?php body_class(); ?>>
<header class="header">

修改成

<body <?php body_class(padding); ?>>
<header class="header">
<div id="navbar" class="top-navbar" style="width: 1320px;">

继续查找代码:

<div class="speedbar">

修改成

</div>
<div class="speedbar">

第四步 打开主题目录中的style.css文件。

查找以下代码:

.navbar{height:52px;

修改成

.top-navbar{position: fixed;max-width:100%;*z-index:3;top:0px;}
.navbar{height:52px;

继续查找代码:

body{margin:0;

修改成

body.padding{padding-top: 52px;}
body{margin:0;

继续查找代码:

.navbar .menu{position: absolute;top: 42px;

修改成:

.navbar .menu{position: absolute;top: 52px;

继续查找代码:

.navbar .screen-mini .btn{padding: 11px 15px}

修改成:

.navbar .screen-mini .btn{padding: 16px 20px}

继续查找代码:

.navbar .screen-mini .btn.screen-nav{padding: 11px 18px;height:auto;}

修改成:

.navbar .screen-mini .btn.screen-nav{padding: 16px 20px;height:auto;}

第五步 打开主题目录中的js文件夹下的jquery.js文件。

查找以下代码:

$('.speedbar, .container, .footer').hide()

修改成:

$('.speedbar, .container, .footer').hide()
$("div#navbar").removeClass("top-navbar");
$("body").removeClass("padding");

继续以下代码:

$('.speedbar, .container, .footer').fadeIn()

修改成:

$('.speedbar, .container, .footer').fadeIn()
$("div#navbar").addClass("top-navbar");
$("body").addClass("padding");

继续查找以下代码:
(按照鸡西网站设计之前发布的大前端 D8主题 置顶导航菜单做过的D8主题,可以免去此步)

var toper = 10;

修改成:

var toper = 62;

好了,至此,教程结束了。如发现任何BUG,欢迎评论反馈。

感谢大家对鸡西网站设计的支持。

转载请注明:七网科技 » 鸡西网站设计 D8主题2.2 置顶导航菜单(修正版)

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. 不错 😀
    白掌柜2013-12-19 14:17 回复
    • 别用这个。这个是2.2的。
      Danny.✔2013-12-19 14:20 回复