Untitled

<!DOCTYPE html>
<html>
	<head>
		<title>Kwicks Vertical Example</title>

		<link rel='stylesheet' type='text/css' href='../jquery.kwicks.css' />
		<style type='text/css'>
	.kwicks {
                width: 300px;
                height: 415px;
            }
            .kwicks > li {
                width: 300px;
                /* overridden by kwicks but good for when JavaScript is disabled */
                height: 100px;
                margin-top: 5px;
            }


            #panel-3 { background-color: #5A2971;
			background-image:url(../../../Documents/2015/web/20150730-_DSC5117purple.png);
			background-attachment:fixed;
			 }
            #panel-4 { background-color: #AA9839;
			background-image:url(../../../Documents/2015/web/20150723-_DSC5018.jpg);
			background-attachment:fixed;
			}
			#panel-5 { background-color: #28546C;
			background-image:url(../../../Documents/2015/web/20150619-_DSC4534.jpg);
			background-attachment:fixed;
			}
            #panel-6 { background-color: #323875;
			background-image:url(../../../Documents/2015/web/20150412-_DSC3136-recycled.jpg);
			background-attachment:fixed;
			}
			#panel-7 { background-color: #AA8B39;
			background-image:url(../../../Documents/2015/web/20150207-_DSC2325.jpg);
			background-attachment:fixed;
			background-position:right top;
			}
			#panel-8 { background-color: #AA7639;
			background-image:url(../../../Documents/2015/web/20150510-_DSC3266.jpg);
			background-attachment:fixed;
			}
			#panel-9 { background-color: #236A62;
			background-image:url(../../../Documents/2015/web/20150203-_DSC2182.jpg);
			background-attachment:fixed;
			background-position:right top;
			}
			#panel-10 { background-color: #3C8D2F;
			background-image:url(../../../Documents/2015/web/20150511-_DSC3312.jpg);
			background-attachment:fixed;
			}


			#cola {
			width:300px;
			float:left;
			display:inline;
			 }
			#colb {
			width:300px;
			float:left;
			display:inline;
			 }
			 #colc {
			width:300px;
			float:left;
			display:inline;
			 }
			 #cold {
			width:300px;
			float:left;
			display:inline;
			 }

		</style>
	</head>

	<body><div id="cola">
	        <ul class='kwicks kwicks-vertical'>
            <li id='panel-3'></li>
            <li id='panel-4'></li>
        </ul>
</div>
<div id="colb">
	        <ul class='kwicks kwicks-vertical'>
            <li id='panel-5'></li>
            <li id='panel-6'></li>
        </ul>
</div>
<div id="colc">
	        <ul class='kwicks kwicks-vertical'>
            <li id='panel-7'></li>
            <li id='panel-8'></li>
        </ul>
</div>
<div id="cold">
	        <ul class='kwicks kwicks-vertical'>
            <li id='panel-9'></li>
            <li id='panel-10'></li>
        </ul>
</div>

		<script src='js/jquery-1.8.1.min.js' type='text/javascript'></script>
		<script src='../jquery.kwicks.js' type='text/javascript'></script>

		<script type='text/javascript'>
	$(function() {
                $('.kwicks').kwicks({
                    maxSize : 410,
                    behavior: 'menu',
                    isVertical: true
                });
            });
		</script>
	</body>
</html>