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;
    }

樣式二效果