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

诸葛草帽电脑工作室

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

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

代码如下:

HTML代码:

<script type="text/javascript" src="http://u.jimdo.com/www24/o/s1f88595487c55a0a/userlayout/js/nav.js">

</script>

<ul id="menuzgcm">

<li>

<a href="http://zhugecaomao.jimdo.com/">首页</a>

</li>

 

<li>

<ul>

<li id="d2" onmouseout="MM_showHideLayers('d2','','hide')" onmouseover="MM_showHideLayers('d2','','show')">

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

<li id="d3" onmouseout="MM_showHideLayers('d3','','hide')" onmouseover="MM_showHideLayers('d3','','show')">

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

</li>

</ul>

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

</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;}

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

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.