CSS Spite实现菜单标签

最新推荐文章于 2023-07-04 16:42:50 发布

小萝莉_Lolita

最新推荐文章于 2023-07-04 16:42:50 发布

阅读量522

点赞数

CC 4.0 BY-SA版权

分类专栏： DIV+CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/MDreamlove/article/details/77651067

DIV+CSS 专栏收录该内容

11 篇文章

订阅专栏

这篇博客介绍了如何利用CSS Sprites技术设计一个网页导航菜单，通过滑动门技术实现菜单项的样式变换。文章提供了相关代码示例，并展示了点击菜单时通过改变背景图索引来更新样式的效果。此外，还提到了使用JS实现点击菜单时的状态切换，确保每次点击只会有一个菜单处于激活状态。

使用CSS Spite技术来设计一个网页导航菜单，也可叫滑动门技术，因为只需将下面的图片滑动上去就可以做样式变换了

利用如下图片：
背景图
代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜单标签的Spite应用</title>
    <style type="text/css">
        #frm{
            margin:0;
            padding-top: 10px;
            padding-left: 10px;
            padding-right: 10px;
            list-style-type:none;
            float: left;
            overflow: hidden;
            background-color: #3786b0;
            border-top: none; 
        }
        #frm *{
            margin:0;
            padding:0;
            font-size: 14px;
        }
        #frm li{
            width: 100px;
            height: 32px;
            float: left;
            cursor: pointer;
            background-image: url(img/menu1.png);
            text-align: center;
            background-position: 0 -32px;
            color: #777;
        }
        #frm li span{
            margin-top: 10px;
            display: block;
        }
        #frm .l1{
            background-position: 0 0;
            color:white;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="frm">
    <li class="l1" onclick="clickhandle(this)">
        <span>首 页</span>
    </li>
    <li onclick="clickhandle(this)">
        <span>音 乐</span>
    </li>
    <li onclick="clickhandle(this)">
        <span>新 闻</span>
    </li>
    <li onclick="clickhandle(this)">
        <span>体 育</span>
    </li>
    <li onclick="clickhandle(this)">
        <span>娱 乐</span>
    </li>
</div>
<script type="text/javascript">
    var ul = document.getElementById('frm');
    var li_obj = ul.getElementsByTagName('li');
    function clickhandle(obj){
        for(var i=0;i<li_obj.length;i++){
            li_obj[i].style.backgroundPosition = '0 32px';
            li_obj[i].style.color = '';
            li_obj[i].style.fontWeight = '';
            li_obj[i].className = '';
        }
        obj.style.backgroundPosition = '0 0';
        obj.style.color = 'white';
        obj.style.className = 'bold';
    }
</script>
</body>
</html>