Distintos menús con Kwicks
http://devsmash.com/projects/kwicks
Kwicks Horizontal:
Demo
Source
<!DOCTYPE html>
<html>
<head>
<title>Kwicks Horizontal Example</title>
<link rel='stylesheet' type='text/css' href='../jquery.kwicks.css' />
<style type='text/css'>
.kwicks {
width: 515px;
height: 100px;
}
.kwicks > li {
height: 100px;
/* overridden by kwicks but good for when JavaScript is disabled */
width: 125px;
margin-left: 5px;
float: left;
}
#panel-1 { background-color: #53b388; }
#panel-2 { background-color: #5a69a9; }
#panel-3 { background-color: #c26468; }
#panel-4 { background-color: #bf7cc7; }
</style>
</head>
<body>
<ul class='kwicks kwicks-horizontal'>
<li id='panel-1'></li>
<li id='panel-2'></li>
<li id='panel-3'></li>
<li id='panel-4'></li>
</ul>
<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'>
$().ready(function() {
$('.kwicks').kwicks({
maxSize : 250,
behavior: 'menu'
});
});
</script>
</body>
</html>
Kwicks Vertical:
Demo
Source
<!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: 125px;
height: 415px;
}
.kwicks > li {
width: 125px;
/* overridden by kwicks but good for when JavaScript is disabled */
height: 100px;
margin-top: 5px;
}
#panel-1 { background-color: #53b388; }
#panel-2 { background-color: #5a69a9; }
#panel-3 { background-color: #c26468; }
#panel-4 { background-color: #bf7cc7; }
</style>
</head>
<body>
<ul class='kwicks kwicks-vertical'>
<li id='panel-1'></li>
<li id='panel-2'></li>
<li id='panel-3'></li>
<li id='panel-4'></li>
</ul>
<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 : 220,
behavior: 'menu',
isVertical: true
});
});
</script>
</body>
</html>
Kwicks Custom easing:
Demo
Source
<!DOCTYPE html>
<html>
<head>
<title>Kwicks Easing Example</title>
<link rel='stylesheet' type='text/css' href='../jquery.kwicks.css' />
<style type='text/css'>
.kwicks {
width: 515px;
height: 100px;
}
.kwicks > li {
height: 100px;
/* overridden by kwicks but good for when JavaScript is disabled */
width: 125px;
margin-left: 5px;
float: left;
}
#panel-1 { background-color: #53b388; }
#panel-2 { background-color: #5a69a9; }
#panel-3 { background-color: #c26468; }
#panel-4 { background-color: #bf7cc7; }
</style>
</head>
<body>
<ul class='kwicks kwicks-horizontal'>
<li id='panel-1'></li>
<li id='panel-2'></li>
<li id='panel-3'></li>
<li id='panel-4'></li>
</ul>
<script src='js/jquery-1.8.1.min.js' type='text/javascript'></script>
<script src='js/jquery.easing.1.3.js' type='text/javascript'></script>
<script src='../jquery.kwicks.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
$('.kwicks').kwicks({
minSize : 40,
duration: 750,
behavior: 'menu',
easing: 'easeOutBounce'
});
});
</script>
</body>
</html>
Kwicks Expand Method:
Demo
Source
<!DOCTYPE html>
<html>
<head>
<title>Kwicks Expand Method Example</title>
<link rel='stylesheet' type='text/css' href='../jquery.kwicks.css' />
<style type='text/css'>
.kwicks {
width: 460px;
height: 100px;
}
.kwicks > li {
height: 100px;
/* overridden by kwicks but good for when JavaScript is disabled */
width: 150px;
margin-left: 5px;
float: left;
background-color: #333;
}
.kwicks > li.kwicks-expanded {
background-color: #777;
}
#expand-controls {
font-size: 1.2em;
margin: 20px 0;
}
</style>
</head>
<body>
<ul class='kwicks kwicks-horizontal'>
<li></li>
<li></li>
<li></li>
</ul>
<div id='expand-controls'>
<strong>Expand: </strong>
<a href='#' data-index='0'>panel 1</a>,
<a href='#' data-index='1'>panel 2</a>,
<a href='#' data-index='2'>panel 3</a>, or
<a href='#' data-index='-1'>none</a>.
</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 : 250
});
$('#expand-controls a').click(function(e) {
e.preventDefault();
var index = $(this).data('index');
$container.kwicks('expand', index);
});
});
</script>
</body>
</html>
Kwicks Panel Classes:
Demo
Source
<!DOCTYPE html>
<html>
<head>
<title>Kwicks Active/Expanded Classes Example</title>
<link rel='stylesheet' type='text/css' href='../jquery.kwicks.css' />
<style type='text/css'>
.kwicks {
width: 515px;
height: 100px;
}
.kwicks > li {
height: 100px;
background-color: #53b388;
/* overridden by kwicks but good for when JavaScript is disabled */
width: 125px;
margin-left: 5px;
float: left;
}
.kwicks > li.kwicks-collapsed { background-color: #319155; }
.kwicks > li.kwicks-expanded { background-color: #86e6bb; }
.kwicks > li.kwicks-selected { background-color: #ff7744; }
</style>
</head>
<body>
<ul id='example' class='kwicks kwicks-horizontal'>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<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 : 250,
behavior: 'menu',
deselectOnClick: true
});
});
</script>
</body>
</html>
Kwicks Anchor Markup:
Demo
Source
<!DOCTYPE html>
<html>
<head>
<title>Kwicks Div Markup Example</title>
<link rel='stylesheet' type='text/css' href='../jquery.kwicks.css' />
<style type='text/css'>
.kwicks {
width: 515px;
height: 100px;
}
.kwicks > a {
height: 100px;
/* overridden by kwicks but good for when JavaScript is disabled */
width: 125px;
margin-left: 5px;
float: left;
}
#panel-1 { background-color: #53b388; }
#panel-2 { background-color: #5a69a9; }
#panel-3 { background-color: #c26468; }
#panel-4 { background-color: #bf7cc7; }
</style>
</head>
<body>
<div class='kwicks kwicks-horizontal'>
<a href='#' id='panel-1'></a>
<a href='#' id='panel-2'></a>
<a href='#' id='panel-3'></a>
<a href='#' id='panel-4'></a>
</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 : 250,
behavior: 'menu'
});
});
</script>
</body>
</html>
No hay comentarios:
Publicar un comentario