三
07
10月
2009
如何自定义Jimdo模板（七）- 导航菜单的装饰
本文谈一下导航菜单的装饰，也就是字体大小、颜色，背景颜色、背景图片，还有下划线等。都以《如何自定义Jimdo模板（一）》中官方的代码为例。
一、字体大小和颜色
ul.mainNav1 li a,
ul.mainNav2 li a
{
font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
color:#333;
border-bottom:1px solid #CCC;
}
蓝色这句代码 font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif; 它的意思是：
normal：普通样式，因为还有粗体，斜体什么的。
11px/140%：这是设置字体大小的。11px是像素表示法，相当于8号字大小，而12px相当于我们常用的小五或9号大小。140%表示行距，没什么可说的。
Verdana, Geneva, Arial, Helvetica, sans-serif：这是字体名称，根据你的操作系统，从左向右调用，对我们中文系统来说，它会自动调用宋体，不修改也没什么。
color:#333; 这句是字体颜色，#333是三基色表示法，三个数字从左往右，分别表示红绿蓝三色的数值，是十六进制，0表示最小，F表示最大。很明显，#333就是黑色了；如果是#FFF，就是白色；#F00，红色；#aaa就是灰色，类推。
还有一种表示法，其实是一样的，就是每种颜色用两位数来表示，如#FF0000，也是红色，很明显，这种表示法，颜色要丰富的多。
上述字体颜色，是静态时的，也就是正常显示时的颜色，作为菜单字体，还有鼠标指向时和点击后两种情况。
ul.mainNav1 a:hover
{
background:#EEE;
color:black;
}
ul.mainNav1 a.current { font-weight:bold; }
蓝色的这句 color:black; 是又一种颜色表示方法，它直接使用英文单词，它是鼠标放上去时显示的颜色，也可以改为三基色表示法。
ul.mainNav1 a.current { font-weight:bold; } 这句是鼠标点击后字体的设置，在这里，它的意思是粗体，别的没有设置，颜色则继承了静态时的颜色，当然我们也可以在这里添加的，比如改成红色，则加一句color:#F00;即可。
二、背景色
导航菜单加了背景色，会更醒目一点。跟字体一样，背景色也有正常显示时、鼠标指向和点击后三种情况。
ul.mainNav1 li a,
ul.mainNav2 li a
{
font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
color:#333;
border-bottom:1px solid #CCC;
}
这还是前面的代码。这里没有设置正常显示时的背景色，实际上它背景色就是整个版面的背景，如果要设置的话，可以加一句：background:#XXX（X表示0-F）。
ul.mainNav1 a:hover
{
background:#EEE;
color:black;
}
ul.mainNav1 a.current { font-weight:bold; }
这句代码 ul.mainNav1 a:hover 的意思，是鼠标指向时的设置，background:#EEE; 是背景色。ul.mainNav1 a.current 是鼠标点击后的情况，默认是没有背景色的，当然也可以添加的。
三、背景图片
光是加个背景色，有时候还是觉得比较单调。我们看好多网站的导航栏，很有立体感，实际上他们是用了背景图片。在Jimdo里，从文件里上传一个图片，然后加上这样一句代码就行了：background:url(navbg.png) #900; 其中，navbg.png 是做背景的图片，#900在图片无效的情况下，指定背景颜色。
四、实例
刚才把 http://lyg.jimdo.com 的导航栏改了一下，如下图所示，有点仿淘宝的样子。
补充一：
应朋友们的要求，将以上实例的代码公布如下，其实也没什么特别的，本文都说过的内容。
/* Navigation
----------------------------------------------- */
ul#mainNav1
{
margin: 0;
padding: 0;
}
ul#mainNav1 li
{
float:left;
margin:0;
padding:0;
list-style:none;
}
ul#mainNav1 li a
{
font:bold 13px/180% 宋体;
text-decoration: none;
display:block;
background: url(navbg.png) #900;
border-right:1px solid #fff;
color:#fff;
}
ul#mainNav1 li a { padding:6px 20px 6px 20px; }
ul#mainNav1 a:hover{color:#0f0;}
ul#mainNav1 a.current { font-weight:bold; color:#0f0;}
几点说明：
1、这个导航菜单，取消了二级代码，因为实际上没有使用二级菜单。
2、如果有朋友想拿去使用，只要将上面的代码替换掉原来CSS中相应的内容即可。代码中用到的背景图片如下，你可以通过右键另存为到你的电脑中，然后再上传到你的网站。
补充二：
上面的代码有个缺点，我当时就发现了，后来有的朋友提出来了，就是导航菜单的背景跟菜单一样长，显得不是很好看，最好是做成整幅宽度的背景。我这个站的导航菜单当时是在HTML里补救的，不是纯CSS菜单。
经过研究，将背景图片代码移个位置就行了，具体方法是，将下面代码中的 background: url(navbg.png) #900; 换一个地方。
ul#mainNav1 li a
{
font:bold 13px/180% 宋体;
text-decoration: none;
display:block;
background: url(navbg.png) #900;
border-right:1px solid #fff;
color:#fff;
}
在CSS中，跟导航有关的代码还有一处，它是对导航进行总体设置的，官方的代码是：
#navigation
{
float:left;
width:220px;
padding:17px;
}
将前面那个设置背景色的代码放到这里，就是和版面等宽的背景了。
说明：刚才上面这个代码，只是为了说明问题的，可能和你网站上的不完全一样，所以，如果你要修改的话，不要改原来的代码，就是移动一句代码的事。
-
#93
您好我想换别的导航 可是··一改 他就变成红色导航了 怎么回事
-
#92
请仔细查看一下代码，肯定是什么地方弄错了。
-
#91
第一个问题,我按补充二做了，可网页的整个背景都是那个桔黄色的图
-
#90
删除“ border-right:1px solid #fff;”这一句。
-
#89
邻居,我想请教你,我想去掉分格线(白色的竖线).如何去掉啊?
-
#88
第一个问题，见本文补充二；第二个问题，#86已经回复了；第三个问题，请看一下“自定义模板”下的有关内容。
建议你用我的《介绍一个简洁的960模板》中的代码试试，只要改下导航菜单的字体颜色，就达到你的要求了。 -
#87
我的网站是 taobao3000.jimdo.com ,您帮我看一下，我想1、把导航栏的长度变成网页一样宽。
2、还有我想把字被点击完后变成白色，而不是黑色，太难看。3、我想把广告盒放到网页的最下面。
能帮帮我吗？ -
#86
点击后导航字体的颜色设置是：
“ul#mainNav1 a.current { font-weight:bold; color:#0f0;} ”，要改成黑色，可以将“color:#0f0”的值改成#333或#000。 -
#85
问题：
怎么整个网页的背景都是那图片了 ？并且点完导航栏的一项再点另一项后，字不能变成白色，而是变成黑色了成黑色了呢？ -
#84
你好！
如果是你名字链接的网站，我看了一下，好象不是改不掉，你的导航菜单部分代码还是系统原来的。请根据本文“一、字体大小和颜色”下所述内容改看看，应该可以的。 -
#83
你好,邻居.字体大小我怎么改也变不了,不知为什么?
-
#82
牛
-
#81
请看补充一。你只是用了#900这个背景色，没用背景图片。你可以将我提供的背景图片通过右键下载到你的电脑，上传到你的网站，然后指定它的地址就可以了。
-
#80
邻居啊 我用了上面的代码，结果颜色怎么是红色的？不像淘宝网的颜色，请教怎样改？？
-
#79
不一样很正常，因为它们效果不一样。我这里不是全局的导航代码，只是部分。
-
#78
你好：大哥我这段代码怎么跟你发的这个不一样你。我都不知道改怎么改
/* NAVIGATION
----------------------------------------------- */
#navigation1 {
background:url('http://w5.myzcm.com/2009/10/龙道皇太子/t1upblxd58ijnxxxxx-950-27.jpg');
font-family: "Hiragino Kaku Gothic Pro", "qMmpS Pro W3", Osaka, "lr oSVbN", sans-serif;
font-size:12px;
float:left;
padding-top:0px;
width:950px;
}
ul.mainNav1,
ul.mainNav2,
ul.mainNav3 {
text-align:left;
margin:0;
padding:0;
list-style:none;
}
ul.mainNav1 li,
ul.mainNav2 li,
ul.mainNav3 li {
display:inline;
margin:0;
padding:0;
list-style:none;
}
ul.mainNav1 li a,
ul.mainNav1 li a:link,
ul.mainNav1 li a:visited {
display:block;
float:left;
color:#666;
font-size:12px;
text-decoration:none;
padding:14px 5px 12px 30px;
}
ul.mainNav1 li a:hover,
ul.mainNav1 li a:active,
ul.mainNav1 li a.current {
padding:14px 5px 12px 30px;
color:#fe6b26 !important;
text-decoration:none;
background:url('http://www6.jimdo.com/templates/1337/--img--/menu_icon.png') 0 15px no-repeat;
} -
#77
唉，我到现在还没搞明白怎么把二级菜单分离出去，现在搞的只是普通的链接，所有页面共用的。真正的二级菜单，它是随主菜单的不同而不同的。
-
#76
二级导航的代码也麻烦写个教程吧
-
#75
要做成我那样的没问题，我已经提供了模板代码，请看一下《如何自定义Jimdo模板(九) - 介绍一个简洁的960模板》。
-
#74
就是搞不到像你那样样。你帮我搞下好吗。再这样看我都快疯了。
-
#73
你的好象也是一种淘宝模板吧，你什么搞不好呢？
-
#72
您好。我这个怎么搞都不行。教下我。我都不懂看了N遍了。
-
#71
大家好，谢谢来访！
上面二位都是问导航栏的问题，应该跟导航的代码设计或者具体处理上有关系。一是宽度单位，二是居中，边距什么的，处理好了，就应该对齐的。 -
#70
邻居好。谢谢你的系列指导。我还想请教一个问题：我按你说的方法移动背景图代码位置后，导航栏还是不跟版面一样宽，这是什么原因呢？另外：我上传的图片怎么也无法放到版面的宽度，而文本编辑时又可以跟版面等宽，这是不是代码的问题呀？
-
#69
网上领居你好！
辛苦了，有个问题请教你，就是我的导航栏整条长度，怎么也调不到和下面的内容等宽
显得很不好看，请指教一下，谢谢！ -
#68
站长说得真够详细,谢谢分享!
-
#67
justshow：
你好！
关于淘宝的搜索，有两个处理的方法，一是你改它的宽度，你看下它的代码就明白了；二是，你把它放到表格里，也可以自由的处理它。
我简单的给你提供一点思路，你认真想一下，相信你知道怎么做的。 -
#66
life8:
你好！关于主菜单横排，二级菜单分离出去竖排，据说要用到JS技术，不好意思，我的水平不够，也没有掌握。 -
#65
你好：楼主 在您的网站上，我学到了不少东西，很感谢你。 我想在问一下 为什么我仿淘宝的那个导行调到到中间后 那个淘宝的搜索栏
却还是在最左边 还有那个淘宝的顶部图片弄成Flash图片 具体是怎么弄的 希望你能在给我详细的讲解一下 -
#64
你好！学到不少东西，先谢了！有个问题请教一下，如果想要竖排的二级导航，这个代码应该怎么写，加在哪里呢？
-
#63
放心的试，不会出什么事的。不过也要养成习惯，就是修改代码之前，最好用记事本把代码复制下来，搞糟了再复制回去就是了。
-
#62
您好！谢谢你这么忙都给我指点，不过我还要去实验，因为我很菜什么也不懂。如果我搞糟了还能找你帮帮忙吗?
-
#61
youlim:
你好！设定导航菜单背景的代码是“background: url(navbg.png) #900;”其中“url(navbg.png)”是设定背景图片的，你上传的图片名称要跟它对应就可以了。 -
#60
您好！我照你的方法把背景图传上去了是红色的 ，可是我想用黄色的那个 ，我把黄色图片传到文件里面了，可是我不知道怎么把它设置成背景。能帮帮我吗？谢谢！
-
#59
呵呵，恭喜！
-
#58
收回前面的话 我搞定了 谢谢
-
#57
还是弄不好哦 可以麻烦帮我改一下吗？
-
#56
在CSS里，就是本文补充二第二处代码里。
请你去看一下“如何自定义Jimdo模板（五）- 导航菜单的横排与竖排”后面的补充内容。
-
#55
请问是在css里面看边距还是在html里面 我的html里面关于导航的如下
<div id="navigation">
<var>navigation[1|2|3]</var>
</div>
css里的请问是那一行 我用的是你前面放出的那个CSS代码 -
#54
居中是有些问题，请看看导航条的宽度和边距。
-
#53
想把导航条和下面的元素添加上去的html对齐 望指教
-
#52
两种方法：
一、按补充二的办法，弄成整个幅面的宽度，就像http://lyg.jimdo.com 那样。
二、更改导航栏宽度，去掉后面那一块。
-
#51
我的导航栏感觉很不协调，不居中，后面还有多余的东东，恳请指教怎么编排那？
-
#50
搞的很不错的。底部图片之间有点空白，找时间调整一下。另外，应该给自己的网站弄个页面标题，请登录后到右上角控制面板里的设置里看看
-
#49
您这儿真是没白来，看您的文章学习了两天，终于有点摸样了。感谢老大的无私奉献。请您有时间帮我看一下，有什么地方不对，
请您再指点指点，多谢了！http://tb2.jimdo.com/ -
#48
不错，跟头部图片挺协调的。
-
#47
真是受益匪浅啊！我今天也把导航菜单装饰了！继续支持！！
-
#46
你是850PX宽度吧？居中没处理好。
-
#45
你好，急救！我的正文部分怎么显示在旁边，能不能介绍一下正文部分怎么编制的，谢谢，急。
-
#44
你 http://www.lelebaby.com/index.asp 这个网站搞的很好、很漂亮呀？
打印版本