设为首页收藏本站

职业IT人-IT人生活圈

 找回密码
 成为会员
搜索
职业IT人-IT人生活圈»IT生活 › 软件工程师 › WEB前端 › css箭头菜单
返回列表 发新帖
查看: 672|回复: 14

css箭头菜单

  [复制链接]
jinchang 发表于 2011-6-22 15:05 | 显示全部楼层 |阅读模式
最近公司要对已有的产品进行升级，希望改变一下导航菜单的展现方式。于是，在网上搜索了一下，感觉带箭头的导航菜单方式不错，于是就模仿着写了一个，其实很简单。不废话了，看代码。
Html代码  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  
<head>  
<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
<script type="text/javascript" src="jquery.js"></script>  
<title>Menu</title>  
  
  
<style type="text/css">  
ul, li {   
    list-style-type:none;   
    padding:0;   
    margin:0;   
}   
  
#menu {   
    border:1px solid #dedede;   
    height:35px;   
    background:url(bg_out.gif) repeat-x;   
}   
  
#menu li {   
    float:left;   
    line-height:35px;   
    padding-left: 10px;   
    padding-right: 15px;   
}   
  
#menu li div {   
    height: 100%;   
    width: 100%;   
}   
  
.li_out {   
    background:url(arrow_out.gif) no-repeat right center;   
}   
  
.li_over {   
    cursor:hand;   
    background:url(arrow_over.gif) no-repeat right center;   
    color:white;   
}   
  
.div_over {   
    background: url(bg_over.gif) repeat-x;   
    margin-left: -10px;   
    padding-left: 10px;   
}   
</style>  
<script type="text/javascript">  
    $(document).ready(function(){   
        $("#menu").children("li").hover(   
            function(){   
                $(this).addClass("li_over");   
                $(this).children("div").addClass("div_over");   
            },   
            function(){   
                $(this).removeClass("li_over");   
                $(this).children("div").removeClass("div_over");   
            }   
        );   
    });   
</script>  
  
</head>  
  
<body>  
  
    <ul id="menu">   
        <li class="li_out"><div>Home</div></li>   
        <li class="li_out"><div>Equipment File</div></li>   
        <li class="li_out"><div>Sparepart Account</div></li>   
        <li class="li_out"><div>Maintenance Management</div></li>   
        <li class="li_out"><div>System</div></li>   
    </ul>  
  
  
</body>  
</html>  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>Menu</title>


<style type="text/css">
ul, li {
        list-style-type:none;
        padding:0;
        margin:0;
}

#menu {
        border:1px solid #dedede;
        height:35px;
        background:url(bg_out.gif) repeat-x;
}

#menu li {
        float:left;
        line-height:35px;
        padding-left: 10px;
        padding-right: 15px;
}

#menu li div {
        height: 100%;
        width: 100%;
}

.li_out {
        background:url(arrow_out.gif) no-repeat right center;
}

.li_over {
        cursor:hand;
        background:url(arrow_over.gif) no-repeat right center;
        color:white;
}

.div_over {
        background: url(bg_over.gif) repeat-x;
        margin-left: -10px;
        padding-left: 10px;
}
</style>
<script type="text/javascript">
        $(document).ready(function(){
                $("#menu").children("li").hover(
                        function(){
                                $(this).addClass("li_over");
                                $(this).children("div").addClass("div_over");
                        },
                        function(){
                                $(this).removeClass("li_over");
                                $(this).children("div").removeClass("div_over");
                        }
                );
        });
</script>

</head>

<body>

        <ul id="menu">
                <li class="li_out"><div>Home</div></li>
                <li class="li_out"><div>Equipment File</div></li>
                <li class="li_out"><div>Sparepart Account</div></li>
                <li class="li_out"><div>Maintenance Management</div></li>
                <li class="li_out"><div>System</div></li>
        </ul>


</body>
</html>
回复

使用道具 举报

江南枫 发表于 2011-6-22 15:05 | 显示全部楼层
我找样的东西好久了！

回复 支持 反对

使用道具 举报

shmilyyu 发表于 2011-6-22 15:05 | 显示全部楼层
不错 很好的效果  谢谢分享！

回复 支持 反对

使用道具 举报

fl 发表于 2011-6-22 15:06 | 显示全部楼层
很实用，与传统别具一格

回复 支持 反对

使用道具 举报

fossil 发表于 2011-6-22 15:06 | 显示全部楼层
不知道你在没有在Opera上测试过，Opera中对padding的处理总是常出问题

回复 支持 反对

使用道具 举报

楠楠 发表于 2011-6-22 15:06 | 显示全部楼层
mouseover，一共改变三张图片，很简单的思路啊

回复 支持 反对

使用道具 举报

broken 发表于 2011-6-22 15:06 | 显示全部楼层
rainsilence 写道
mouseover，一共改变三张图片，很简单的思路啊

实现起来确实很简单，重点不是mouseover，而是padding和margin与background的组合使用。

回复 支持 反对

使用道具 举报

找不到我 发表于 2011-6-22 15:07 | 显示全部楼层
jorneyR 写道
不知道你在没有在Opera上测试过，Opera中对padding的处理总是常出问题

在Opera上测试过，确实还有一点bug。当第一次将鼠标移动到一个题目上时，没有任何效果，并且左右两侧的箭头消失了。

哎！头疼，费了半天劲没有解决！

回复 支持 反对

使用道具 举报

有烟没火 发表于 2011-6-22 15:07 | 显示全部楼层
把LZ的代码改了一下，图片也换了一下，呵呵～

确实是挺好玩的～

Java代码  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
  
<head>   
<meta http-equiv="content-type" content="text/html; charset=utf-8" />   
<script type="text/javascript" src="jquery.js"></script>   
<title>Menu</title>   
  
  
<style type="text/css">   
*{ margin:0; padding:0;}   
#menu{   
    clear:both;   
    height:1%;   
    overflow:hidden;   
    margin:50px;   
    list-style:none;   
    background:#d2d2d2;   
}   
#menu li {   
    float:left;   
    line-height:30px;   
    overflow:hidden;   
    display:inline;   
}   
#menu li a{   
    text-decoration:none;   
    float:left;   
    display:inline;   
    padding:0 5px;   
}   
#menu li a:hover{   
    background:url(bg_over.gif) repeat-x left center;   
}   
#menu li.separator{   
    width:8px;   
    height:30px;   
    padding:0;   
}   
#menu li.separator a, #menu li.separator a:hover{   
    background:url(arrow_out.gif) no-repeat right center;   
    height:30px;   
    width:8px;   
    padding:0;   
}   
#menu li.hover-before a, #menu li.hover-before a:hover{   
    background-image:url(arrow_next_over.gif);   
}   
#menu li.hover-after a, #menu li.hover-after a:hover{   
    background-image:url(arrow_over.gif);   
}   
</style>   
<script type="text/javascript">   
jQuery(function($){   
    var objMenu = $('#menu');   
    $('li', objMenu)   
        .after('<li class="separator"><a href="#">&nbsp;</a></li>')   
        .hover(function(){   
            var self = $(this);   
            $('.separator').removeClass('hover-before hover-after');   
            self.prev('.separator').addClass('hover-before');   
            self.next('.separator').addClass('hover-after');   
        },function(){   
            var self = $(this);   
            self.prev('.separator').removeClass('hover-before');   
            self.next('.separator').removeClass('hover-after');   
        });   
});   
</script>   
  
</head>   
  
<body>   
  <div>   
  <div id="menu-content">   
    <ul id="menu">   
        <li><a href="#">System</a></li>   
        <li><a href="#">Maintenance Management</a></li>   
        <li><a href="#">Sparepart Account</a></li>   
        <li><a href="#">Equipment File</a></li>   
        <li><a href="#">Home</a></li>   
    </ul>   
  </div>   
  </div>   
</body>   
</html>  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<title>Menu</title>


<style type="text/css">
*{ margin:0; padding:0;}
#menu{
    clear:both;
    height:1%;
    overflow:hidden;
    margin:50px;
    list-style:none;
    background:#d2d2d2;
}
#menu li {
        float:left;
        line-height:30px;
        overflow:hidden;
    display:inline;
}
#menu li a{
    text-decoration:none;
    float:left;
    display:inline;
    padding:0 5px;
}
#menu li a:hover{
    background:url(bg_over.gif) repeat-x left center;
}
#menu li.separator{
    width:8px;
    height:30px;
    padding:0;
}
#menu li.separator a, #menu li.separator a:hover{
    background:url(arrow_out.gif) no-repeat right center;
    height:30px;
    width:8px;
    padding:0;
}
#menu li.hover-before a, #menu li.hover-before a:hover{
    background-image:url(arrow_next_over.gif);
}
#menu li.hover-after a, #menu li.hover-after a:hover{
    background-image:url(arrow_over.gif);
}
</style>
<script type="text/javascript">
jQuery(function($){
    var objMenu = $('#menu');
    $('li', objMenu)
        .after('<li class="separator"><a href="#">&nbsp;</a></li>')
        .hover(function(){
            var self = $(this);
            $('.separator').removeClass('hover-before hover-after');
            self.prev('.separator').addClass('hover-before');
            self.next('.separator').addClass('hover-after');
        },function(){
            var self = $(this);
            self.prev('.separator').removeClass('hover-before');
            self.next('.separator').removeClass('hover-after');
        });
});
</script>

</head>

<body>
  <div>
  <div id="menu-content">
        <ul id="menu">
                <li><a href="#">System</a></li>
                <li><a href="#">Maintenance Management</a></li>
                <li><a href="#">Sparepart Account</a></li>
                <li><a href="#">Equipment File</a></li>
                <li><a href="#">Home</a></li>
        </ul>
  </div>
  </div>
</body>
</html>


大小: 529 Bytes

大小: 606 Bytes

大小: 514 Bytes

大小: 59 Bytes

大小: 59 Bytes
查看图片附件


回复 支持 反对

使用道具 举报

只学java 发表于 2011-6-22 15:07 | 显示全部楼层
仔细看下效果，通过现象看本质，问题并没有上边的那么复杂，箭头的方向是一致的，鼠标经过的样式也比较固定，背景为纯色。在现在的前提下没必要搬出大车轮子来用，无非是一些末端的遮盖，简单的css即可实现以上的需求。如下: Html代码  
<!DOCTYPE HTML>  
<html lang="en-US">  
<head>  
    <meta charset="UTF-8">  
    <title>meun</title>  
    <style type="text/css">  
        html, body, div{   
            margin: 0;   
            padding: 0;   
        }   
        .menu{   
            float: left;   
            padding: 0 20px 0 0;   
            _padding: 0 29px 0 0;   
            background: #D2D2D2;   
            font-size: 0;   
        }   
        .menu a{   
            display: inline-block;   
            height: 32px;   
            padding: 0 9px 0 0;   
            background: url(bg.png) no-repeat right 0;   
            color: #333;   
            font-size: 12px;   
            line-height: 32px;   
            text-decoration: none;   
        }   
        .menu a span{   
            display: block;   
            padding: 0 10px 0 15px;   
        }   
        .menu a:hover{   
            background: url(bg.png) no-repeat right -35px;   
            color: #FFF;   
        }   
        .menu a:hover span{   
            background: #888;   
        }   
    </style>  
</head>  
<body>  
    <div class="menu">  
        <a class="home" href="#"><span>HOME</span></a>  
        <a href="#"><span>NEWS1</span></a>  
        <a href="#"><span>NEWS2</span></a>  
        <a href="#"><span>NEWS3</span></a>  
        <a href="#"><span>NEWS4</span></a>  
        <a href="#"><span>NEWS5</span></a>  
    </div>  
</body>  
</html>  

<!DOCTYPE HTML>
<html lang="en-US">
<head>
        <meta charset="UTF-8">
        <title>meun</title>
    <style type="text/css">
        html, body, div{
            margin: 0;
            padding: 0;
        }
        .menu{
            float: left;
            padding: 0 20px 0 0;
            _padding: 0 29px 0 0;
            background: #D2D2D2;
            font-size: 0;
        }
        .menu a{
            display: inline-block;
            height: 32px;
            padding: 0 9px 0 0;
            background: url(bg.png) no-repeat right 0;
            color: #333;
            font-size: 12px;
            line-height: 32px;
            text-decoration: none;
        }
        .menu a span{
            display: block;
            padding: 0 10px 0 15px;
        }
        .menu a:hover{
            background: url(bg.png) no-repeat right -35px;
            color: #FFF;
        }
        .menu a:hover span{
            background: #888;
        }
    </style>
</head>
<body>
        <div class="menu">
        <a class="home" href="#"><span>HOME</span></a>
        <a href="#"><span>NEWS1</span></a>
        <a href="#"><span>NEWS2</span></a>
        <a href="#"><span>NEWS3</span></a>
        <a href="#"><span>NEWS4</span></a>
        <a href="#"><span>NEWS5</span></a>
    </div>
</body>
</html>


这是第一种效果的实现，第二种的效果也不难，html结构同第一种的，仅需要稍微调整下css即可了，如下：
Html代码  
<!DOCTYPE HTML>  
<html lang="en-US">  
<head>  
    <meta charset="UTF-8">  
    <title>menu</title>  
    <style type="text/css">  
        html, body, div{   
            margin: 0;   
            padding: 0;   
        }   
        .menu{   
            float: left;   
            padding: 0 20px 0 0;   
            _padding: 0 29px 0 0;   
            background: #D2D2D2;   
            font-size: 0;   
        }   
        .menu a{   
            display: inline-block;   
            height: 32px;   
            margin: 0 -9px 0 0;   
            padding: 0 9px 0 0;   
            background: url(bg.png) no-repeat right 0;   
            color: #333;   
            font-size: 12px;   
            line-height: 32px;   
            text-decoration: none;   
        }   
        .menu a span{   
            display: block;   
            padding: 0 10px 0 20px;   
        }   
        .menu a:hover{   
            background: url(bg.png) no-repeat right -35px;   
            color: #FFF;   
        }   
        .menu a:hover span{   
            background: #888 url(bg.png) no-repeat left 0;   
        }   
        .menu a.home:hover span{   
            background: #888;   
        }   
    </style>  
</head>  
<body>  
    <div class="menu">  
        <a class="home" href="#"><span>HOME</span></a>  
        <a href="#"><span>NEWS1</span></a>  
        <a href="#"><span>NEWS2</span></a>  
        <a href="#"><span>NEWS3</span></a>  
        <a href="#"><span>NEWS4</span></a>  
        <a href="#"><span>NEWS5</span></a>  
    </div>  
</body>  
</html>  

<!DOCTYPE HTML>
<html lang="en-US">
<head>
        <meta charset="UTF-8">
        <title>menu</title>
    <style type="text/css">
        html, body, div{
            margin: 0;
            padding: 0;
        }
        .menu{
            float: left;
            padding: 0 20px 0 0;
            _padding: 0 29px 0 0;
            background: #D2D2D2;
            font-size: 0;
        }
        .menu a{
            display: inline-block;
            height: 32px;
            margin: 0 -9px 0 0;
            padding: 0 9px 0 0;
            background: url(bg.png) no-repeat right 0;
            color: #333;
            font-size: 12px;
            line-height: 32px;
            text-decoration: none;
        }
        .menu a span{
            display: block;
            padding: 0 10px 0 20px;
        }
        .menu a:hover{
            background: url(bg.png) no-repeat right -35px;
            color: #FFF;
        }
        .menu a:hover span{
            background: #888 url(bg.png) no-repeat left 0;
        }
        .menu a.home:hover span{
            background: #888;
        }
    </style>
</head>
<body>
        <div class="menu">
        <a class="home" href="#"><span>HOME</span></a>
        <a href="#"><span>NEWS1</span></a>
        <a href="#"><span>NEWS2</span></a>
        <a href="#"><span>NEWS3</span></a>
        <a href="#"><span>NEWS4</span></a>
        <a href="#"><span>NEWS5</span></a>
    </div>
</body>
</html>
上传下背景图片，



大小: 310 Bytes
查看图片附件



回复 支持 反对

使用道具 举报

曾经的小孩 发表于 2011-7-20 09:52 | 显示全部楼层
挺酷,多发点
回复 支持 反对

使用道具 举报

楠楠 发表于 2011-8-17 12:21 | 显示全部楼层
我卷了~~~~~~~
回复 支持 反对

使用道具 举报

shmilyyu 发表于 2011-8-18 13:37 | 显示全部楼层
都看了，这帖子有意思。
回复 支持 反对

使用道具 举报

秋秋 发表于 2011-9-15 10:25 | 显示全部楼层
相比他连说拜拜的 想法都没了 哈哈
回复 支持 反对

使用道具 举报

ksdal 发表于 2011-9-15 10:26 | 显示全部楼层
真是有你的！
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 成为会员

本版积分规则

QQ|手机版|小黑屋|网站帮助|职业IT人-IT人生活圈 ( 粤ICP备12053935号-1 )|网站地图
本站文章版权归原发布者及原出处所有。内容为作者个人观点，并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是信息平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽造成漏登，请及时联系我们，我们将根据著作权人的要求立即更正或者删除有关内容。

GMT+8, 2024-4-19 22:26 , Processed in 0.142470 second(s), 20 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表