直接用icon排出來的menu看起來還蠻可愛蠻好用的吧
有興趣可以到作者的網站實際體驗一下

下面是用FIREBUG節錄出來能有關的css跟html：

html：

	
HOME
	
DRAW
	
		

			
Draw 1
			
Draw 2
		
	
	
	
CHAT
	
		

			
Chat 1
			
Chat 2
			
Chat 3
			
Chat 4
		
	
	
	
PHOTO
	
		

			
Photo 1
			
Photo 2
			
Photo 3
			
Photo 4
			
Photo 5
		
	
	
	
SHOP
	
		

			
Shop 1
			
Shop 2
			
Shop 3
		
	
	
	
MONEY
	
		

			
Money 1
			
Money 2
			
Money 3
		
	
	
	
AUDIO
	
		

			
Audio 1
			
Audio 2
			
Audio 3
		
	
	
	
MAIL
	
		

			
Mail 1
			
Mail 2
			
Mail 3
			
Mail 4
		
	
	

css:

#info {
padding-bottom:100px;
}
#menu {
height:270px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0 auto;
padding:0;
position:relative;
width:270px;
}
#menu ul {
background:transparent url(trans.gif) repeat scroll 0 0;
height:140px;
left:-9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
position:absolute;
width:140px;
}
#menu li {
color:#000000;
display:block;
height:70px;
position:absolute;
text-decoration:none;
width:70px;
}
#menu li a {
color:#000000;
display:block;
height:70px;
text-decoration:none;
width:70px;
}
#menu li a b {
display:block;
font-family:arial,sans-serif;
font-size:12px;
height:25px;
left:-9999px;
position:absolute;
text-align:center;
width:58px;
}
#menu li.home {
background:transparent url(c-icons/home.gif) repeat scroll 0 0;
left:100px;
top:0;
}
#menu li.pencil {
background:transparent url(c-icons/pencil.gif) repeat scroll 0 0;
left:170px;
top:30px;
}
#menu li.chat {
background:transparent url(c-icons/chat.gif) repeat scroll 0 0;
left:200px;
top:100px;
}
#menu li.image {
background:transparent url(c-icons/image.gif) repeat scroll 0 0;
left:170px;
top:170px;
}
#menu li.shop {
background:transparent url(c-icons/shop.gif) repeat scroll 0 0;
left:100px;
top:200px;
}
#menu li.cash {
background:transparent url(c-icons/money.gif) repeat scroll 0 0;
left:30px;
top:170px;
}
#menu li.music {
background:transparent url(c-icons/sound.gif) repeat scroll 0 0;
left:0;
top:100px;
}
#menu li.mail {
background:transparent url(c-icons/mail.gif) repeat scroll 0 0;
left:30px;
top:30px;
}
#menu li a:hover {
border:0 none;
z-index:500;
}
#menu li.home a:hover ul, #menu li.home:hover ul {
left:-35px;
top:65px;
}
#menu li.pencil a:hover ul, #menu li.pencil:hover ul {
left:-105px;
top:35px;
}
#menu li.chat a:hover ul, #menu li.chat:hover ul {
left:-135px;
top:-35px;
}
#menu li.image a:hover ul, #menu li.image:hover ul {
left:-105px;
top:-105px;
}
#menu li.shop a:hover ul, #menu li.shop:hover ul {
left:-35px;
top:-135px;
}
#menu li.cash a:hover ul, #menu li.cash:hover ul {
left:35px;
top:-105px;
}
#menu li.music a:hover ul, #menu li.music:hover ul {
left:65px;
top:-35px;
}
#menu li.mail a:hover ul, #menu li.mail:hover ul {
left:30px;
top:35px;
}
#menu :hover ul li {
height:40px;
width:40px;
}
#menu :hover ul li a {
display:block;
height:40px;
position:absolute;
width:40px;
}
#menu li ul li a.p1 {
left:70px;
top:0;
}
#menu li ul li a.p2 {
left:98px;
top:30px;
}
#menu li ul li a.p3 {
left:98px;
top:70px;
}
#menu li ul li a.p4 {
left:70px;
top:100px;
}
#menu li ul li a.p5 {
left:30px;
top:100px;
}
#menu li ul li a.p6 {
left:0;
top:70px;
}
#menu li ul li a.p7 {
left:0;
top:30px;
}
#menu li ul li a.p8 {
left:30px;
top:0;
}
#menu li.home a:hover b, #menu li.home:hover b {
left:5px;
top:125px;
}
#menu li.pencil a:hover b, #menu li.pencil:hover b {
left:-65px;
top:95px;
}
#menu li.chat a:hover b, #menu li.chat:hover b {
left:-95px;
top:25px;
}
#menu li.image a:hover b, #menu li.image:hover b {
left:-65px;
top:-45px;
}
#menu li.shop a:hover b, #menu li.shop:hover b {
left:5px;
top:-75px;
}
#menu li.cash a:hover b, #menu li.cash:hover b {
left:75px;
top:-45px;
}
#menu li.music a:hover b, #menu li.music:hover b {
left:105px;
top:25px;
}
#menu li.mail a:hover b, #menu li.mail:hover b {
left:70px;
top:95px;
}
#menu li.home a:hover ul li a b, #menu li.pencil a:hover ul li a b, #menu li.chat a:hover ul li a b, #menu li.image a:hover ul li a b, #menu li.shop a:hover ul li a b, #menu li.cash a:hover ul li a b, #menu li.music a:hover ul li a b, #menu li.mail a:hover ul li a b, #menu li.home:hover ul li a b, #menu li.pencil:hover ul li a b, #menu li.chat:hover ul li a b, #menu li.image:hover ul li a b, #menu li.shop:hover ul li a b, #menu li.cash:hover ul li a b, #menu li.music:hover ul li a b, #menu li.mail:hover ul li a b {
background:#FFFFFF none repeat scroll 0 0;
left:-9999px;
}
#menu li ul li a.pencil1 {
background:transparent url(c-icons/pencil1.gif) repeat scroll 0 0;
}
#menu li ul li a.pencil2 {
background:transparent url(c-icons/pencil2.gif) repeat scroll 0 0;
}
#menu li ul li a.chat1 {
background:transparent url(c-icons/chat1.gif) repeat scroll 0 0;
}
#menu li ul li a.chat2 {
background:transparent url(c-icons/chat2.gif) repeat scroll 0 0;
}
#menu li ul li a.chat3 {
background:transparent url(c-icons/chat3.gif) repeat scroll 0 0;
}
#menu li ul li a.chat4 {
background:transparent url(c-icons/chat4.gif) repeat scroll 0 0;
}
#menu li ul li a.image1 {
background:transparent url(c-icons/image1.gif) repeat scroll 0 0;
}
#menu li ul li a.image2 {
background:transparent url(c-icons/image2.gif) repeat scroll 0 0;
}
#menu li ul li a.image3 {
background:transparent url(c-icons/image3.gif) repeat scroll 0 0;
}
#menu li ul li a.image4 {
background:transparent url(c-icons/image4.gif) repeat scroll 0 0;
}
#menu li ul li a.image5 {
background:transparent url(c-icons/image5.gif) repeat scroll 0 0;
}
#menu li ul li a.shop1 {
background:transparent url(c-icons/shop1.gif) repeat scroll 0 0;
}
#menu li ul li a.shop2 {
background:transparent url(c-icons/shop2.gif) repeat scroll 0 0;
}
#menu li ul li a.shop3 {
background:transparent url(c-icons/shop3.gif) repeat scroll 0 0;
}
#menu li ul li a.money1 {
background:transparent url(c-icons/money1.gif) repeat scroll 0 0;
}
#menu li ul li a.money2 {
background:transparent url(c-icons/money2.gif) repeat scroll 0 0;
}
#menu li ul li a.money3 {
background:transparent url(c-icons/money3.gif) repeat scroll 0 0;
}
#menu li ul li a.sound1 {
background:transparent url(c-icons/sound1.gif) repeat scroll 0 0;
}
#menu li ul li a.sound2 {
background:transparent url(c-icons/sound2.gif) repeat scroll 0 0;
}
#menu li ul li a.sound3 {
background:transparent url(c-icons/sound3.gif) repeat scroll 0 0;
}
#menu li ul li a.mail1 {
background:transparent url(c-icons/mail1.gif) repeat scroll 0 0;
}
#menu li ul li a.mail2 {
background:transparent url(c-icons/mail2.gif) repeat scroll 0 0;
}
#menu li ul li a.mail3 {
background:transparent url(c-icons/mail3.gif) repeat scroll 0 0;
}
#menu li ul li a.mail4 {
background:transparent url(c-icons/mail4.gif) repeat scroll 0 0;
}
#menu :hover ul li a.p1:hover b {
left:-30px;
top:60px;
}
#menu :hover ul li a.p2:hover b {
left:-58px;
top:30px;
}
#menu :hover ul li a.p3:hover b {
left:-58px;
top:-10px;
}
#menu :hover ul li a.p4:hover b {
left:-30px;
top:-40px;
}
#menu :hover ul li a.p5:hover b {
left:10px;
top:-40px;
}
#menu :hover ul li a.p6:hover b {
left:40px;
top:-10px;
}
#menu :hover ul li a.p7:hover b {
left:40px;
top:30px;
}
#menu :hover ul li a.p8:hover b {
left:10px;
top:60px;
}