如何做一个blogger导航栏的下拉菜单

有导航栏可以让Blog看起来更专业一点。以前也介绍过生成导航栏的方法。如果有大量的分类信息呢？当鼠标移过时显示下拉菜单怎么样？效果可以看原作者的Blog.这里介绍的是把一些链接模块放在导航栏上。


1.Head之间引用JS。比较建议自己下载并上传JS文件

<script src='http://non.alastor.googlepages.com/chrome.js' type='text/javascript'/>

2.定义CSS

chromestyle.css - 银色
chromestyle2.css -蓝色
chromestyle3.css - 绿色
chromestyle4.css - 红色

一共有四种样式，你可以选择一种跟Blog打配的，并把里面的内容添加到Blogger模板中。紧跟在]]></b:skin>之前就可以。

3.导航栏位置

一般我们会把它放在标题下方，不过，只要你愿意，可以放在任何你想要的地方，比如最上方。

这里我们把它放在标题栏下方，找到 header-section结束、content-wrapper开始的地方（即在div id='content-wrapper'这句之前），添加下面代码

<div class='chromestyle' id='chromemenu'>
<ul>
<li><a href='http://YOURBLOG.blogspot.com/'>Home</a></li>
<li><a href='#' rel='dropmenu1'>导航 1</a></li>
<li><a href='#' rel='dropmenu2'>导航 2</a></li>
<li><a href='#' rel='dropmenu3'>Content 3</a></li>
<li><a href='#' rel='dropmenu4'>Content 4</a></li>
</ul>
</div>
<script type='text/javascript'>
cssdropdown.startchrome("chromemenu")
</script>

4.把原侧边栏模块移到导航栏

找到相应的模块代码部分，做一些修改。添加红色部分。因为我们在第三步中已经定义了导航1、2等导航标题，有个Rel属性，下面代码中的Id属性应该与相应的Rel属性对应。

<b:widget id='...' locked='false' title='...' type='...'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu1'>
<div class='widget-content'>
.
.
.
</div>
</b:includable>
</b:widget>

记住要删除原侧边栏模块的标题。

<h2 class='title'><data:title/></h2>

5.美化部分

尽管按上面的方法已经实现了下拉菜单，但对于一些模块会不太完美，比如标签，记数器会让菜单扭曲，作者提供了相应的方法，即把计数器放在链接内部。

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu1'>
<div class='widget-content'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/> (<data:label.count/>)
<b:else/>
<a expr:href='data:label.url + "?max-results=100"'><data:label.name/> (<data:label.count/>)</a>
</b:if>
</b:loop>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

下面代码针对订阅链接，真实效果查看作者导航栏的NewsFeeds。

<b:widget id='Label2' locked='false' title='Newsfeeds' type='Label'>
<b:includable id='main'>
<div class='dropmenudiv' id='dropmenu2'>
<div class='widget-content'>
<a href='http://YOURBLOG.blogspot.com/feeds/posts/default/-/' target='_blank' title='Subscribe to Posts'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Posts</a>
<a href='http://YOURBLOG.blogspot.com/feeds/comments/default/-/' target='_blank' title='Subscribe to Comments'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> Comments</a>
<b:loop values='data:labels' var='label'>
<a expr:href='"http://YOURBLOG.blogspot.com/feeds/posts/default/-/" + data:label.name' target='_blank'><img src='http://non.alastor.googlepages.com/rss_icon.gif'/> <data:label.name/></a>
</b:loop>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>