× 681字 × 0阅

CSS 下拉菜单

由于 Blogger 没有提供二级菜单功能,所以只好自己用 CSS 创建一个,但是唯一的缺点就是当前菜单无法高亮。Blogger 默认的菜单是有此功能的,所以鱼和熊掌不能兼得的我在遍寻谷歌只找到 javascript 的方法而且屡试屡败后还是放弃了。如果你也不介意没法高亮这件事,且来听我说说如何用 CSS 创建下拉菜单吧。

HTML 部分

这个部分很简单,用 <ul><li> 标签建立一个无序列表即可,比如我的如下:

<div class='navi' id='navi'>
  <ul class='nav' id='nav'>
    <li><a href='/'>首页</a></li>
    <li><a href='/p/aboutblog.html'>关于</a></li>
    <li><a href='/p/archive.html'>归档</a>
        <ul>
        <li><a href='/search/label/%E7%94%9F%E3%83%BB%E7%AE%80%E6%85%A2'>&#12539;简慢</a></li>
        <li><a href='/search/label/%E8%B6%A3%E3%83%BB%E7%9B%8E%E7%84%B6'>&#12539;盎然</a></li>
        <li><a href='/search/label/%E9%80%94%E3%83%BB%E6%99%B4%E6%9C%97'>&#12539;晴朗</a></li>
        <li><a href='/search/label/%E7%9F%A5%E3%83%BB%E6%97%A0%E6%B6%AF'>&#12539;无涯</a></li>
        <li><a href='/search/label/%E4%B9%90%E3%83%BB%E7%BB%95%E6%A2%81'>&#12539;绕梁</a></li>
        <li><a href='/search/label/%E6%96%87%E3%83%BB%E6%8A%92%E6%80%80'>&#12539;抒怀</a></li>
        </ul></li>
    <li><a href='/p/subscribe.html'>订阅</a></li>
    <li><a href='http://draft.blogger.com/'>登陆</a></li>
  </ul>
</div> 

由于我的 Label 都是中文,虽然不知道有否必要,但我还是选择把中文转化为编码,比如“生・简慢”变成了“%E7%94%9F%E3%83%BB%E7%AE%80%E6%85%A2”。转换地址在此

CSS 部分

这个部分就有点复杂了,我也是参考了 Create a Drop Down Menu In Blogger 修改而成(这里要注意 navinav 与 HTML 部分的对应。):

/* Navi
-------------------------------------------------------------- */
#navi {
    margin: 0 -30px 30px; 
    padding: 0; 
    position: relative;
    border-bottom: 1px solid #eee;  
    height:50px;
    font-size: 20px;
    background: #f8f8f8;
    font-family: &quot;Microsoft Jhenghei&quot;,&quot;Microsoft YaHei&quot;,&quot;Hiragino Sans GB&quot;,Verdana,STSong,Simsun,Arial,Helvetica Neue,Helvetica,sans-serif;
    line-height: 50px;
}
#navi ul {
    margin: 0 0 20px 0;
} 
#nav li { 
    float: left;
    width: 100px;
    text-align: center;
}
#nav li a {
    display: block;
    border-bottom: 1px solid #eee;
} 
#nav li a:link, #nav li a:visited { 
    color: #444;
}
#nav li a:hover, #nav li a:active { 
    background: #444; 
    color: #FFF;
} 
#nav li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 160px; 
    margin: 0; 
    padding: 0; 
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul { 
    left: auto; 
}  
#nav li li {
    width: 100px;
    text-align: center;
}
#nav li li a {
    display: block;
    border-top: 1px solid #fefefe;
} 
#nav li li a:link, #nav li li a:visited { 
    background: #f8f8f8;
    color: #444;
    z-index: 9999;  
} 
#nav li li a:hover, #navli li a:active { 
    background: #444; 
    color: #FFF; 
} 

效果预览

CSS 下拉菜单
CSS 下拉菜单
经过大量的整理和取舍,以及小部分的修改,基于 WordPress、使用 Touchfolio 主题的个人网站终于成立了!(掌声在哪里?!鲜花在哪里?!)接着,让我们热烈欢迎它的闪亮登场(咚咚咚咚): CyanChen.Com 建立个人网站的想法很早就有了,但我真的奇懒无比,一直未开工。要不是找工作逼得紧,我也不会如此努力克服拖延症把它完成。现在的内容是我像挤牙膏一样挤出来的,毕竟设计部分经验太少,平时也没有什么积累。倒是照片我能拿出一打,所以摄影作品也堂而皇之地出现在里面充个场面。 接下来的目标就是自己为个人网站设计并编一个主题。到达这步之前,我可以试试看没效率的直接写网页,这样简单多了。
点击加载Disqus评论