ドロップダウンメニュー、横スライド、ポラロイド風写真配置、フローティングブロック

jQuery

ドロップダウンメニュー

<>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ドロップダウンメニュー</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
	$('ul.menu li').hover(function(){
		$('>ul:not(:animated)',this).slideDown('fast');
	},
	function(){
		$('>ul',this).slideUp('fast');
	});
});
</script>
<style>
*{
	margin:0;
	padding:0;
	list-style-type:none;
}
html {
    overflow-y:scroll; //常にスクロールバーを表示する
    }
#container{
	margin:100px auto;
	width:537px;
}
ul.menu li{
	float:left;
	width:179px;
	height:48px;
	background:url("img/btn.png");
	position:relative;
}
/* IE7対策 */
* html ul.menu li{
	display:inline;
	zoom:1;
}
*+html ul.menu li{
	display:inline;
	zoom:1;
}
ul.menu li a{
	display:block;
	width:100%;
	height:100%;
	line-height:48px;
	text-indent:30px;
	font-weight:bold;
	color:#CFDFB5;
	text-decoration:none;
	position:relative;
}
ul.menu li a:hover{
	background:url("img/btn_over.png");
}
ul.sub{
	display:none;
}
* html ul.sub{
	zoom:1;
	position:relative;
}
*+html ul.sub{
	zoom:1;
	position:relative;
}
ul.sub li{
	float:none;
}
ul.sub li ul.sub{
	position:absolute;
	left:179px;
	top:0;
}
ul.menu{
	zoom:1;
}
ul.menu:after {
	height:0;
	visibility:hidden;
	content:".";
	display:block;
	clear:both;
}
</style>
</head>
<body>
<div id="container">
<ul class="menu">
<li><a href="#">メニューA</a>
<ul class="sub">
<li><a href="#">サブメニューA</a></li>
<li><a href="#">サブメニューA</a></li>
<li><a href="#">サブメニューA</a>
<ul class="sub">
<li><a href="#">サブメニューA2</a></li>
<li><a href="#">サブメニューA2</a></li>
<li><a href="#">サブメニューA2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">メニューB</a>
<ul class="sub">
<li><a href="#">サブメニューB</a></li>
<li><a href="#">サブメニューB</a></li>
<li><a href="#">サブメニューB</a></li>
</ul>
</li>
<li><a href="#">メニューC</a>
<ul class="sub">
<li><a href="#">サブメニューC1</a>
<ul class="sub">
<li><a href="#">サブメニューC2</a></li>
<li><a href="#">サブメニューC2</a></li>
<li><a href="#">サブメニューC2</a></li>
</ul>
</li>
<li><a href="#">サブメニューC1</a></li>
<li><a href="#">サブメニューC1</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

横スライド

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
/*表示修飾*/
* {
  font-family: 
      Verdana, Geneva, sans-serif;
  margin:0; 
  padding: 0;
}
body {
  margin: 0; 
  text-shadow:1px 1px 2px #f0f0f0;
}
h1 {
  font-size: 28px;
  margin: 15px 0 0 0;
}
.nav {
  background: #000; 
  padding: 5px 5px 5px 300px; 
}
.nav li {
  display: inline-block;
}
.nav li, .nav li a {
  color: #fff;
}
.content {
  margin: 0 0 0 30px;
}
.black {
  background: #000; 
  color: #fff;
}
.content ul {
  width: 400px; 
  margin: 0 0 0 30px;
}
.content li {
  margin: 0 0 0.6em 0;
}

/*ページ設定*/
body{
  width: 6400px; /* =ページ幅×ページ数 */
  position:absolute;
  top:0px;
  left:0px; 
  bottom:0px;
}
.page { 
  margin:0px;
  bottom:0px;
  width: 1600px; /* =ページ幅 */
  float: left;
  height: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script>
$(function() {
	function scrollTo(to) {
		$('html, body')
				.stop()
				.animate({
					scrollLeft: $(to).offset().left
				}, 500, 'linear');
	}
	$('.pager').bind('click',function(ev){
		scrollTo($(this).attr('href'));
	});
	$('html').mousewheel(function(ev, mov) {
		if ($('html, body').is(':animated')) {
			return false;
		}
		var page = document.location.hash || '#page1';
		var target = null;
		if (mov > 0) {
			target = $(page).prev('.page').attr('id');
		} else if (mov < 0) {
			target = $(page).next('.page').attr('id');
		}
		if (target) {
			scrollTo('#'+target);
			document.location.hash = '#'+target;
		}
		ev.preventDefault(); // 縦スクロールはさせない
    });
});
</script>
</head>
<body>
<div id="container">
<!-- 1ページ目 -->
<div class="page" id="page1">
<ul class="nav">
<li>Page1</li>
<li><a href="#page2" class="pager">Page2</a></li>
<li><a href="#page3" class="pager">Page3</a></li>
<li><a href="#page4" class="pager">Page4</a></li>
</ul>
<div class="content">
<h1>Page1</h1>

</div>
</div>
<!-- 2ページ目 -->
<div class="page" id="page2">
<ul class="nav">
<li><a href="#page1" class="pager">Page1</a></li>
<li>Page2</li>
<li><a href="#page3" class="pager">Page3</a></li>
<li><a href="#page4" class="pager">Page4</a></li>
</ul>
<div class="content">
<h1>Page2</h1>

</div>

</div>
<!-- 3ページ目 -->
<div class="page" id="page3">
<ul class="nav">
<li><a href="#page1" class="pager">Page1</a></li>
<li><a href="#page2" class="pager">Page2</a></li>
<li>Page3</li>
<li><a href="#page4" class="pager">Page4</a></li>
</ul>
<div class="content">
<h1>Page3</h1>

</div>
</div>
<!-- 4ページ目 -->
<div class="page" id="page4">
<ul class="nav">
<li><a href="#page1" class="pager">Page1</a></li>
<li><a href="#page2" class="pager">Page2</a></li>
<li><a href="#page3" class="pager">Page3</a></li>
<li>Page4</li>
</ul>
<div class="content">
<h1>Page4</h1>

</div>
</div>
</div>
<!-- /#container -->
</body>
</html>

フローティングリキッド(jQuery:Masonry)

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フローティングブロック</title>
<link rel="stylesheet" href="css/block.css">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.vgrid.0.1.6.min.js"></script>
<script>
$(function(){
	$(window).load(function() {
		$('ul#list').css({'visibility':"visible"}).fadeIn();

		$(function(){
			var hsort_flg = false;

			//setup
			var vg = $("#list").vgrid({
				easeing: "easeOutQuint",
				useLoadImageEvent: true,
				useFontSizeListener: true,
				time: 400,
				delay: 0,
				fadeIn: {
					time: 500,
					delay: 50
				}
			});
		});
	});
});
//]]>
</script>
</head>
<body>
<section id="container">
<section id="main" class="clearfix">
<ul id="list" class="non">
<li><a href="#"><img src="images/01.jpg" alt=""></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""></a></li>
<li id="bottom"><a href="#"><img src="images/04.jpg" alt=""></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""></a></li>
<li><a href="#"><img src="images/06.jpg" alt=""></a></li>
<li><a href="#"><img src="images/07.jpg" alt=""></a></li>
<li><a href="#"><img src="images/08.jpg" alt=""></a></li>
<li><a href="#"><img src="images/09.jpg" alt=""></a></li>
<li><a href="#"><img src="images/10.jpg" alt=""></a></li>
<li><a href="#"><img src="images/11.jpg" alt=""></a></li>
<li><a href="#"><img src="images/12.jpg" alt=""></a></li>
<li><a href="#"><img src="images/13.jpg" alt=""></a></li>
<li><a href="#"><img src="images/14.jpg" alt=""></a></li>
<li><a href="#"><img src="images/15.jpg" alt=""></a></li>
<li><a href="#"><img src="images/16.jpg" alt=""></a></li>
<li><a href="#"><img src="images/17.jpg" alt=""></a></li>
<li><a href="#"><img src="images/18.jpg" alt=""></a></li>
<li><a href="#"><img src="images/19.jpg" alt=""></a></li>
<li><a href="#"><img src="images/20.jpg" alt=""></a></li>
<li><a href="#"><img src="images/21.jpg" alt=""></a></li>
<li><a href="#"><img src="images/22.jpg" alt=""></a></li>
<li><a href="#"><img src="images/23.jpg" alt=""></a></li>
<li><a href="#"><img src="images/24.jpg" alt=""></a></li>
<li><a href="#"><img src="images/25.jpg" alt=""></a></li>
<li><a href="#"><img src="images/26.jpg" alt=""></a></li>
<li><a href="#"><img src="images/27.jpg" alt=""></a></li>
<li><a href="#"><img src="images/28.jpg" alt=""></a></li>
<li><a href="#"><img src="images/29.jpg" alt=""></a></li>
<li><a href="#"><img src="images/30.jpg" alt=""></a></li>
<li><a href="#"><img src="images/31.jpg" alt=""></a></li>
<li><a href="#"><img src="images/32.jpg" alt=""></a></li>
<li><a href="#"><img src="images/33.jpg" alt=""></a></li>
<li><a href="#"><img src="images/34.jpg" alt=""></a></li>
<li><a href="#"><img src="images/35.jpg" alt=""></a></li>
<li><a href="#"><img src="images/36.jpg" alt=""></a></li>
<li><a href="#"><img src="images/37.jpg" alt=""></a></li>
<li><a href="#"><img src="images/38.jpg" alt=""></a></li>
<li><a href="#"><img src="images/39.jpg" alt=""></a></li>
<li><a href="#"><img src="images/40.jpg" alt=""></a></li>
<li><a href="#"><img src="images/41.jpg" alt=""></a></li>
<li><a href="#"><img src="images/42.jpg" alt=""></a></li>
<li><a href="#"><img src="images/43.jpg" alt=""></a></li>
<li><a href="#"><img src="images/44.jpg" alt=""></a></li>
<li><a href="#"><img src="images/45.jpg" alt=""></a></li>
</ul>
</section>
</section>
</body>
</html>

<>

@charset "utf-8";

/* reset */
body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
object, iframe, pre, code, p, blockquote,
form, fieldset, legend,
table, th, td, caption, tbody, tfoot, thead,
article, aside, figure, footer, header,
hgroup, menu, nav, section, audio, video, canvas {
	margin: 0;
	padding: 0;
}
article, aside, figure, figcaption,footer,
h1, h2, h3, h4, h5, h6, header, hgroup, menu, nav, section {
	display: block;
}
ul {
	list-style-type: none;
}
img {
	border: none;
}

/* body */
html{
	width: 100%;
	height: 100%;
	overflow-y: scroll;
}
body{
	margin: 0;
	padding: 0;
	height:100%;
	text-align:center;
}

/* layout */
section#container{
	position:relative;
	margin:0;
	padding:0;
	height:100%;
	width:100%;
	text-align:center;
}
body > #container {
	height:auto;
	min-height: 100%;
}
* html #container {
	height:100%;
}
#main{
	position:relative;
	text-align:left;
	margin:0;
	padding:0 0 60px 0;
	width:100%;
	text-align:left;
}

ul#list{
	margin:40px 0 0 0;
}
#list li{
	float:left;
	margin:0 0 20px 20px;
	display:none;
}
#list li a{
	display:block;
	float:left;
}

#list li a:link,
#list li a:visited {
}
#list li a:hover,
#list li a:active {
	filter:alpha(opacity=70);
	opacity:0.7;
}

/* clearfix */
.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display:
	inline-block;
}

ポラロイド風写真配置

<>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ポラロイド風ギャラリー</title>
<link href="css/base.css" rel="stylesheet">
<script src="http://www.google.com/jsapi"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="polaroid">
<img src="../parallax/images/01.jpg" alt="">
<p>西洋建築物</p>
</div>
<div class="polaroid">
	<img src="../parallax/images/02.jpg" alt="">
	<p>DisneyLand Halloween 02</p>
</div>
<div class="polaroid">
	<img src="../parallax/images/03.jpg" alt="">
	<p>DisneyLand Halloween 03</p>
</div>
<div class="polaroid">
	<img src="../parallax/images/04.jpg" alt="">
	<p>DisneyLand Halloween 04</p>
</div>
<div class="polaroid">
	<img src="../parallax/images/05.jpg" alt="">
	<p>DisneyLand Halloween 05</p>
</div>
<div class="polaroid">
	<img src="img/06.jpg" alt="">
	<p>DisneyLand Halloween 06</p>
</div>
<div class="polaroid">
	<img src="img/07.jpg" alt="">
	<p>DisneyLand Halloween 07</p>
</div>
<div class="polaroid">
	<img src="img/08.jpg" alt="">
	<p>DisneyLand Halloween 08</p>
</div>
<div class="polaroid">
	<img src="img/09.jpg" alt="">
	<p>DisneyLand Halloween 09</p>
</div>
</body>
</html>

<>

body, div, img, p {
  padding:0; 
  margin:0;
}
body {
  overflow:hidden; 
  background-image:url(../img/bg.jpg);
}
.polaroid {
  width:368px; 
  height:356px; 
  background-image:url(../img/polaroid-bg.png); 
  position:absolute;
}
.polaroid img {
  width:335px; 
  height:275px; 
  margin:25px 0 0 15px;
}
.polaroid p {
  color:#2E2E2E;
  font-size:20px; 
  font-family:Georgia,serif;
    text-align:center; 
  margin-top:15px;
}