jquery页面滚动左侧悬浮固定菜单跟随效果代码

代码语言:html

所属分类:菜单导航

代码描述:jquery页面滚动左侧悬浮固定菜单跟随效果代码

代码标签: 左侧 悬浮 固定 菜单 跟随 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
       
*{
               
margin: 0;
               
padding: 0;
       
}
        body
{
               
background: #ddd;
       
}
        ul
{
               
list-style: none;
       
}
        a
{
               
text-decoration: none;
       
}
       
.nav{
               
background: #fff;
               
width: 100%;
               
height: 100px;
               
font-size: 20px;
               
line-height: 100px;
               
text-align: center;
               
border-bottom: 1px solid #f60;
       
}
       
.box{
               
margin: 0 auto;
               
width: 1200px;
       
}
       
.fl_l{
               
width: 200px;
               
float: left;
               
border: 1px solid #f4f4f4;
               
background: #fff;
       
}
       
.fl_l li a{
               
border-bottom: 1px solid #eee;
               
text-align: center;
               
display: block;
               
color: #333;
               
font-size: 14px;
               
line-height: 60px;
       
}
       
.fl_l li.active a{
               
background: #f60;
               
color: #fff;
       
}
       
.fl_r{
               
float: right;
               
width: 960px;
       
}
       
.fl_r li{
               
margin-bottom: 30px;
               
background: #fff;
               
font-size: 50px;
               
line-height: 300px;
               
display: block;
               
text-align: center;
       
}
       
.banner{
               
background: #fff;
               
width: 100%;
               
height: 600px;
               
font-size: 40px;
               
line-height: 600px;
               
text-align: center;
               
margin-bottom: 30px;
       
}
</style>
</head>
<body>


<.........完整代码请登录后点击上方下载按钮下载查看

网友评论0