Sticky (Fixed) SideNav Layout with CSS

完成圖

構成的structure

HTML tag

1
2
3
4
<div class="container">
	<div id="sidenav><!--Fixed Sidenav Goes Here--></div>
	<div id="content"><!--Content Goes Here--></div>
</div>

利用簡單的技巧,
把sidenav 的加上position 和fix的properties.
position: fixed;
float: left;
CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container {
	width: 980px;
	margin: 0 auto;
	overflow: hidden;
	background: url(container_stretch.gif);
	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;
}

可惜ie6不支援fixed position property
所以要workaround..

1
2
3
4
5
*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' );
}


Building the SideNav – HTML/CSS
加入SideNav 的content。
html:

1
2
3
4
5
6
7
8
9
10
11
<a href="/"><img src="logo.gif" alt="" /></a>
	<h2 class="categories">Categories</h2>
	<ul>
        	<li><a href="#">Link</a></li>
        	<li><a href="#">Link</a></li>
        </ul>
        <h2 class="sites">Other Sites</h2>
        <ul>
        	<li><a href="#">Link</a></li>
        	<li><a href="#">Link</a></li>
	</ul>

css: level 2 的headings tag 是轉換了成為background image。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
#sidenav h2 {
	text-indent: -99999px; /*--Push the text off of the page--*/
	height: 41px;
	padding: 0; margin: 15px 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;
	background: url(sidenav_hr.gif) no-repeat right bottom; /*--thin break line underneath the navigation--*/
}
#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;
	background: url(sidenav_arrow.gif) no-repeat left center;
	text-decoration: none;
	color: #333;
}
#sidenav ul li a:hover {
	color: #999;
}

原文還提及,怎樣用jquery 都一個fix 當左面的sidenav 太大。
不過chowky 認為不太重要~~所以有興趣自己去看看吧

License: License Free
Source: http://designm.ag/tutorials/sticky-sidenav-layout/
Demo: http://www.sohtanaka.com/web-design/examples/sticky-nav/

Share
About Chowky
Chowky 希望可以透過這個blog 來分享自己學到的知識。亦希望可以分享最新的資訊。 IT 轉變得很快,要常常留意市場的變化,面對大陸的競爭,香港的 IT 方面的人才要更有市場觸覺,緊貼市塲走勢。因為其他地方的IT技術已經走得比以往更快。不進則退,就讓大家一起來交流、提昇IT的心得! Chowky 因為工作關係,所以一開始接觸的是visual basic, foxpro ( 這不代表我老 ) 之後是 .NET, MSSQL 和 Crystal Report. 由工作學到的project management, system analysis and design 以及 system testing, user acceptance tests and different documentations. 另外,由不同的freelance 方面學到dreamweaver, javascript, php, mysql. 後來興起CMS wave, Chowky 亦學會了Joomla! 以及常用的javascript framwork: jquery and mootool. 連deisgn 都要自己包辦,所以接觸了photoshop, illustrator, firework. 新的工作方面,要利用RIA -- Flex and AIR 方面的技術。所以緊接下來應該會多一點分享ria 方面的技術 Chowky 所說的未必是對的,但我深信我所說的是未來 IT Trend. 大家亦應抱著懷疑的態度去分析每一件事,未經思考不要輕易相信。

2 Comments

  1. I came across your blog, i think your blog is interesting, keep working !

  2. It’s a fantastic website, thanks a lot because of this. I would personally for you to google and yahoo for various several hours to locate the following place.
    I really despise if while I actually yahoo intended for articles or blog posts to examine I really regularly encountered incomprehensible content pieces and many spam.
    A person evidently choose treatment associated with all the unsolicited mail and conserve your blog correct along with high-quality. Will you possess any tricks for my own personal web site?

Leave a Reply