23 June 2011

div+css+js打造可用于Jimdo的二级动态下拉导航菜单栏代码

玩Jimdo也有一段时间了，诸葛草帽电脑工作室的各个部分也都差不多修改过很多次，试用过很多Jimdo插件和Jimdo代码，特别是导航菜单，导航是网页设计中的重要元素。一个良好的网页导航系统能不止是要把它设计的够漂亮，同时更重要的是要能够带领你的用户逗留在你的网站之中，让访客轻松找到他们想要观看的内容。

诸葛草帽曾经尝试过改造Jimdo自带的导航栏使其变成动态显示的二级下拉导航菜单，但是由于Jimdo导航部分（mainNav）代码限制原因都没有成功，于是退而求其次再在网页中添加一个导航栏，这样还有利于SEO，原来的导航栏移动到网站下部或者隐藏，但是不推荐网页中过多使用display:none这样的隐藏代码，容易让搜索引擎认为你在SEO作弊，这次使用了以前写过的一篇文章（一款简洁的下拉导航菜单代码）中的代码，这个导航菜单代码的优点是代码比较简短，而且基本兼容所有主流浏览器，以前刚开始玩的时候做网页都是用的table，现在改用div+css了，所以我这里将代码替换成DIV+CSS，现在的代码在“万恶的”IE6下下拉菜单稍稍有些错位，其余主流浏览器没有什么问题了。

代码如下：

HTML代码：

</script>

<li>

</li>

<li>

<ul>

<a href="http://zhugecaomao.jimdo.com/jimdo/">Jimdo代码</a>

<a href="http://zhugecaomao.jimdo.com/jimdo/">Jimdo网站</a>

</li>

</ul>

<a href="http://zhugecaomao.jimdo.com/jimdo/" onmouseout="MM_showHideLayers('d2','','hide')" onmouseover="MM_showHideLayers('d2','','show')">Jimdo</a>

</li>

<li>

<ul>

<a href="http://zhugecaomao.jimdo.com/seo/">SEO技巧</a>

</li>

</ul>

</li>

</ul>

说明：

绿色部分和蓝色部分是菜单中的两个项目，仿照这两个继续添加项目即可，红色部分是引用js代码，可以下载下来或者使用记事本把js文件内容复制进去之后修改后缀名为“.js”保存到你的网站之后引用（具体引用方法见：通过js调用方式布置阿里妈妈广告和3d标签云等，减小页面代码体积、加快网页加载速度），js代码内容如下：

JS代码：

function MM_findObj(n, d) { //v4.0

var p,i,x;if(!d) d=document;if((p=n.indexOf("?"))>0 && parent.frames.length){

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n]) && d.all) x=d.all[n]; for (i=0;!x && i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x && d.layers && i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && document.getElementById) x=document.getElementById(n); return x;}

function MM_showHideLayers() { //v3.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }

obj.visibility=v; }}

//showhidelayer

function mOvr(src, cOvr)

{if (!src.contains(event.fromElement)) {src.style.cursor = "default";src.bgColor = cOvr;}}

function mOut(src, cOut)

{if (!src.contains(event.toElement)) {src.style.cursor = "default";src.bgColor = cOut;}}

//changetdcolor

CSS代码：

#menuzgcm{POSITION:absolute;top:169px;left:12px;width:990px;height:30px;display:block;line-height:30px;font-size: 14px;font-weight: 700;margin:0;padding:0;}

#menuzgcm li{LIST-STYLE-TYPE:none;width:80px;LINE-HEIGHT:30px;display:block;text-align:center;float:left;margin:0 auto;padding:10px 0 10px 0;}

#menuzgcm li a{POSITION: relative;padding:0;margin:0;WIDTH:80px; DISPLAY: block; HEIGHT:30px; line-height:30px;font-size: 14px;font-weight: 700;}

#menuzgcm li a:hover {border-bottom:1px #fff dashed;margin:0;background: url(http://u.jimdo.com/www22/o/sd661a257e3d02f6b/userlayout/img/nav.gif) no-repeat center center;color:#0787d0;font-weight: bold;}

#menuzgcm li a.current{border:0;background: url(http://u.jimdo.com/www22/o/sd661a257e3d02f6b/userlayout/img/nav.gif) no-repeat center center;color:#0787d0;font-weight: bold;}

#menuzgcm li ul{POSITION: absolute;}

#menuzgcm li ul li{LEFT:0; POSITION: absolute;top:20px; VISIBILITY: hidden; WIDTH:80px;background:#efefef;text-align:center;margin:0;padding:0;}

#menuzgcm li ul li a{border-bottom:1px dashed #acacac;}

如果代码中有什么错误请留言告知诸葛草帽

Jimdo博文列表标题修饰

非常棒的绿色下拉导航菜单

jimdo代码：诸葛草帽电脑工作室（四）导航栏的修饰

诸葛草帽启用全新模板、改版进行中...|玩美是种态度、简约是种性格

通过js调用方式布置阿里妈妈广告和3d标签云....续 - JS文件外链网盘与方法

一款二分栏、灰黑色调、DIV+CSS布局的jimdo模板-诸葛草帽

通过js调用方式布置阿里妈妈广告和3d标签云等，减小页面代码体积、加快网页加载速度

jimdo模板-可用于jimdo站的网站标签云插件代码

纯div+css+js打造仿wordpress 3D flash动态标签云代码|兼容所有浏览器|Jimdo

Tags: 美化相关, 网页浏览, jimdo, seo, 分页20

Write a comment

Comments: 9

#1
深圳宝安花店 (Friday, 24 June 2011 15:27)

不错，玩css的可以研究一下了。
#2
中国圆号网 (Friday, 24 June 2011 21:19)

学习来了
#3
淘宝600家园 (Friday, 24 June 2011 22:15)

诸葛兄的网站可是越来越飘亮了~~~~
#4
网型网秀 (Saturday, 25 June 2011 00:45)

单独弄的一个导航？前段时间不是有朋友能直接使用jimdo导航制作下拉么？
#5
网上邻居 (Saturday, 25 June 2011 06:56)

分类太多时，下拉式导航菜单是个不错的选择。
#6
诸葛草帽 (Saturday, 25 June 2011 20:38)

感谢各位的来访！
@网型网秀：可以么？在哪里我去学习学习！
#7
小卒居社区 (Monday, 27 June 2011 23:54)

不错哦，网上也找了一下，有的也不错
#8
1vs1 (Thursday, 16 February 2012 12:39)

学习了
seo jimdo爱好者
#9
120 dofollow blog comment only 5$ (Wednesday, 16 August 2017)

Thank you very much for this useful article. I like it.