单图片背景切换CSS菜单示例

单图片背景切换CSS菜单示例

程序员如果没有美工的帮助只能在网上找些现成的图片来用，比较费事。我闲逛时偶遇一图片做菜单背景不错，遂拿下来做了一个，效果如下：

上面是短版的，下面是长版的，根据需要取用吧。

菜单样式定义CSS代码如下：

        /*这个是窄的*/
        #menubar ul {
            margin : 0 ;
            padding : 0 ;
            list-style-type : none ;
         }
        #menubar li {
            float : left ;
            dispaly : block ;             
         }
        #menubar li a {
            width : 85px ;
            height : 25px ;
            line-height : 25px ;

            font-size : 14px ;  

            border-bottom : 1px solid #d1d1d1 ;  
            
            color : #333333 ;
            text-decoration : none ;
            text-align : center ;
            font-weight : bold ;
            background : #ffffff url(img/menus.gif) 0px -45px ;
         }

        #menubar li a:hover {
            font-size : 15px ;  
            color : #0086d2 ;
            background : #ffffff url(img/menus.gif) 0px 0px ;
                
            border-bottom : 0px solid #d1d1d1 ;  
            text-decoration : underline ;
         }
       
        /*注意下面是宽的*/
        #menubarBig ul {
            margin : 0 ;
            padding : 0 ;
            list-style-type : none ;
         }
        #menubarBig li {
            float : left ;
            dispaly : block ;             
         }
        #menubarBig li a {
            width : 116px ;
            height : 25px ;
            line-height : 25px ;

            font-size : 14px ;  

            border-bottom : 1px solid #d1d1d1 ;  
            
            color : #333333 ;
            text-decoration : none ;
            text-align : center ;
            font-weight : bold ;
            background : #ffffff url(img/menus.gif) 0px -128px ;
         }

        #menubarBig li a:hover {
            font-size : 15px ;  
            color : #0086d2 ;
            background : #ffffff url(img/menus.gif) 0px -88px ;
                
            border-bottom : 0px solid #d1d1d1 ;  
            text-decoration : underline ;
         }

切换的秘密在于图片左上角位置的变化，大家用图片处理软件打开menus.gif对照研究一下就明白了。


全体代码下载：
http://www.blogjava.net/Files/heyang/CSSMenu20090823113544.rar