Welcome, Old Sport!

底部和头部固定式HTML框架

by ilikecss ON 2011/09/30 20940

今天给大家献上一款最近做的框架,头部和底部都是固定式样,另外还有底部弹出的javascript效果,喜欢的朋友可以下载来玩玩。※图片都是转载,请勿用于商业。

Step1. 创建HTML

<div id="fixed-header">
    <div class="fixed-header-nav">
        <ul class="main-menu">
            <li><a href="http://ilikecss.com/index.php" target="_blank">Home</a></li>
            <li><a href="http://ilikecss.com/about/" target="_blank">About Me</a></li>
            <li><a href="http://ilikecss.com/portfolio/" target="_blank">Work</a></li>
            <li><a href="http://blog.ilikecss.com/" target="_blank">Blog</a></li>
            <li><a href="mailto:airoschou@sunflowamedia.com">Contact Us</a></li>
        </ul>
    </div>
</div>
<div id="fixed-footer">        
    <p><strong>Say Hello</strong>: Check out <a href="http://blog.ilikecss.com/" target="_blank">Sunflowa Media Blog</a>, for more tutorials! <span class="follow">And you may also <a href="http://weibo.com/sunflowamedia" target="_blank">@me</a> on sina twitter</span></p>
</div>

Step2. 创建CSS

#fixed-header .fixed-header-heading {
	width: 280px;
	float: left;
	margin-top: 7px;
	color: #878787;
	font-size: 36px;
	line-height: 36px;
	font-weight: bold;
}
#fixed-header .fixed-header-nav {
	float: right;
	overflow: hidden;
	margin-top: 17px;
}
#fixed-header .main-menu li {
	width: auto;
	margin: 0px 25px 0px 0px;
}
#fixed-header-slide {
	width: 100%;
	height: 50px;
	background: #e8e8e8;
	border-bottom: solid 1px #CCC;
	position: fixed;
	top: 0px;
	z-index: 2;
}
#fixed-header-wrap {
	width: 100%;
	height: 50px;
	position: absolute;
	bottom: 0px;
}
#fixed-header {
	width: 950px;
	height: 50px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
#fixed-footer-wrap {
	width: 100%;
	height: 50px;
	background: #e8e8e8;
	border-top: solid 1px #CCC;
	position: fixed;
	bottom: 0px;
	z-index: 3;
	overflow: visible;
}
#footer-wrap {
	position: relative;
	height: 0px;
}
#footer {
	width: 100%;
	position: absolute;
	left: 0px;
	bottom: 0px;
	background: #e8e8e8;
	border: solid 1px #CCC;
	border-top: 0px;
}
#fixed-footer {
	width: 950px;
	margin: 0 auto;
	padding-top: 15px;
}
#footer-toggle {
	display: block;
	border: solid 1px #CCC;
	border-bottom: 0px;
	width: 38px;
	height: 21px;
	position: absolute;
	top: -22px;
	right: 2%;
	background: #e8e8e8;
	/*left: 50%; margin-left: 429px;*/
}
#footer-toggle span {
	display: block;
	width: 38px;
	height: 21px;
	background: url(../images/footer-toggle.png);
	opacity: 0.7;
}
#footer-toggle span:hover {
	opacity: 1;
}
#footer-toggle.expanded span {
	background-position: bottom;
}

Step3. 插入脚本

// Category Dropdown
jQuery(function($) {
$("#toggle-cat").click(function() {
	$("#toggle-client").removeClass("active");
	$("#client-filter-panel").hide();
	$(this).toggleClass("active");
	$("#cat-filter-panel").slideToggle(250);
	return false;
});
$("#toggle-client").click(function() {
	$("#toggle-cat").removeClass("active");
	$("#cat-filter-panel").hide();
	$(this).toggleClass("active");
	$("#client-filter-panel").slideToggle(250);
	return false;
});
});
jQuery(function($) {
$('#toggling').hide();
var footerHeight = $('#footer').outerHeight(true);
$('#footer-toggle').click(function(){
	$('#toggling').animate({
		'height':'toggle'
	}, 500);
	$(this).toggleClass('expanded');
	return false;
});
});
2条评论
  1. #1

    gyrate说道:

    footer在IE6下hold不住




TOP