当前位置:首页 » SEO技术 » 正文

z-blog怎样制作下拉导航,z-blog下拉导航制作方法

作者:盖 继东 时间:2015-12-04 标签:
文章摘要:      网站没有下拉导航,是很多博主的内伤,今天台州网站建设小编带来的这款下拉导航不但支持z-blog,还支持别的网站程序,比如dedecms,phpcms等,效果就是我的博客下拉导航效果,不喜欢这个样式你可以在css文件中更改。   看好了,这可是jquery的喔,当初台州网站建设也考虑用纯div+css来构建,可是有考虑到兼容性,…

  甘肃兰州SEO

  网站没有下拉导航,是很多博主的内伤,今天台州网站建设小编带来的这款下拉导航不但支持z-blog,还支持别的网站程序,比如dedecms,phpcms等,效果就是我的博客下拉导航效果,不喜欢这个样式你可以在css文件中更改。

  看好了,这可是jquery的喔,当初台州网站建设也考虑用纯div+css来构建,可是有考虑到兼容性,因为我之前用div+css写过下拉导航的,兼容性不是很好,特别是在IE下,所以用的jquery,喜欢的朋友欢迎借鉴,转载注明出处喔。

  一,将以下代码粘贴到网站导航处,把原有的导航替换掉,把下面的导航链接以及导航文字改成你的网站。(记住备份原有的网站程序)

  

  二、将下面css代码粘贴到相应的css文件中,最好是控制全局样式的css文件中,避免每个模板中出现的css文件太多,服务器请求文件太多,网站打开速度减慢(可以忽略不计,但是博主我喜欢完美,所以才建议大家这样做。)当然css样式你可以更改。

  .clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}

  .navBar{position:relative; z-index:11; padding-left:10px; height:40px; line-height:40px; background:#A3D0F2; color:#333;}

  .nav{position:relative; width:980px; margin:0 auto; font-size:14px; }

  .nav a{ color:#333; text-decoration:none; color:#333; font-size:14px;}

  .nav a:hover{color:#ffffff;}

  .nav h3{font-size:100%; font-weight:normal;}

  .nav .m{float:left; position:relative; z-index:11;}

  .nav .s{float:left; width:3px; text-align:center; color:#D4D4D4; font-size:12px; }

  .nav h3 a{display:block; width:124px; text-align:center; font-weight:bold; text-decoration:none; color:#333; cursor:pointer;}

  .nav .sub{display:none; position:absolute; left:-3px; top:40px; z-index:11; width:128px;

  border:1px solid #E6E4E3; border-top:0; background:#cdcdcd;}

  .nav .sub li{text-align:center; padding:0 8px; margin-bottom:-1px;}

  .nav .sub li:hover{background:#ffffff;}

  .nav .sub li a{display:block; border-bottom:1px solid #E6E4E3; padding:8px 0; height:28px; line-height:28px;

  text-decoration:none; color:#333; color:#666;}

  .nav .sub li a:hover{color:#5EAAE4;}

  .nav .block{ height:3px; width:130px; background:#5EAAE4; position:absolute; left:0; top:37px; overflow:hidden;}

  三、将jquery执行代码放置网站底部,考虑放网站底部的原因是:网站先打开首先加载全局,避免网站下半屏加载缓慢导致的尴尬,最后加载js特效。

  

  四、将jquery文件放置网站头部css文件下。

  点击此处下载!

  五、编译模板,刷新网站,看一下下拉导航的效果怎么样,改下拉导航可以不单单只是支持z-blog,还支持dedecms,phpcms等程序,php的模板和htm的模板都可以,源代码都不用改,但是注意编码格式。

更多
没有评论

抱歉,评论被关闭


网站地图