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

a1751699386 2011-08-31 05:23:57

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

...全文

126 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

a1751699386 2011-09-03

打赏
举报

找到了分享下...
<!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>

a1751699386 2011-09-01

打赏
举报

不过也谢谢了导航效果也学到了个新的

a1751699386 2011-09-01

打赏
举报

我要不是导航是效果是整个页面头部一直都在不会跟着滚动条动只是内容上下动

BLUE_LG 2011-08-31

打赏
举报

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

其他没什么了。。

wishifef 2011-08-31

打赏
举报

可供参考：

转自：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>