CSS界面菜单

简单css界面效果

<div id="navigationMenu">
        <ul id="menuList">
           <li id="active">
            <a id="current" href="file/" accesskey="F" hreflang="zh" tabindex="1">
                File
            </a>
           </li><li>
            <a href="edit/" accesskey="E" hreflang="zh" tabindex="2">
                Edit
            </a>
           </li><li>
            <a href="view/" accesskey="V" hreflang="zh" tabindex="3">
                View
            </a>
           </li><li>
            <a href="insert" accesskey="I" hreflang="zh" tabindex="4">
                Insert
            </a>
           </li><li>
            <a href="format/" accesskey="M" hreflang="zh" tabindex="5">
                Format
            </a>
           </li><li>
            <a href="table/" accesskey="A" hreflang="zh" tabindex="6">
                Table
            </a>
           </li><li>
            <a href="tools/" accesskey="T" hreflang="zh" tabindex="7">
                tools
            </a>
           </li><li>
            <a href="window/" accesskey="W" hreflang="zh" tabindex="8">
                Window
            </a>
           </li><li>
            <a href="help/" accesskey="H" hreflang="zh" tabindex="9">
                Help
            </a>
           </li> 
        </ul>
    </div>

#menuList
{
    background-color:#396;
    color:#fff;
    list-style-type:none;
    margin:0;
    padding:.3em 0;
    text-align:center;
    }
    
#menuList li
{
    display:inline;
    padding:0 .5em;
    }
    
#menuList li a
{
    background-color:Transparent;
    color:#fff;
    padding:.1em .5em;
    text-decoration:none;
    }
    
#menuList li a:hover
{
    background-color:#0c0;
    color:#fff;   
    }

效果2：

#menuList
{
    background-color:#396;
    border-top:1px solid #063;
    color:#fff;
    list-style:none outside; /*IE6 下 消除占位符*/
    margin:0;
    padding:0;
    text-align:center;
    }
    
#menuList li
{
    background-color:#000;
    bottom:.75em;
    color:#fff;
    display:inline;
    line-height:1.2em;
    margin:0 3px 0 0;
    padding:4px 0;
    position:relative;
    }
    
#menuList li a
{
    background-color:#090;
    border:1px solid #fff;
    bottom :2px;
    color:#fff;
    display:inline;
    height:1em;
    margin:0;
    padding:3px 5px;
    position:relative;
    right:2px;
    text-decoration:none;    
    }
    
#menuList li a:hover
{
    background-color:#0c0;
    bottom:1px;
    color:#fff;
    position:relative;
    right:1px;   
    }

第二个菜单效果“炫耀”了一下使用CSS 和XHTML列表可以实现的一些东西。这里的技巧是使用如下两条规则： position :relative; 和bottom: .75em; 将所有 <li>元素从基线上移。然后我们以这个<li>为基点在#menuList li a 上使用right 和bottom规则设置 <a> 元素的偏移量，以便创建阴影效果。


效果3：

#menuList
{
    background-color:#396;
    border-bottom:1px solid #063;
    border-top:1px solid #063;
    color:#fff;
    list-style-type:none;
    margin-left:0;
    padding:.3em 0;
    text-align:center;
    }

#menuList li
{
    border-top:1px solid #ccc;
    display:inline;
    margin:0;
    }
    
#menuList li a
{
    background-color:#ada;
    border-left:.5em solid #9b9;
    color:#000;
    padding :.1em .5em .1em .75em;
    text-decoration:none;
    }
    
#menuList li a:hover
{
    background-color:#0c0;
    color:#fff;
    border-color:#fff;
    }

样式四：
通过边框达到立体效果

#menuList li a
{
    background-color:#4a7;
    border:2px solid;
    border-color:#cec #464 #575 #dfd;
    color:#fff;
    padding:.1em .5em;
    text-decoration:none;
    }
    
#menuList li a:hover
{
    background-color:#396;
    color:#fff;
    border-color:#575 #dfd #cec #464;
    }

为菜单加上图片：

#menuList li a
{
    background:no-repeat 3px 4px url(../Images/save.jpg);
    background-color:#4a7;
    border:2px solid;
    border-color:#cec #464 #575 #dfd;
    color:#fff;
    padding:.1em .5em .15em 1.5em;
    text-decoration:none;
    }

通过对 

background:no-repeat 3px 4px url(../Images/save.jpg);

的设置和 <a>元素 padding调整，以便与图片相适应。


-------------------------------
如果想用图片表示导航栏的按钮而不使用CSS按钮，放上来一张图片不难，但如何在鼠标移动到上面时更换图片以便向用户表示按钮已经被按下呢？
使用JavaScript在特定的mouserevents发生时更改图片是一种老方法了，如下所示：

/* Preload the images for a faster rollover */
if (document.images) {
    /* This represents the save image when active */
    var saveImg_on = new Image();
    saveImg_on.src = 'saveImg_on.pnd';

    /* This represents the save image when inactive */
    var savImg_off = new Image();
    savImg_off.src = 'saveImg_off.png';
}

/**
* This function ,trunImageOn , is called when there is a mouseover event on the
* affected element and set the /src/ attribute to he 'on' image;
* 
* @param {String} id the id attribute for the affected image;
**/
function trunImageOn(id) {
    document.getElementById(id).src=eval(id+'_on.src');
}

/**
* This function ,trunImageOff is called when there is a mouseout event on the
* affected element and sets the /src/ attribute to the 'off' image.
*
* @param {String} id the id attribute for the affected image.
**/
function turnImageOff(id) {
    document.getElementById(id).src=eval(id+'off.src');
}

如果浏览器关闭了JavaScript，那么图片按钮将不能在鼠标状态改变时改变，图片链接将直接把用户带到目的地。
不过，通过使用CSS，仍旧可以在没有脚本能力的浏览器中改变图片。如下所示：

<div id="navigationMenu">
        <ul id="menuList">
            <li>
                <a href="save/" accesskey="S" hreflang="zh-cn" tabindex="1">
                    <div id="saveImg">  </div>
                </a>
            </li><li>
                <a href="saveall/" accesskey="A" hreflang="zh-cn" tabindex="2">
                    <div id="saveAllImg"> </div>
                </a>
            </li><li>
                <a href="cancel/" accesskey="C" hreflang="zh-cn" tabindex="3">
                    <div id="cancelImg"> </div>
                </a>
            </li>
        </ul>
    </div>

对应样式

a div#saveImg
{
    background:no-repeat url(../Images/saveImg_off.jpg);
    height:200px;
    width:50px;
    }
    
a div#saveImg:hover
{
    background:no-repeat url(../Images/saveImg_on.jpg);
    }
    
a div#saveAllImg
{
    background:no-repeat url(../Images/saveAllImg_on.jpg);
    height:20px;
    width:80px;
    }

a div#saveAllImg:hover
{
    background:no-repeat url(../Images/saveAllImg_off.jpg);
    }
    
a div#cancenlImg
{
    background:no-repeat url(../Images/cancelImg_off.jpg);
    height:20px;
    width:65px;
    }
    
a div#cancelImage:hover
{
    background:no-repeat url(../Images/cancelImg_on.jpg);
    }

----------------------------------------------------------
下拉菜单
组合使用CSS 和JavaScript可以很容易创建出下拉菜单。不过如果我们想要一个只是CSS创建的下拉菜单。之类菜单速度更快，因为它不需要分析脚本代码，它也会降低我们希望它实现的方法的级别。
创建一个较复杂的菜单：

<div id="navigationMenu">
        <ul id="topMenu">
            <li class="sbu">
                <a href="file/" accesskey="F" hreflang="zh" tabindex="1">File</a>
                <ul>
                    <li><a href="open/" hreflang="zh" tabindex="2">Open</a></li>
                    <li><a href="save/" hreflang="zh" tabindex="3">Save</a></li>
                    <li><a href="saveall/" hreflang="zh" tabindex="4">Save All</a></li>
                    <li class="sub"><a href="export/" hreflang="zh" tabindex="5">
                        <span class="rightArrow">▶</span>Export    </a>
                        <ul>
                            <li>
                                <a href="text/" hreflang="zh" tabindex="6">Export as Text</a>
                            </li>
                            <li>
                                <a href="html/" hreflang="zh" tabindex="7">Export as HTML</a>
                            </li>
                        </ul>            
                    </li>
                    <li>
                        <a href="http://www.google.com" accesskey="X" hreflang="zh" tabindex="8">Exit</a>
                    </li>
                </ul>
            </li>
            <li class="sub">
                <a href="edit/" accesskey="E" hreflang="zh" tabindex="9">Edit</a>
                <ul>
                    <li><a href="copy/" tabindex="10" >Copy</a></li>
                    <li><a href="cut/" tabindex="11">Cut</a></li>
                    <li><a href="paste" tabindex="12">Paste</a></li>
                </ul>
            </li>
            <li class="sub">
                <a href="file/" accesskey="N" hreflang="zh" tabindex="13">Find</a>
            </li>
        </ul>
    </div>

效果
这个菜单仍旧使用XHTML列表，这还不支持CSS规则的浏览器中将非常好地降级。现在，我们需要下拉菜单所需的CSS

ul#topMenu
{
    background-color:#bbb;
    border:2px solid;
    border-color:#ede #777 #888 #ddd;
    color:#000;
    font:1em Arial;
    list-style-type:none;
    padding:6px;
    text-align:left;
    }
    
ul#topMenu li
{
    display:inline;
    padding-right:1em;
    position:relative;
    }
    
    
ul#topMenu li a
{
    background-color:Transparent;
    border:1px solid #bbb;
    color:#000;
    cursor:default;
    left:0px;
    margin:1px;
    padding:2px 2px;
    position:relative;
    text-decoration:none;
    top:0px;
    z-index:1000000;
    }
    
ul#topMenu li a:hover
{
    background-color:#bbb;
    border-color:#888 #ddd #ede #777;
    color:#000;
    left:0px;
    top:0px;
    }
    
ul#topMenu li:hover > ul
{
    background-color:#bbb;
    border:2px solid;
    border-color:#ede #777 #888 #ddd;
    color:#000;
    display:block;
    left:1em;
    padding:2px;
    position:absolute;
    width:8em;
    z-index:1000001;
    }
    
ul#topMenu ul > li
{
    display:block;
    margin:0;
    padding:0;
    }
    
ul#topMenu ul > li a
{
    border:none;
    display:block;
    text-decoration:none;
    }
    
ul#topMenu ul > li a:hover
{
    background-color:#33a;
    color:#fff;
    }
    
ul#topMenu li:hover > ul li:hover : ul
{
        left:100%;
        top:0;
        z-index:1000002;
    }
    
ul#topMenu ul
{
    display:none;
    }
    
.rightArrow
{
    float:right;
    }

但是，上例不能在Internet Explorer中正常工作，因为Internet Explorer不支持能让上诉代码工做的CSS2规则。让下列菜单支持完全跨浏览器兼容而不必游说整个世界去抛弃Internet Explorer最好的解决方案是组合使用CSS 和JavaScript。

-------------------------------------

选项卡：
使用XHTML列表的CSS选项卡：

    <div id="tabMenu">
        <ul id="tabList">
            <li id="active">
                <a href="xhtml/" id="current" accesskey="H" hreflang="zh" tabindex="1">
                    XHTML
                </a>
            </li><li>
                <a href="css/" accesskey="C" hreflang="zh" tabindex="2">CSS</a>
            </li><li>
                <a href="js/" accesskey="J" hreflang="zh" tabindex="3">JavaScript</a>
            </li><li>
                <a href="dom/" accesskey="D" hreflang="zh" tabindex="4">DOM</a>
            </li><li>
                <a href="xml/" accesskey="X" hreflang="zh" tabindex="5">XML</a>
            </li>
        </ul>
    </div>

#tabList
{
    border-bottom:1px solid #787;
    font:bold 1em Arial;
    margin-left:0;
    padding:3px 0 3px 1em;
    }
    
#tabList li
{
    display:inline;
    list-style:none;
    margin:0;
    }
    
#tabList li a
{
    background-color:#bfb;
    border:1px solid #787;
    border-bottom:3px;
    padding:3px .5em;
    text-decoration:none;
    }
    
#tabList li a:link
{
    color:#484;
    }
    
#tabList li a:visited
{
    color:#676;
    }
    
#tabList li a:hover
{
    background-color:#ada;
    border-color:#272;
    color:#000;
    }
    
#tabList li a#current,#tabList li a#current:hover
{
    background:White;
    border-bottom:1px solid #fff;
    color:#000;
    cursor:default;
    }

样式二：

#tabMenu
{
    background:#7a7;
    border-top:1px solid #333;
    height:2.5em;
    padding:0;
    }
    
#tabList
{
    display:block;
    font:1em Arial;
    margin-top:-1px;
    padding:0 0 0 1em;
    }
    
#tabList li
{
    float:left;
    list-style:none;
    }
    
#tabList a
{
    background-color:#cfc;
    border:1px soid #aca;
    border-top:1px solid #333;
    color:#000;
    display:block;
    margin:0;
    padding:1px 6px;
    text-decoration:none;
    }
    
#tabList a:hover
{
    background-color:#9b9;
    border:1px solid #333;
    color:#333;
    padding:1px 6px;
    }
    
#tabList li a#current
{
    background:#fff;
    border:1px solid #333;
    border-top:1px solid #fff;
    cursor:default;
    }
    
#tabList li#active
{
    border-bottom:2px solid #777;
    border-right:2px solid #777;
    }

样式二效果