Welcome, Old Sport!

侧栏固定式网页框架 CSS & jQuery

by ilikecss ON 2010/12/07 10684

今天,我将介绍如何创建一个侧栏固定式的网页框架的搭建。固定侧栏的网页现在运用的非常普遍,一般多用在博客上,这样比较方便读者浏览文章,提高页面点击率。另外此款框架兼容大众浏览器,包括IE6。

Step1. 创建HTML

侧栏部分:

<h2 class="categories">Categories</h2>
<ul>
    <li><a href="#">Categories name</a></li>
    <li><a href="#">Categories name</a></li>
    <li><a href="#">Categories name</a></li>
    <li><a href="#">Categories name</a></li>
</ul>
<h2 class="sites">Other Links</h2>
<ul>
    <li><a href="http://www.kakihwa.com/" target="_blank">Kaki is coming</a></li>
    <li><a href="http://www.wooshoo.cn/" target="_blank">WooShoo</a></li>
    <li><a href="http://www.josphin.com/" target="_blank">Josphin's Show</a></li>
    <li><a href="http://www.ghxuan.cn/" target="_blank">Ghxuan.cn</a></li>
    <li><a href="http://www.man-man.com.cn/" target="_blank">Man Man Web site</a></li>
</ul>

HTML内容部分:

<div id="content">
<h1 class="title_name">Fixed SideNav Layout with <span>CSS &amp; jQuery</span><small>by Sunflowa Media</small></h1>

<h2>This is the title</h2>
<p>Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents</p>

<h2>This is the title2</h2>
<p>Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents</p>

<h2>This is the title3</h2>
<p>Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents</p>

<h2>This is the title4</h2>
<p>Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents</p>

<h2>This is the title5</h2>
<p>Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents</p>

<h2>This is the title6</h2>
<p>Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents</p>

<h2>This is the title7</h2>
<p>Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents</p>

<h2>This is the title8</h2>
<p>Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents Articles contents</p>

</div>

Step2. 创建CSS


body {
background: #F0F0F0 url(../images/body_bg.jpg) repeat;
font-size: 12px;
border-top: 10px solid #1A87C8;
margin: 0;
padding: 0;
}
.container {
width: 980px;
margin: 0 auto;
overflow: hidden;
background: url(../images/container_stretch.gif) repeat-y;
font-size: 1.2em;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Keeps content to the right side--*/
width: 640px;
padding: 0 20px 20px;
}
#sidenav h2 {
padding: 0;
margin: 35px 0 5px;
background-position: 20px top; /*--Set position of each heading background--*/
}
h2.categories { background: url(h2_categories.gif) no-repeat ;} /*--Background image for "category" heading--*/
h2.sites { background: url(h2_othersites.gif) no-repeat ;} /*--Background image for "other sites" heading--*/
#sidenav ul {
margin: 0;
padding: 0 20px 30px 20px;
list-style: none;
border-
}
#sidenav ul li{
margin: 0; padding: 0;
display: inline; /*--Fixes IE6 bug of double margin--*/
}
#sidenav ul li a{
display: block;
margin: 0;
padding: 5px 0 5px 15px;
text-decoration: none;
color: #666;
}
#sidenav ul li a:hover {
color: #AAA;
}
#content h1 {
border-bottom: 5px solid #BBB;
padding: 0 0 15px 0;
margin-top: 15px;
}
#content h2 {
color: #1A87C8;
margin: 10px 0;
padding: 10px 0;
font-size: 2em;
font-weight: normal;
}
#content p {
line-height: 1.8em;
padding: 7px 0;
margin: 7px 0;
}
/* Unfortunately the fixed position property is not supported in IE6 */
*html #sidenav {
position: absolute;
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

Step3. 插入jQuery和脚本包

$(document).ready(function() {

function staticNav() {
	var sidenavHeight = $("#sidenav").height();
	var winHeight = $(window).height();
	var browserIE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false;

	if (browserIE6) {
		$("#sidenav").css({'position' : 'absolute'});
	} else {
		$("#sidenav").css({'position' : 'fixed'});
	}

	if (sidenavHeight > winHeight) {
		$("#sidenav").css({'position' : 'static'});
	}
}

staticNav();

$(window).resize(function () { //Each time the viewport is adjusted/resized, execute the function
	staticNav();
});

});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
3条评论
  1. Wow this is a great resource.. I’m enjoying it.. good article

  2. #2

    John1385说道:

    Very nice site!




TOP