【勉強メモ】framework〜ｊｓ〜

// JavaScript Document
$(document).ready(function() {
	$('ul#filter a').click(function() {
		$(this).css('outline','none');
		$('ul#filter .current').removeClass('current');
		$(this).parent().addClass('current');
		
		var filterVal = $(this).attr("class").toLowerCase().replace(' ','-');　
				
		if(filterVal == 'all') {
			$('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
		} else {
			
			$('ul#portfolio li').each(function() {
				if(!$(this).hasClass(filterVal)) {
					$(this).fadeOut('normal').addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
				}
			});
		}
		
		return false;
	});
});
|<<

*1438659779*【勉強メモ】framework〜CSS〜
>||
/* Portfolio Filter Stylesheet */
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*****Basic Definitions*****/
body { 
  color: #333; 
  font: 12px/18px Verdana, Helvetica, Arial, sans-serif;
}
p, ul, ol, dl, table {
	 margin-bottom: 18px; 
	}
ul, ol, dd {
	 margin-left: 36px; 
	}

/*****Basic Layout*****/
div#container {
	 margin: 0 auto;
	 overflow: hidden; 
	 width: 800px;
}
	
h1 {
	text-align: center;
	margin: 20px;
	font-size: 24px;
	font-family:"Times New Roman", Times, serif;
}

ul#filter { 
   float: left; 
	 font-size: 16px; 
	 list-style: none; 
	 margin-top: 30px;
	 width: 800px;
	 margin-left: 64px;
   }

ul#filter li { 
	border-right: 1px solid #dedede;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
  }
	
ul#filter li:last-child {
	 border-right: none; 
	 margin-right: 0; 
	 padding-right: 0; 
	}
	
ul#filter a {
	 color: #999;
	}
	
ul#filter li.current a, ul#filter a:hover {
	 text-decoration: underline; 
	}
	
ul#filter li.current a {
	 color: #333; 
	 font-weight: bold;
	}

ul#portfolio {
	 float: left; 
	 list-style: none;
	 margin-left: 64px; 
	 width: 672px; 
	}
	
ul#portfolio li { 
	border: 1px solid #dedede; 
	float: left; 
	margin: 0 10px 10px 0; 
	padding: 5px;
	width: 202px;
}

ul#portfolio a {
	 display: block;
	 width: 100%; 
	}
ul#portfolio img {
	 border: 1px solid #dedede;
	 display: block; 
	}