Sunday, June 27, 2010

部落格下拉菜单/分类菜单

Share




这是一个不错的下拉菜单,它可以分类成很多~
通常下拉菜单是提供给有许多页面/标签要向读者分享的人
不然用了会不知道该放什么好~而不放却又显得多余
想要的人请跟着以下步骤做,在此我也先声明,不是每个人的部落格背景都能接受这个插件
新版本背景的用户可能无法实现下拉的效果




步骤一:
到Design-->Edit HTML找到以下的代码
]]></b:skin>

步骤二:
然后在他的上面放上以下代码:

#menu {width:740px; background: #3aa3d3; height:25px;; text-align:center; position:relative; z-index:500;}
#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
#menu ul {display:inline-block;}
#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline-block; display:inline;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level1 {margin:0 auto; background:#710;}
#menu ul.level1 li.level1-li {float:left; display:block; position:relative;}
#menu ul.level1 {background:#3aa3d3;}
#menu ul.level2 {background:#ae4621;}
#menu ul.level3 {background:#c98b14;}
#menu ul.level4 {background:#9f690e;}
#menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 20px 0 10px;}
#menu ul.level1 li.level1-li a.level1-a {float:left;}
#menu ul li:hover > ul {visibility:visible; left:0; top:25px;}
#menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}
#menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
#menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
#menu a:hover ul {left:0; top:23px;}
#menu li.left a:hover ul {left:auto; right:-1px; top:23px;}
#menu li.left ul a {text-align:right; padding:0 10px 0 20px;}
#menu a:hover a:hover ul,
#menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
#menu li.left a:hover a:hover ul,
#menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
#menu a:hover ul ul,
#menu a:hover a:hover ul ul {left:-9999px;}
#menu li.left a:hover ul ul,
#menu li.left a:hover a:hover ul ul {left:-9999px;}
#menu li a.fly {font-variant: small-caps;}
#menu li.left ul a.fly {font-variant: small-caps;}
#menu li a:hover,
#menu li a.fly:hover {background-color:#555555;}
#menu li:hover > a,
#menu ul li:hover > a.fly {background-color:#555555;}
#menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
#menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
#menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
#menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}


*有时候可能会因为代码的干扰,造成无法显示,所以如果放了所有代码之后依然无法正常显示
那么你可以将以上的代码放到Headings之下或Header之下
颜色代码可以自行更改,太多了,大家自己看看哦

放好了之后按Preview看能不能打开部落格首页,如果没有问题才按Save。


步骤三:
然后到Design-->Add A Gadget-->HTML/JavaScript
将以下的代码放进去

<div id="menu">
<ul class="level1">
<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Email</a></li>
<li><a href="#url">Telephone</a></li>
<li><a href="#url">Online Form</a></li>
<li><a href="#url">Snail Mail Address</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Ski Hire Facilities</a></li>
<li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Beginners Slopes</a></li>
<li><a href="#url">Intermediate Slopes</a></li>
<li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Local</a></li>
<li><a href="#url">Nearby</a></li>
<li><a href="#url">With instructor</a></li>
<li><a href="#url">Snow boarding</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Expert</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Night Life</a></li>
<li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">From Airport</a></li>
<li><a href="#url">In Resort</a></li>
<li><a href="#url">Multiple Resorts</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Where to go</a></li>
<li><a href="#url">What to do</a></li>
<li><a href="#url">Places of interest</a></li>
<li><a href="#url">National parks & Museums</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li left"><a class="level1-a fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level2">
<li><a href="#url">Money Exchange</a></li>
<li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Lift Passes</a></li>
<li><a href="#url">Insurance</a></li>
<li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level4">
<li><a href="#url">Boots</a></li>
<li><a href="#url">Skis</a></li>
<li><a href="#url">Ski Wear</a></li>
<li><a href="#url">Goggles</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Ski Schools</a></li>
<li><a href="#url">Snow Report</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="level3">
<li><a href="#url">Austrian</a></li>
<li><a href="#url">German</a></li>
<li><a href="#url">French</a></li>
<li><a href="#url">English</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#url">Short Breaks</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
</ul>
</div>


这一个代码有些许的混乱,我尝试调整了之后大概明白了一些
在这里向大家解释,也算是小小的教大家一些基本的代码=)
不过说真的,我的解释能力不是很好-.-请大家见谅..

1.那些level1-level4都分为菜单的层级,菜单第一层是level1,从level分出来的是level2
level2分出来的就是level3,随着这样来区分

2.level1-li代表下拉菜单朝向右侧打开

3.level1-li left代表下拉菜单朝向左侧打开

4.level1-a代表不打开下拉菜单

5.level1-a fly代表level1菜单要下拉

6.fly代表分类,如果你的菜单要分类,那么记得要放fly这字眼哦~

7.#Url可以替换为你的连接

我所知道得就上面这些了@@


如果你要开多一个分类而不要下拉,那么就添加以下代码
<li class="level1-li"><a class="level1-a" href="#url">名字</a></li>


如果你要添加一个分类,但是要有下拉,那么就添加以下代码
<li class="level1-li"><a class="level1-a fly" href="#url">名字</a>
<!--[if lte IE 6]><table><tr><td><![endif]-->


<!--[if lte IE 6]>是为了让他呈现下拉效果,所以别删除哦

添加了之后,你就可以在他下面添加下拉菜单了,如:
<ul class="level2">
<li><a href="#url">名字</a></li>
<li><a href="#url">名字</a></li>
</ul>



感觉自己解释到很复杂,但他真的就是这么复杂= =
而且还有些我没解释,我怕会越说大家越不懂哦
大概就这些了,大家慢慢弄~

还有现在Blogger限制要写标题,如果不要放标题的,就在标题的框内打<h2></h2>就可以了=)

by:kenchy

28 comments:

@啊玲 said... 回复此评论
This comment has been removed by the author.
blingbling deco said... 回复此评论

你好。。可能我是电脑白痴吧。。做不到喔??

Paul 五花八门 の 世界 said... 回复此评论

我不是很明白噢~ :((

Kenchy said... 回复此评论

请问你们是那里不明白呢?@@

Paul 五花八门 の 世界 said... 回复此评论

这些都放进去了~可是要怎样把它弄到会下拉哦?

Kenchy said... 回复此评论

@Paul 五花八门 の 世界
我给的代码已经有下拉效果了
你只需要更改名字之类的就可以了哦
你放了吗?我没看到@@

[ J e a l o u s ] said... 回复此评论

为什么我的不能的?

Kenchy said... 回复此评论

@[ J e a l o u s ]
怎么说不能呢?

大家,如果有遇到问题
请将你的部落格网址放上来方便我查询
并且说出那里一部分弄不到
还是那里不明白
我也只能这几天帮你们了
之后就没上来了哦

Paul 五花八门 の 世界 said... 回复此评论

@Kenchy

我放了阿~可是因为不懂怎么修改~然后没有下拉的效果~就又全部弄走了~哈哈...现在在试下~

Kenchy said... 回复此评论

@Paul 五花八门 の 世界
不好意思,昨天没上来=)
那么现在可以了吗?

小杰 said... 回复此评论

不好意思~~我很多不明白~~
#Url 需要散掉 url 前面的#要放吗??
要如何弄下来 像你的这种
还有字的颜色要怎样换掉~~还是不能换
还有另一个问题 不关于这个
你如何弄(以下网站图片)
http://img401.imageshack.us/img401/3724/93292328.png
我很多东西都不懂~请多多指教~
因为很少上来看~所以希望你能用email 发给我~谢谢
xiaojie_7841@hotmail.com

Kenchy said... 回复此评论

@小杰
我寄给你了

小杰 said... 回复此评论
This comment has been removed by the author.
小杰 said... 回复此评论
This comment has been removed by the author.
小杰 said... 回复此评论

不好意思~~我想问一下
有没有图能教学
我不是不会弄
看不懂
有点乱
你说的很多不明白
我放了动一下就能拉下的~~结果 怎样动都没反应~~
不如帮我弄 然后 我自己放上去

小杰 said... 回复此评论

我的blog
jay-kaka.blogspot.com

小杰 said... 回复此评论

为什么我用iE看的时候 为什么会这样
http://img686.imageshack.us/img686/443/83812471.png
我用firefox缺弄不下来
你可以去我的blog看~~
在上面

Kenchy said... 回复此评论

@小杰
没有图文教学
这一个下拉菜单需要的是更改代码
就算要我拍下来了也没什么用处
我看了你的部落格,并没有显示下拉效果
也许是因为你更改错了还是什么
将你放的所有代码copy给我
我看看问题在哪

小杰 said... 回复此评论

好的~~或者我给你密码 你能不能帮我做~~不能没关系~~
我会找出原因~~谢谢你~~等等我email给你我的密码

❤annie❤ said... 回复此评论

头爆掉><

小杰 said... 回复此评论

@❤annie❤
做么偷头爆掉
你也是弄不到哦~~

Kenchy said... 回复此评论

不好意思两位,我现在帮小杰看看
annie看不懂吗?@@

小杰 said... 回复此评论

@Kenchy谢谢你呀!!

Kenchy said... 回复此评论

@小杰
尝试了,不能,应该是你使用的模版问题
你用的是官方模版吗?

小杰 said... 回复此评论
This comment has been removed by the author.
小杰 said... 回复此评论

@Kenchy
是的:如果方便的话请在msn说 好吗??

❤annie❤ said... 回复此评论

看不明..弄不到..就头爆掉噜

小杰 said... 回复此评论

@❤annie❤
其实新模版不能放~~我换去旧的就可以了~~

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment