求解！！网站导航固定 内容可上下动的效果 怎么做的

像这个网站 这样的 http://www.ciads.com/

解决方案 »

  1.   

    可供参考：转自：http://topic.csdn.net/u/20110805/12/cfd661d0-e653-49e8-b68b-a306f0a6fcce.html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
     </HEAD> <head>
    <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
    <script type="text/javascript">
    $(document).ready(function(){
                    $('#navul li').mouseover(function(){
                                $(this).stop().animate({marginTop:"-25px"},200);
                            })
                    $('#navul li').mouseout(function(){
                                $(this).stop().animate({marginTop:"0px"},200);                   
                            })    
                });
    </script>
    <style>
    .nav{
        width:767px;
        height:25px;
        float:left;
        margin-left:33px;
        _margin-left:16px;
        border-top:#CCC 1px solid;
        background-color:#FFF;
        overflow:hidden;
    }.nav ul, .nav ul li{
        display:block;
        margin:0;
        padding:0;
    }.nav ul li{
        float:left;
        width:150px;
        height:50px;
        text-align:center;
        border-right:#ccc 1px solid;
        cursor:pointer;
    }.nav ul li span{
        display:block;
        width:150px;
        line-height:25px;
        height:25px;
        float:left;
    }.nav_down{
        color:#F00;
    }
    </style>
    </head><body>
        <div class="box">
            <div class="head"></div>
            <div class="nav">
                <ul id="navul">
                    <li>
                        <span>sample link1</span>
                        <span class="nav_down">sample link1</span>
                    </li>
                    <li>
                        <span>sample link2</span>
                        <span class="nav_down">sample link2</span>
                    </li>
                    <li>
                        <span>sample link3</span>
                        <span class="nav_down">sample link3</span>
                    </li>
                    <li>
                        <span>sample link4</span>
                        <span class="nav_down">sample link4</span>
                    </li>
                </ul>
            </div>
        </div>
        <div id="show"></div>
    </body></HTML>
      

  2.   

    不用jquery也行
    关键点：
    onmouseover和onmouseout事件的调用
    至于横向菜单
    css:
      ul,li{float:left;}其他没什么了。。
      

  3.   

    找到了 分享下...
    <!DOCTYPE html>
        <html>
        <head>
       <style type="text/css">
        * {
        padding:0;
        margin:0;
       }
       html, body {
        _height:100%;
       _overflow:hidden;
        }
        body {
        _overflow:auto;
        }
       #header{
       width:100%;
        _width:98%;
    _margin:0 auto;
        position:fixed;
        _position:absolute;
        background:#eee;
        left:0px;
    height:150px;

       }
       #content {
        background:#ccc;
       padding:20px;
        }
        #header {
        top:0;
       }
        #footer {
       bottom:0;
        }
        </style>
        </head>
        <body>
        <div id="header">header</div>
       <div id="content">
    <script language="javascript">
    for(i=0;i<100;i++){
        document.write(i+"<br />");
    }
    </script>
       </div>
        <div id="footer">footer</div>
        </body>
       </html>