浮动置顶Menu

 

<style type="text/css">

    /**//* 
    CSS for this example only
    */
    body{
        width:100%;
        margin:0px;
        padding:0px;
        text-align:center;
        font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
        font-size:0.8em;
        background-color:#E2EBED;
    }

        
    #mainContainer{
        width:760px;
        border-left:1px solid #000;
        border-right:1px solid #000;
        background-color:#FFF;
        margin: 0 auto;

        text-align:left;
        padding-left:10px;
        padding-right:10px;
    }

    /**//* End example CSS */
    
    /**//* Docking bar CSS */
    #dockingBar{
        background-color:#f1f1ec;    /**//* Background color */
        border-bottom:2px solid #A5A397;    /**//* Bottom border of docking bar - to get the simulated 3D effect */

        
        left:0px;    
        top:0px;
        z-index:100;
        position:absolute;
        width:100%;
            
        overflow: hidden;
        text-align:left;
        
        height: 45px;    /**//* IE 5.x  - 2 pixels more than other browsers, height + border bottom*/
        height/**//* */:/**//**/43px;    /**//* Other browsers */
        height: /**//**/43px;
                
    }
    /**//* Inner DIV where the buttons are added */
    #dockingBarImageHolder{
        margin-left:5px;
        height:30px;
    
    }
    #dockingBarImageHolder img{
        cursor:pointer;
    }
    .spacer{    /**//* 3D inset spacer */
        border-top:1px solid #D8D2BD;
        border-bottom:1px solid #FFF;
        height:0px;
    }
    
    body > div#dockingBar{    /**//* Firefox rule */
        position:fixed;
    }
    /**//* Spacer  - Same height as toolbar - This element pushes the content on the page down below the toolbar */
    #dockingBarSpacer{
        height: 45px;    /**//* IE 5.x */
        height/**//* */:/**//**/43px;    /**//* Other browsers */
        height: /**//**/43px;
                
    }



    </style>
    <script type="text/javascript">
    /**//************************************************************************************************************
    (C) www.dhtmlgoodies.com, October 2005
    
    This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.    
    
    Terms of use:
    You are free to use this script as long as the copyright message is kept intact. However, you may not
    redistribute, sell or repost it without our permission.
    
    Thank you!
    
    www.dhtmlgoodies.com
    Alf Magne Kalleland
    
    ************************************************************************************************************/    
    var floatingBarDiv;
    var dockingBarDiv;    
    var dockingBarDivImages;
    var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
    var Opera = navigator.userAgent.indexOf('Opera')>=0?true:false;
    var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
    /**//*  Functions that are executed when buttons are clicked */
    function jsAction1()
    {
        alert('You clicked a button');
    }

    
    function highlightButton()
    {
        if(document.all){
            this.style.filter = 'alpha(opacity=100)';
        }else{
            this.style.opacity = 1;
        }
    }
    
    function deHighlightButton()
    {
        if(document.all){
            this.style.filter = 'alpha(opacity=70)';
        }else{
            this.style.opacity = 0.7;
        }
    }

    /**//* Buttons for the toolbar */
    var toolbarButtons = ['images/button1.gif','images/button2.gif','images/button3.gif','images/button4.gif','images/button5.gif','images/button6.gif','images/button7.gif','images/button8.gif'];
    /**//* Javascript functions for the buttons on the toolbar */
    var toolbarActions = ['jsAction1','jsAction1','jsAction1','jsAction1','jsAction1','jsAction1','jsAction1','jsAction1']

        
    function addButtons(initObj)
    {
        for(var no=0;no<toolbarButtons.length;no++){
            var button = document.createElement('IMG');
            button.style.opacity = 0.7;
            button.style.filter = 'alpha(opacity=70)';
            button.onmouseover = highlightButton;
            button.onmouseout = deHighlightButton;
            button.src = toolbarButtons[no];
            if(toolbarActions[no]){
                eval("button.onclick="+toolbarActions[no]);
            }
            initObj.appendChild(button);
        }
    }
    
    function initMenuWithDocking()
    {    
        /**//* Getting reference to the first tag on the page */
        if(!document.all || Opera)
            var firstBodyEl = document.body.getElementsByTagName('*')[0];
        else
            var firstBodyEl = document.body.childNodes[0];
            
                    
        while(firstBodyEl && !firstBodyEl.tagName){
            firstBodyEl = firstBodyEl.nextSibing;
        }    
        
        /**//* Creating spacer of the same height as the top bar */
        var dockingBarSpacer = document.createElement('DIV');
        dockingBarSpacer.id = 'dockingBarSpacer';        
        document.body.insertBefore(dockingBarSpacer,firstBodyEl);

        /**//* Creating docking bar */
        dockingBarDiv = document.createElement('DIV');
        dockingBarDiv.id = 'dockingBar';        
        document.body.appendChild(dockingBarDiv);
        
        var spacerRow = document.createElement('DIV');
        spacerRow.innerHTML = '<span></span>';
        spacerRow.style.marginTop = '5px';
        spacerRow.className = 'spacer';
        dockingBarDiv.appendChild(spacerRow);
        
        dockingBarDivImages = document.createElement('DIV');
        dockingBarDivImages.id = 'dockingBarImageHolder';
        dockingBarDiv.appendChild(dockingBarDivImages);    
        
        var spacerRow = document.createElement('DIV');
        spacerRow.innerHTML = '<span></span>';
        spacerRow.className = 'spacer';
        dockingBarDiv.appendChild(spacerRow);
                    
        addButtons(dockingBarDivImages);
        
        // General events
        if(MSIE && !Opera)window.onscroll = repositionDockingBar;
    }
    
    function repositionDockingBar()
    {
        if(MSIE && navigatorVersion<6){
            dockingBarDiv.style.top = document.body.scrollTop  + 'px';
        }else{
            dockingBarDiv.style.top = document.documentElement.scrollTop  + 'px';
        }
    }
    
    window.onload = initMenuWithDocking;
    
    </script>

置于Head：