EMLOG学院

侧边栏分类和存档下拉菜单的制作方法

摘要:这个模板是把分类和存档合并到一处,需要注...
这个模板是把分类和存档合并到一处,需要注意的是,由于position:absolute绝对化定位的特点,后一个position:absolute 元素永远挡在前一个position:absolute元素前面,所以为了让分类菜单挂在存档菜单上方并且能正常显示,module.php文件里面的存 档代码必须写到分类代码之前,再利用css调整相互位置关系。

module.php代码,没什么大变化,如果不是为了将分类菜单和存档菜单合并到一起,其实只需要调整 id="record"和 id="blogsort"的位置而已:

    <?php
    //widget:分类
    function widget_sort($title){
            global $CACHE;
            $sort_cache = $CACHE->readCache('sort');
            $record_cache = $CACHE->readCache('record') ?>
            <li>
            <h3><span><?php echo $title; ?></span></h3>
            <ul id="record">
            <li>▼▲请选择存档时间▼▲<br />
            <?php foreach($record_cache as $value): ?>
            <a href="<?php echo Url::record($value['date']); ?>"><?php echo $value['record']; ?>(<?php echo $value['lognum']; ?>)</a><br />
            <?php endforeach; ?>
            </li>
            </ul>
            <ul id="blogsort">
            <li>▼▲请选择日志分类▼▲<br />
            <?php foreach($sort_cache as $value): ?>
            <a href="<?php echo Url::sort($value['sid']); ?>"><?php echo $value['sortname']; ?>(<?php echo $value['lognum'] ?>)</a><br>
            <?php endforeach; ?>
            </li>
            </ul>
            </li>
    <?php }?>
css代码,使用最简单的:hover来实现鼠标动作,具体颜色和位置关系可以自行调整:

    #record {
            padding-top:36px;
            padding-bottom:20px;
    }
    #blogsort {
            margin-top:-55px;
            padding-bottom:62px;
    }
    #record li , #blogsort li {
            position:absolute;
            width:148px;
            height:20px;
            line-height:20px;
            color:#3a5909;
            background:#fdfdfd;
            padding:1px 0 0 5px;
            border:1px solid #ddd;
            overflow-y:hidden;
    }
    #record li:hover , #blogsort li:hover {
            height:auto;
            padding-bottom:7px;
    }

发表评论:

评论(0)