tag:blogger.com,1999:blog-77838596942096125642024-03-21T08:19:14.082-07:00Best Blogger Widgethowtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comBlogger33125tag:blogger.com,1999:blog-7783859694209612564.post-57635515152992213342013-04-21T09:38:00.003-07:002013-04-21T09:38:45.260-07:00slide menu<style type="text/css">
.cbp-spmenu {
background: #47a3da;
position: fixed;
}
.cbp-spmenu h3 {
color: #afdefa;
font-size: 1.9em;
padding: 20px;
margin: 0;
font-weight: 300;
background: #0d77b6;
}
.cbp-spmenu a {
display: block;
color: #fff;
font-size: 1.1em;
font-weight: 300;
}
.cbp-spmenu a:hover {
background: #258ecd;
}
.cbp-spmenu a:active {
background: #afdefa;
color: #47a3da;
}
/* Orientation-dependent styles for the content of the menu */
.cbp-spmenu-vertical {
width: 240px;
height: 100%;
top: 0;
z-index: 1000;
}
.cbp-spmenu-vertical a {
border-bottom: 1px solid #258ecd;
padding: 1em;
}
.cbp-spmenu-horizontal {
width: 100%;
height: 150px;
left: 0;
z-index: 1000;
overflow: hidden;
}
.cbp-spmenu-horizontal h3 {
height: 100%;
width: 20%;
float: left;
}
.cbp-spmenu-horizontal a {
float: left;
width: 20%;
padding: 0.8em;
border-left: 1px solid #258ecd;
}
/* Vertical menu that slides from the left or right */
.cbp-spmenu-left {
left: -240px;
}
.cbp-spmenu-right {
right: -240px;
}
.cbp-spmenu-left.cbp-spmenu-open {
left: 0px;
}
.cbp-spmenu-right.cbp-spmenu-open {
right: 0px;
}
/* Horizontal menu that slides from the top or bottom */
.cbp-spmenu-top {
top: -150px;
}
.cbp-spmenu-bottom {
bottom: -150px;
}
.cbp-spmenu-top.cbp-spmenu-open {
top: 0px;
}
.cbp-spmenu-bottom.cbp-spmenu-open {
bottom: 0px;
}
/* Push classes applied to the body */
.cbp-spmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.cbp-spmenu-push-toright {
left: 240px;
}
.cbp-spmenu-push-toleft {
left: -240px;
}
/* Transitions */
.cbp-spmenu,
.cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* Example media queries */
@media screen and (max-width: 55.1875em){
.cbp-spmenu-horizontal {
font-size: 75%;
height: 110px;
}
.cbp-spmenu-top {
top: -110px;
}
.cbp-spmenu-bottom {
bottom: -110px;
}
}
@media screen and (max-height: 26.375em){
.cbp-spmenu-vertical {
font-size: 90%;
width: 190px;
}
.cbp-spmenu-left,
.cbp-spmenu-push-toleft {
left: -190px;
}
.cbp-spmenu-right {
right: -190px;
}
.cbp-spmenu-push-toright {
left: 190px;
}
}
</style>
<script src="http://www.opendrive.com/files/NF8xMDU3ODUxMl9KcXVGVV8zYzBh/avdhootblogger.slidemenu.js" type="text/javascript"> </script>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<div class="container">
<div class="main">
<section>
<h2>Slide Menus</h2>
<!-- Class "cbp-spmenu-open" gets applied to menu -->
<button id="showLeft">Show/Hide Left Slide Menu</button>
<button id="showRight">Show/Hide Right Slide Menu</button>
<button id="showTop">Show/Hide Top Slide Menu</button>
<button id="showBottom">Show/Hide Bottom Slide Menu</button>
</section>
<section class="buttonset">
<h2>Push Menus</h2>
<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
<button id="showLeftPush">Show/Hide Left Push Menu</button>
<button id="showRightPush">Show/Hide Right Push Menu</button>
</section>
</div>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-27412029553185115102013-04-14T22:42:00.000-07:002013-04-20T03:19:19.902-07:00nav menu<style type="text/css">
/* Main */
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').show();
}).mouseout(function(){
$(this).children('ul').hide();
})
}
});
</script>
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-82783022817713980442013-02-28T09:56:00.002-08:002013-02-28T09:56:38.076-08:00try pe try<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function up(obj) {
$(obj).parent().insertBefore($(obj).parent().prev());
}
function down(obj) {
$(obj).parent().insertAfter($(obj).parent().next());
}
</script>
<ul>
<li id='li_11' class='li_question'>Question 1 <a onclick='up(this)' style='cursor:pointer;'>up</a><a onclick='down(this)' style='cursor:pointer;'>down</a></li>
<li id='li_12' class='li_question'>Question 2 <a onclick='up(this)' style='cursor:pointer;'>up</a><a onclick='down(this)' style='cursor:pointer;'>down</a></li>
<li id='li_13' class='li_question'>Question 3 <a onclick='up(this)' style='cursor:pointer;'>up</a><a onclick='down(this)' style='cursor:pointer;'>down</a></li>
</ul>howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-83065245076792068112013-02-28T09:34:00.001-08:002013-02-28T10:31:43.890-08:00short way2sms<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://best-blogger-widgets.blogspot.in/2013/02/short-way2sms.html#babu">babi aa gayi</a>
dekho jidhar jyada jhua he udhar ye jyada move karega...jaise neeche ki taraf jyada aling he to click karne ke baad niche jhukega aur uper se kam duri per he to uper kitaraf jhukefa ab aap jidhar bhi name ghsedoge matlab jitni duri per ghusedoge utni doori per woh travel karega yaa to per yaa neeche
The most important rule for success on SlideShare is that your presentations must be of the highest quality only – no exceptions here. This applies not only to content but also to design, so if you feel you lack the skills to create a rocking presentation, you'd better hire somebody else to do it for you, than upload presentations with poor quality.
<a name="code">
As for content, usually the most popular presentations are either something sensational, or something incredibly useful, or something that plays with readers' emotions. Still, if your presentation falls in one of these three groups, this isn't a guarantee it will become popular.
</br><p id="babu">take me to babi</p>
When you prepare your presentation, you might want to make it a bit more sensational by exaggeration. Needless to say, this is a very wrong approach and it can turn against you. Your presentations need to be honest and true - don't exaggerate, don't overhype because this will only make users distrust you.</br>
As for the form of the presentation, it is best to save it as PDF rather than .PPS because with so many devices you never know how a .PPS will look like. PDF looks always the same, so stick with it.
The most important rule for success on SlideShare is that your presentations must be of the highest quality only – no exceptions here. This applies not only to content but also to design, so if you feel you lack the skills to create a rocking presentation, you'd better hire somebody else to do it for you, than upload presentations with poor quality.
As for content, usually the most popular presentations are either something sensational, or something incredibly useful, or something that plays with readers' emotions. Still, if your presentation falls in one of these three groups, this isn't a guarantee it will become popular.
<a name="codeword">ilove you babay suck my.
</a>
When you prepare your presentation, you might want to make it a bit more sensational by exaggeration. Needless to say, this is a very wrong approach and it can turn against you. Your presentations need to be honest and true - don't exaggerate, don't overhype because this will only make users distrust you.
<a href="#codeword">Blue Words, Blue Words</a>
As for the form of the presentation, it is best to save it as PDF rather than .PPS because with so many devices you never know how a .PPS will look like. PDF looks always the same, so stick with it.
<FORM>
<INPUT TYPE="button"
VALUE="Click To Go To the Bottom Of The Page"
onClick="parent.location='#code'">
</FORM></div>howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-37084051220405686212013-02-28T06:36:00.001-08:002013-02-28T06:37:50.954-08:00scroll 5<style type="text/css">
#top{
height:500px;
background:maroon;
margin-bottom:20px;
}
#middle{
height:500px;
background:olive;
margin-bottom:20px;
}
#bottom{
height:500px;
background:teal;
margin-bottom:20px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".scroll").click(function(event){
//prevent the default action for the click event
event.preventDefault();
//get the full url - like mysitecom/index.htm#home
var full_url = this.href;
//split the url by # and get the anchor target name - home in mysitecom/index.htm#home
var parts = full_url.split("#");
var trgt = parts[1];
//get the top offset of the target anchor
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
//goto that anchor by setting the body scroll top to anchor top
$('html, body').animate({scrollTop:target_top}, 50);
});
});
</script>
<div id="top">
<h1>Thanks for coming to the top</h1>
</div><!--end top-->
<div id="middle">
</div><!--end middle-->
<div id="bottom">
</div><!--end bottom-->
<p><a href="#top" class="scroll">Go Top</a></p>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-54391735723386363112013-02-28T06:14:00.002-08:002013-02-28T06:17:17.190-08:00ads ke bus karib hi hu
for refrerence:-http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm
<h2 id="myheader"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUZuxtZQVXqX3hfzIg5xinQz2JRbICuHQU-kQM-yFlu9g0VEyAxpHKgELLZWLCs7ymHlP3drubcrAZQfHDi5AezH-mmI9LPtv1owaRw9F_DwkvaIp6D2aR4MwOKvl1EKk2-nkDQwsuvQQ/s320/hrithik-roshan.jpg" />Welcome to Dynamic Drive!</h2>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09')
//** v1.1 (April 7th, 09'):
//** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.
//** 2) Fixes scroll animation not working in Opera.
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:100, fadeduration:[500, 100]},
controlHTML: '<img src="up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
<a href="#top">Back to Top</a>howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-10838481358208123142013-02-28T05:28:00.000-08:002013-02-28T06:03:47.634-08:00scroll 4 perfect working
for refrerence:-http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm
<h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> <h2 id="myheader">Welcome to Dynamic Drive!</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br><h2>i love you</h2> </ br>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09')
//** v1.1 (April 7th, 09'):
//** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.
//** 2) Fixes scroll animation not working in Opera.
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 600, scrollduration:100, fadeduration:[500, 100]},
controlHTML: '<img src="up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
<a href="#top">Back to Top</a>howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-87397546810140616892013-02-28T05:10:00.003-08:002013-02-28T05:13:24.657-08:00scroll top<div dir="ltr" style="text-align: left;" trbidi="on">
Anchor become a really useful tool when you have to link to somewhere in a page with thousands of words, this unfortunately happen too often in corporate website.<br />
<br />
Only problem is, an anchor is just plain bad in design, when a user click on a link he pretty much think he’s gonna go to another page, but in this case, he just jump down the content,<br />
<br />
<br />
this can be really disorienting, even for power users like us, when it is not clear if a link is an anchor and not a normal link.
How to change this behavior? Well animate the scrollbar with a simple script,<br /></div>
<br />
<br />
<br />
it will slide down to your anchor target and your normal anchor will still work if JavaScript is turned off.
<style type="text/css">
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;top:70px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
*
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
*
* Version: 1.0, 12/03/2009
-----------------------*/
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
<a href="#" id="toTop">^ Scroll to Top</a>howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-78812600127591362792013-02-27T11:48:00.000-08:002013-02-27T12:07:06.314-08:00click me
<script type="text/javascript">
// When the Document Object Model is ready
jQuery(document).ready(function(){
// 'catTopPosition' is the amount of pixels #cat
// is from the top of the document
var catTopPosition = jQuery('#cat').offset().top;
// When #scroll is clicked
jQuery('#scroll').click(function(){
// Scroll down to 'catTopPosition'
jQuery('html, body').animate({scrollTop:catTopPosition}, 'slow');
// This stops the anchor link from acting like a normal anchor link
return false;
});
jQuery('#cat').parent().click(function(){
jQuery('html, body').animate({scrollTop:0}, 'slow');
return false;
})
});
</script>
<a href="#" id="scroll">Click here</a></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>
<a href="#"><img id="cat" src="images/cat.png"></a>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-51699901407723834762013-02-27T10:13:00.005-08:002013-02-27T10:42:41.205-08:00trial menu<style type="text/css">
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
margin-bottom: 0;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 2px;
border: 1px solid gray;
border-bottom: none;
background-color: white;
color: black;
}
.basictab li a:visited{
color: black;
}
.basictab li a:hover{
background-color: #dbffff;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #dbffff;
color: black;
}
.submenustyle{
padding: 2px 1px;
border: 1px solid black;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}
* html .submenustyle{ /*IE only width definition*/
width: 100%;
}
.submenustyle a{
border-right: 1px dashed black;
padding: 1px 5px;
text-decoration: none;
}
.submenustyle a:hover{
background-color: #ebffff;
}
/***********************************************
* 2 level Horizontal Tab Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
</style>
<script type="text/javascript">
var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""
function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}
function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}
function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}
function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}
function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}
</script>
<li rel="references" class="selected"><a href="#">References ▼</a></li>
<ul id="maintab" class="basictab">
<li><a href="http://www.javascriptkit.com">Home</a></li>
<li class="selected" rel="tutorials"><a href="#">Tutorials ▼</a></li>
<li rel="references"><a href="#">References ▼</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">JavaScripts</a></li>
</ul>
<div id="references" class="submenustyle">
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
<a href="http://www.javascriptkit.com/domref/">DOM Reference</a>
<a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a>
</div>
<div id="tutorials" class="submenustyle">
<a href="http://www.javascriptkit.com/javatutors/">JavaScript Tutorials</a>
<a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS Tutorials</a>
<a href="http://www.javascriptkit.com/howto/">Web Building tutorials</a>
<a href="http://www.javascriptkit.com/howto/htaccess.shtml">htaccess Tutorial</a>
</div>
<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
</script>howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-55724443335873177582013-02-25T06:02:00.003-08:002013-02-25T06:02:38.519-08:00om3<style type="text/css">
@font-face {
font-family: 'entypo';
src:url('../fonts/entypo.eot');
src:url('../fonts/entypo.eot?#iefix') format('embedded-opentype'),
url('../fonts/entypo.svg#entypo') format('svg'),
url('../fonts/entypo.woff') format('woff'),
url('../fonts/entypo.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.fc-slideshow {
position: relative;
width: 400px;
height: 400px;
box-shadow: inset 0 0 3px rgba(0,0,0,0.4), 0 0 0 10px #cc2724;
border-radius: 50%;
margin: 0 auto;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
perspective: 1200px;
}
.fc-slideshow nav {
top: 0;
height: 100%;
width: 100%;
position: absolute;
z-index: 10000;
}
.fc-slideshow nav > div {
position: absolute;
height: 100%;
top: 0;
width: 50%;
}
.fc-slideshow nav .fc-left {
left: 0;
}
.fc-slideshow nav .fc-right {
right: 0;
}
.fc-slideshow nav > div span {
height: 33%;
width: 100%;
position: absolute;
left: 0;
cursor: pointer;
}
.fc-slideshow nav > div span:first-child {
top: 0;
}
.fc-slideshow nav > div span:nth-child(2) {
top: 33%;
}
.fc-slideshow nav > div span:nth-child(3) {
top: 66%;
}
.fc-slideshow nav i,
.no-csstransforms3d .fc-slideshow nav > div span {
position: absolute;
width: 100%;
height: 40px;
top: 50%;
margin-top: -20px;
pointer-events: none;
opacity: 0;
-webkit-backface-visibility: hidden;
-webkit-transition: all 0.2s ease;
-moz-backface-visibility: hidden;
-moz-transition: all 0.2s ease;
backface-visibility: hidden;
transition: all 0.2s ease;
}
/* Some fallbacks */
.no-csstransforms3d .fc-slideshow nav > div span {
z-index: 1000;
width: 40px;
background: rgba(0,0,0,0);
}
.no-csstransforms3d .fc-slideshow nav .fc-left span {
left: -80px;
}
.no-csstransforms3d .fc-slideshow nav .fc-right span {
right: -80px;
left: auto;
}
.no-csstransforms3d .fc-slideshow nav i {
width: 40px;
cursor: pointer;
}
.fc-slideshow nav .fc-left i {
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
transform-origin: 100% 50%;
text-align: left;
}
.fc-slideshow nav .fc-right i {
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;
text-align: right;
}
.fc-slideshow nav i.icon-arrow-left {
left: 0;
}
.no-csstransforms3d .fc-slideshow nav i.icon-arrow-left {
left: -100px;
}
.fc-slideshow nav i.icon-arrow-right {
right: 0;
}
.no-csstransforms3d .fc-slideshow nav i.icon-arrow-right {
right: -60px;
}
.icon-arrow-left:before,
.icon-arrow-right:before {
font-family: 'entypo';
speak: none;
font-style: normal;
font-weight: normal;
font-size: 20px;
background: #cc2724;
color: #fff;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
display: inline-block;
margin: 0 20px;
border-radius: 20% 10% 50% 5% / 25% 10% 30% 75%;
-webkit-font-smoothing: antialiased;
}
.icon-arrow-left:before {
content: "\e002";
}
.icon-arrow-right:before {
content: "\e003";
}
.csstransforms3d .fc-slideshow nav > div span:hover ~ i,
.no-csstransforms3d .fc-slideshow nav i,
.no-csstransforms3d .fc-slideshow nav > div span {
opacity: 1;
}
.csstransforms3d .fc-slideshow nav > div span:nth-child(2):hover ~ i{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.csstransforms3d .fc-slideshow nav > .fc-left span:first-child:hover ~ i,
.csstransforms3d .fc-slideshow nav > .fc-right span:nth-child(3):hover ~ i {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.csstransforms3d .fc-slideshow nav > .fc-right span:first-child:hover ~ i,
.csstransforms3d .fc-slideshow nav > .fc-left span:nth-child(3):hover ~ i {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
ul.fc-slides {
list-style: none;
margin: 0;
padding: 0;
}
ul.fc-slides li {
display: none;
}
.no-js ul.fc-slides li {
display: block;
}
.fc-flip {
width: 100%;
height: 100%;
border-radius: 50%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.fc-flip div {
width: 100%;
height: 100%;
position: absolute;
border-radius: 50%;
top: 0;
left: 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.fc-flip .fc-back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.fc-slideshow img {
border-radius: 50%;
}
.fc-slideshow h3 {
position: absolute;
color: #fff;
top: 50%;
margin-top: 30px;
line-height: 50px;
height: 50px;
left: 80px;
right: 80px;
background: #ff514c;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
border-radius: 20% 10% 50% 5% / 25% 10% 30% 75%;
}
.fc-overlay-light,
.fc-overlay-dark {
opacity: 0;
}
.fc-overlay-light {
background: rgba(255,255,255,1);
}
.fc-overlay-dark {
background: rgba(0,0,0,1);
}
/* No JS fallback */
.no-js .fc-slideshow {
height: auto;
box-shadow: none;
}
.no-js .fc-slideshow h3 {
position: relative;
width: auto;
height: auto;
left: auto;
right: auto;
top: auto;
margin: 5px;
}
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
html { height: 100%; }
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
background: #ff514c url(../images/noise.png);
font-weight: 400;
font-size: 15px;
color: #fff;
overflow: scroll;
overflow-x: hidden;
}
a {
color: #555;
text-decoration: none;
}
.container {
width: 100%;
position: relative;
}
.main,
.container > header {
width: 90%;
max-width: 1240px;
margin: 0 auto;
position: relative;
padding: 10px 30px 50px 30px;
overflow: hidden;
}
.container > header {
padding: 30px;
}
.container > header h1 {
font-size: 34px;
line-height: 38px;
margin: 0;
float: left;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
.container > header h1 span {
display: block;
font-size: 20px;
font-weight: 400;
}
/* Header Style */
.codrops-top {
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.3);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.codrops-top a {
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover {
background: rgba(255,255,255,0.8);
color: #000;
}
.codrops-top span.right {
float: right;
}
.codrops-top span.right a {
float: left;
display: block;
}
/* Demo Buttons Style */
.codrops-demos {
float: right;
padding-top: 10px;
}
.codrops-demos a {
display: inline-block;
margin: 10px;
color: #fff;
font-weight: 700;
line-height: 30px;
border-bottom: 4px solid transparent;
}
.codrops-demos a:hover {
color: #000;
border-color: #000;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover {
color: #ddd;
border-color: #ddd;
}
.support-note {
clear: both;
}
.support-note span{
color: #ac375d;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
</style>
<script type="text/javascript">
/**
* jquery.flipshow.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2013, Codrops
* http://www.codrops.com
*/
;( function( $, window, undefined ) {
'use strict';
// ======================= imagesLoaded Plugin ===============================
// https://github.com/desandro/imagesloaded
// $('#my-container').imagesLoaded(myFunction)
// execute a callback when all images have loaded.
// needed because .load() doesn't work on cached images
// callback function gets image collection as argument
// this is the container
// original: mit license. paul irish. 2010.
// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
// blank image data-uri bypasses webkit log warning (thx doug jones)
// blank image data-uri bypasses webkit log warning (thx doug jones)
var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
$.fn.imagesLoaded = function( callback ) {
var $this = this,
deferred = $.isFunction($.Deferred) ? $.Deferred() : 0,
hasNotify = $.isFunction(deferred.notify),
$images = $this.find('img').add( $this.filter('img') ),
loaded = [],
proper = [],
broken = [];
// Register deferred callbacks
if ($.isPlainObject(callback)) {
$.each(callback, function (key, value) {
if (key === 'callback') {
callback = value;
} else if (deferred) {
deferred[key](value);
}
});
}
function doneLoading() {
var $proper = $(proper),
$broken = $(broken);
if ( deferred ) {
if ( broken.length ) {
deferred.reject( $images, $proper, $broken );
} else {
deferred.resolve( $images );
}
}
if ( $.isFunction( callback ) ) {
callback.call( $this, $images, $proper, $broken );
}
}
function imgLoadedHandler( event ) {
imgLoaded( event.target, event.type === 'error' );
}
function imgLoaded( img, isBroken ) {
// don't proceed if BLANK image, or image is already loaded
if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) {
return;
}
// store element in loaded images array
loaded.push( img );
// keep track of broken and properly loaded images
if ( isBroken ) {
broken.push( img );
} else {
proper.push( img );
}
// cache image and its state for future calls
$.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } );
// trigger deferred progress method if present
if ( hasNotify ) {
deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] );
}
// call doneLoading and clean listeners if all images are loaded
if ( $images.length === loaded.length ) {
setTimeout( doneLoading );
$images.unbind( '.imagesLoaded', imgLoadedHandler );
}
}
// if no images, trigger immediately
if ( !$images.length ) {
doneLoading();
} else {
$images.bind( 'load.imagesLoaded error.imagesLoaded', imgLoadedHandler )
.each( function( i, el ) {
var src = el.src;
// find out if this image has been already checked for status
// if it was, and src has not changed, call imgLoaded on it
var cached = $.data( el, 'imagesLoaded' );
if ( cached && cached.src === src ) {
imgLoaded( el, cached.isBroken );
return;
}
// if complete is true and browser supports natural sizes, try
// to check for image status manually
if ( el.complete && el.naturalWidth !== undefined ) {
imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 );
return;
}
// cached images don't fire load sometimes, so we reset src, but only when
// dealing with IE, or image is complete (loaded) and failed manual check
// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
if ( el.readyState || el.complete ) {
el.src = BLANK;
el.src = src;
}
});
}
return deferred ? deferred.promise( $this ) : $this;
};
// global
var Modernizr = window.Modernizr;
$.Flipshow = function( options, element ) {
this.$el = $( element );
this._init( options );
};
// the options
$.Flipshow.defaults = {
// default transition speed (ms)
speed : 700,
// default transition easing
easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};
$.Flipshow.prototype = {
_init : function( options ) {
// options
this.options = $.extend( true, {}, $.Flipshow.defaults, options );
// support for CSS Transitions & 3D transforms
this.support = Modernizr.csstransitions && Modernizr.csstransforms3d;
// transition end event name and transform name
var transProperties = {
'WebkitTransition' : { transitionEndEvent : 'webkitTransitionEnd', transformName : '-webkit-transform' },
'MozTransition' : { transitionEndEvent : 'transitionend', transformName : '-moz-transform' },
'OTransition' : { transitionEndEvent : 'oTransitionEnd', transformName : '-o-transform' },
'msTransition' : { transitionEndEvent : 'MSTransitionEnd', transformName : '-ms-transform' },
'transition' : { transitionEndEvent : 'transitionend', transformName : 'transform' }
};
if( this.support ) {
this.transEndEventName = transProperties[ Modernizr.prefixed( 'transition' ) ].transitionEndEvent + '.flipshow';
this.transformName = transProperties[ Modernizr.prefixed( 'transition' ) ].transformName;
}
this.transitionProperties = this.transformName + ' ' + this.options.speed + 'ms ' + this.options.easing;
// the list of items
this.$listItems = this.$el.children( 'ul.fc-slides' );
// the items
this.$items = this.$listItems.children( 'li' ).hide();
// total number of items
this.itemsCount = this.$items.length;
// current item´s index
this.current = 0;
this.$listItems.imagesLoaded( $.proxy( function() {
// show first item
this.$items.eq( this.current ).show();
// add navigation and flipping structure
if( this.itemsCount > 0 ) {
this._addNav();
if( this.support ) {
this._layout();
}
}
}, this ) );
},
_addNav : function() {
var self = this,
$navLeft = $( '<div class="fc-left"><span></span><span></span><span></span><i class="icon-arrow-left"></i></div>' ),
$navRight = $( '<div class="fc-right"><span></span><span></span><span></span><i class="icon-arrow-right"></i></div>' );
$( '<nav></nav>' ).append( $navLeft, $navRight ).appendTo( this.$el );
$navLeft.find( 'span' ).on( 'click.flipshow touchstart.flipshow', function() {
self._navigate( $( this ), 'left' );
} );
$navRight.find( 'span' ).on( 'click.flipshow touchstart.flipshow', function() {
self._navigate( $( this ), 'right' );
} );
},
_layout : function( $current, $next ) {
this.$flipFront = $( '<div class="fc-front"><div></div></div>' );
this.$frontContent = this.$flipFront.children( 'div:first' );
this.$flipBack = $( '<div class="fc-back"><div></div></div>' );
this.$backContent = this.$flipBack.children( 'div:first' );
this.$flipEl = $( '<div class="fc-flip"></div>' ).append( this.$flipFront, this.$flipBack ).hide().appendTo( this.$el );
},
_navigate : function( $nav, dir ) {
if( this.isAnimating && this.support ) {
return false;
}
this.isAnimating = true;
var $currentItem = this.$items.eq( this.current ).hide();
if( dir === 'right' ) {
this.current < this.itemsCount - 1 ? ++this.current : this.current = 0;
}
else if( dir === 'left' ) {
this.current > 0 ? --this.current : this.current = this.itemsCount - 1;
}
var $nextItem = this.$items.eq( this.current );
if( this.support ) {
this._flip( $currentItem, $nextItem, dir, $nav.index() );
}
else {
$nextItem.show();
}
},
_flip : function( $currentItem, $nextItem, dir, angle ) {
var transformProperties = '',
// overlays
$overlayLight = $( '<div class="fc-overlay-light"></div>' ),
$overlayDark = $( '<div class="fc-overlay-dark"></div>' );
this.$flipEl.css( 'transition', this.transitionProperties );
this.$flipFront.find( 'div.fc-overlay-light, div.fc-overlay-dark' ).remove();
this.$flipBack.find( 'div.fc-overlay-light, div.fc-overlay-dark' ).remove();
if( dir === 'right' ) {
this.$flipFront.append( $overlayLight );
this.$flipBack.append( $overlayDark );
$overlayDark.css( 'opacity', 1 );
}
else if( dir === 'left' ) {
this.$flipFront.append( $overlayDark );
this.$flipBack.append( $overlayLight );
$overlayLight.css( 'opacity', 1 );
}
var overlayStyle = { transition : 'opacity ' + ( this.options.speed / 1.3 ) + 'ms' };
$overlayLight.css( overlayStyle );
$overlayDark.css( overlayStyle );
switch( angle ) {
case 0 :
transformProperties = dir === 'left' ? 'rotate3d(-1,1,0,-179deg) rotate3d(-1,1,0,-1deg)' : 'rotate3d(1,1,0,180deg)';
break;
case 1 :
transformProperties = dir === 'left' ? 'rotate3d(0,1,0,-179deg) rotate3d(0,1,0,-1deg)' : 'rotate3d(0,1,0,180deg)';
break;
case 2 :
transformProperties = dir === 'left' ? 'rotate3d(1,1,0,-179deg) rotate3d(1,1,0,-1deg)' : 'rotate3d(-1,1,0,179deg) rotate3d(-1,1,0,1deg)';
break;
}
this.$flipBack.css( 'transform', transformProperties );
this.$frontContent.empty().html( $currentItem.html() );
this.$backContent.empty().html( $nextItem.html() );
this.$flipEl.show();
var self = this;
setTimeout( function() {
self.$flipEl.css( 'transform', transformProperties );
$overlayLight.css( 'opacity', dir === 'right' ? 1 : 0 );
$overlayDark.css( 'opacity', dir === 'right' ? 0 : 1 );
self.$flipEl.on( self.transEndEventName, function( event ) {
if( event.target.className === 'fc-overlay-light' || event.target.className === 'fc-overlay-dark' ) return;
self._ontransitionend( $nextItem );
} );
}, 25 );
},
_ontransitionend : function( $nextItem ) {
$nextItem.show();
this.$flipEl.off( this.transEndEventName ).css( {
transition : 'none',
transform : 'none'
} ).hide();
this.isAnimating = false;
}
};
var logError = function( message ) {
if ( window.console ) {
window.console.error( message );
}
};
$.fn.flipshow = function( options ) {
if ( typeof options === 'string' ) {
var args = Array.prototype.slice.call( arguments, 1 );
this.each(function() {
var instance = $.data( this, 'flipshow' );
if ( !instance ) {
logError( "cannot call methods on flipshow prior to initialization; " +
"attempted to call method '" + options + "'" );
return;
}
if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
logError( "no such method '" + options + "' for flipshow instance" );
return;
}
instance[ options ].apply( instance, args );
});
}
else {
this.each(function() {
var instance = $.data( this, 'flipshow' );
if ( instance ) {
instance._init();
}
else {
instance = $.data( this, 'flipshow', new $.Flipshow( options, this ) );
}
});
}
return this;
};
} )( jQuery, window );
</script>
<script type="text/javascript">
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
* Build: http://modernizr.com/download/#-csstransforms3d-csstransitions-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-load
*/
;window.Modernizr=function(a,b,c){function z(a){j.cssText=a}function A(a,b){return z(m.join(a+";")+(b||""))}function B(a,b){return typeof a===b}function C(a,b){return!!~(""+a).indexOf(b)}function D(a,b){for(var d in a){var e=a[d];if(!C(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function E(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:B(f,"function")?f.bind(d||b):f}return!1}function F(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+o.join(d+" ")+d).split(" ");return B(b,"string")||B(b,"undefined")?D(e,b):(e=(a+" "+p.join(d+" ")+d).split(" "),E(e,b,c))}var d="2.6.2",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k,l={}.toString,m=" -webkit- -moz- -o- -ms- ".split(" "),n="Webkit Moz O ms",o=n.split(" "),p=n.toLowerCase().split(" "),q={},r={},s={},t=[],u=t.slice,v,w=function(a,c,d,e){var f,i,j,k,l=b.createElement("div"),m=b.body,n=m||b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),l.appendChild(j);return f=["­",'<style id="s',h,'">',a,"</style>"].join(""),l.id=h,(m?l:n).innerHTML+=f,n.appendChild(l),m||(n.style.background="",n.style.overflow="hidden",k=g.style.overflow,g.style.overflow="hidden",g.appendChild(n)),i=c(l,a),m?l.parentNode.removeChild(l):(n.parentNode.removeChild(n),g.style.overflow=k),!!i},x={}.hasOwnProperty,y;!B(x,"undefined")&&!B(x.call,"undefined")?y=function(a,b){return x.call(a,b)}:y=function(a,b){return b in a&&B(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=u.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(u.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(u.call(arguments)))};return e}),q.csstransforms3d=function(){var a=!!F("perspective");return a&&"webkitPerspective"in g.style&&w("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},q.csstransitions=function(){return F("transition")};for(var G in q)y(q,G)&&(v=G.toLowerCase(),e[v]=q[G](),t.push((e[v]?"":"no-")+v));return e.addTest=function(a,b){if(typeof a=="object")for(var d in a)y(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,typeof f!="undefined"&&f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},z(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e<g;e++)d.createElement(f[e]);return d}function p(a,b){b.cache||(b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag()),a.createElement=function(c){return r.shivMethods?n(c,a,b):b.createElem(c)},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/\w+/g,function(a){return b.createElem(a),b.frag.createElement(a),'c("'+a+'")'})+");return n}")(r,b.frag)}function q(a){a||(a=b);var c=m(a);return r.shivCSS&&!f&&!c.hasCSS&&(c.hasCSS=!!k(a,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}mark{background:#FF0;color:#000}")),j||p(a,c),a}var c=a.html5||{},d=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,f,g="_html5shiv",h=0,i={},j;(function(){try{var a=b.createElement("a");a.innerHTML="<xyz></xyz>",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=m,e._domPrefixes=p,e._cssomPrefixes=o,e.testProp=function(a){return D([a])},e.testAllProps=F,e.testStyles=w,e.prefixed=function(a,b,c){return b?F(a,b,c):F(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+t.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};
</script>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Tutorials/ExpandingOverlayEffect/"><strong>« Previous Demo: </strong>Expanding Overlay Effect</a>
<span class="right"><a href="http://cargocollective.com/isaac317">Illustrations by Isaac Montemayor</a><a href="http://tympanus.net/codrops/?p=13951"><strong>Back to the Codrops Article</strong></a></span>
</div><!--/ Codrops top bar -->
<header class="clearfix">
<h1>Flipping Circle Slideshow <span>Click and navigate</span></h1>
</header>
<div class="main">
<div id="fc-slideshow" class="fc-slideshow">
<ul class="fc-slides">
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdDA_DJw5cIviX_oKEVWHlyUfX4JdE4bjotqpwXVRaRp7lwowQ6hPaC9lLHlGBEDBz_KMPADfeLRqnSTOozrvjvk6KvD3OyfmW53RVPW1gR-G5WNK_moYR1MNCyJt5XpTtm4I9-XIEBsc/s1600/1.jpg" /><h3>Hot</h3></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIHi9XJdjzcOBNheRNk3urABz2d0YAPvDsuesQnvkLaNr_qnXXQMca_nrDUrGFDHRlLkta5NLtjH3qr2NkcWp5ebBavXowDEHcLxsECXKkanFh27yziS0NdNEh1_7okrxMPJqTh7LZfc/s1600/2.jpg" /><h3>Cold</h3></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIHi9XJdjzcOBNheRNk3urABz2d0YAPvDsuesQnvkLaNr_qnXXQMca_nrDUrGFDHRlLkta5NLtjH3qr2NkcWp5ebBavXowDEHcLxsECXKkanFh27yziS0NdNEh1_7okrxMPJqTh7LZfc/s1600/2.jpg" /><h3>Light</h3></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIHi9XJdjzcOBNheRNk3urABz2d0YAPvDsuesQnvkLaNr_qnXXQMca_nrDUrGFDHRlLkta5NLtjH3qr2NkcWp5ebBavXowDEHcLxsECXKkanFh27yziS0NdNEh1_7okrxMPJqTh7LZfc/s1600/2.jpg" /><h3>Dark</h3></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIHi9XJdjzcOBNheRNk3urABz2d0YAPvDsuesQnvkLaNr_qnXXQMca_nrDUrGFDHRlLkta5NLtjH3qr2NkcWp5ebBavXowDEHcLxsECXKkanFh27yziS0NdNEh1_7okrxMPJqTh7LZfc/s1600/2.jpg" /><h3>Soft</h3></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIHi9XJdjzcOBNheRNk3urABz2d0YAPvDsuesQnvkLaNr_qnXXQMca_nrDUrGFDHRlLkta5NLtjH3qr2NkcWp5ebBavXowDEHcLxsECXKkanFh27yziS0NdNEh1_7okrxMPJqTh7LZfc/s1600/2.jpg" /><h3>Hard</h3></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIHi9XJdjzcOBNheRNk3urABz2d0YAPvDsuesQnvkLaNr_qnXXQMca_nrDUrGFDHRlLkta5NLtjH3qr2NkcWp5ebBavXowDEHcLxsECXKkanFh27yziS0NdNEh1_7okrxMPJqTh7LZfc/s1600/2.jpg" /><h3>Smooth</h3></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSIHi9XJdjzcOBNheRNk3urABz2d0YAPvDsuesQnvkLaNr_qnXXQMca_nrDUrGFDHRlLkta5NLtjH3qr2NkcWp5ebBavXowDEHcLxsECXKkanFh27yziS0NdNEh1_7okrxMPJqTh7LZfc/s1600/2.jpg" /><h3>Rough</h3></li>
</ul>
</div>
</div>
</div><!-- /container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery.flipshow.js"></script>
<script>
$( function() {
$( '#fc-slideshow' ).flipshow();
} );
</script>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-26126000877097749502013-02-25T05:35:00.000-08:002013-02-25T05:36:02.985-08:00om 2<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#colorNav > ul{
width: 450px; /* Increase when adding more menu items */
margin:0 auto;
}
#colorNav > ul > li{ /* will style only the top level li */
list-style: none;
box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
display: inline-block;
line-height: 1;
margin: 1px;
border-radius: 3px;
position:relative;
}
#colorNav > ul > li > a{
color:inherit;
text-decoration:none !important;
font-size:24px;
padding: 25px;
}
#colorNav li ul{
position:absolute;
list-style:none;
text-align:center;
width:180px;
left:50%;
margin-left:-90px;
top:70px;
font:bold 12px 'Open Sans Condensed', sans-serif;
/* This is important for the show/hide CSS animation */
max-height:0px;
overflow:hidden;
-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;
}
#colorNav li ul li{
background-color:#313131;
}
#colorNav li ul li a{
padding:12px;
color:#fff !important;
text-decoration:none !important;
display:block;
}
#colorNav li ul li:nth-child(odd){ /* zebra stripes */
background-color:#363636;
}
#colorNav li ul li:hover{
background-color:#444;
}
#colorNav li ul li:first-child{
border-radius:3px 3px 0 0;
margin-top:25px;
position:relative;
}
#colorNav li ul li:first-child:before{ /* the pointer tip */
content:'';
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:#313131;
left:50%;
top:-10px;
margin-left:-5px;
}
#colorNav li ul li:last-child{
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
/* This will trigger the CSS */
/* transition animation on hover */
#colorNav li:hover ul{
max-height:200px; /* Increase when adding more dropdown items */
}
/*----------------------------
Color Themes
-----------------------------*/
#colorNav li.green{
/* This is the color of the menu item */
background-color:#00c08b;
/* This is the color of the icon */
color:#127a5d;
}
#colorNav li.red{ background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{ background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{ background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{ background-color:#df6dc2;color:#9f3c85;}
</style>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<nav id="colorNav">
<ul>
<li class="green">
<a href="#" class="icon-home"></a>
<ul>
<li><a href="http://tutorialzine.com/2012/10/css3-dropdown-menu/">Back to the tutorial</a></li>
<li><a href="http://tutorialzine.com/2012/10/css3-dropdown-menu/#comments">Get help</a></li>
<li><a href="http://tutorialzine.com/2012/10/css3-dropdown-menu/">Download this example</a></li>
</ul>
</li>
<li class="red">
<a href="#" class="icon-cogs"></a>
<ul>
<li><a href="#">Payment</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Privacy options</a></li>
<li><a href="#">Account Settings</a></li>
</ul>
</li>
<li class="blue">
<a href="#" class="icon-twitter"></a>
<ul>
<li><a href="http://twitter.com/Tutorialzine">Follow us on Twitter</a></li>
<li><a href="http://www.facebook.com/Tutorialzine">Find us on Facebook</a></li>
</ul>
</li>
<li class="yellow">
<a href="#" class="icon-beaker"></a>
<ul>
<li><a href="http://tutorialzine.com/tag/php/">PHP tutorials</a></li>
<li><a href="http://tutorialzine.com/tag/jquery/">jQuery techniques</a></li>
<li><a href="http://tutorialzine.com/tag/css/">CSS articles</a></li>
<li><a href="http://tutorialzine.com/category/tutorials/">Everything else</a></li>
</ul>
</li>
<li class="purple">
<a href="#" class="icon-envelope"></a>
<ul>
<li><a href="http://tutorialzine.com/contact/">Contact us</a></li>
</ul>
</li>
</ul>
</nav>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-14705558906876191632013-02-23T11:41:00.001-08:002013-02-23T11:54:52.563-08:00ok<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
.sb_wrapper{
margin:0;
padding:0;
position: absolute;
top:80px;
left:40px;
width:372px;
}
.sb_wrapper input[type="text"],
ul.sb_dropdown{
border:1px solid #fff;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#fafafa));
background: -moz-linear-gradient(top, #f2f2f2, #fafafa);
font-size:24px;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
-box-shadow:1px 1px 3px #555;
outline:none;
padding:6px 5px 6px 20px;
text-shadow:1px 1px 1px #fff;
width:295px;
float:left;
margin:3px 0px;
}
ul.sb_dropdown{
float:left;
list-style:none;
width:360px;
padding:6px 5px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}
ul.sb_dropdown li{
font-size:16px;
line-height:32px;
height:32px;
float:left;
width:50%;
}
ul.sb_dropdown li input[type="checkbox"]{
float:left;
margin:10px 4px 0 5px;
}
ul.sb_dropdown li.sb_filter{
width:348px;
border:1px solid #f9f9f9;
clear:both;
background: #ddd;
font-size:12px;
text-transform:uppercase;
letter-spacing:1px;
color:#444;
height:16px;
line-height:16px;
padding:5px;
-moz-box-shadow:0px 0px 2px #777;
-webkit-box-shadow:0px 0px 3px #555 inset;
-box-shadow:0px 0px 3px #555 inset;
}
span.sb_up,
span.sb_down{
position:absolute;
top:3px;
left:0px;
width:14px;
height:41px;
background-color:#f2f2f2;
background-position:center center;
background-repeat: no-repeat;
z-index:10;
border:1px solid #fff;
-moz-box-shadow:1px 0px 1px #ddd;
-webkit-box-shadow:1px 0px 1px #ddd;
-box-shadow:1px 0px 1px #ddd;
}
span.sb_up{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfJpVKMJgpqGGCUnUG5vQRBVCgecb5X6SqtdRHiXi-1cV7cb6sgr9kQLXABxBhUkUu8aR3ZfaB1amphTM2vCVxiOKNO013xa1ep-ATEUzLCeAJimch-6Qlm91x1FOd93fTkPx9u4oXNCI/s1600/up.png);
}
span.sb_down{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXMLXBN6IwXhyphenhyphenMdjHfx0Tr7PepmckIJ9JBbmpTiDi8g229OmoLV9k0ZCgS0ebkz0BS4P3uElTmG80oK_XDXYZBMaE0DnoWEL-jd6Mk5ZlUVJCgS792BqWOv6zohyphenhyphen-P2nR4F8fQnAXWxEo/s1600/down.png);
}
input.sb_search{
background:#f2f2f2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKPi50fM6CK3eTzrpA-UTslWjTRdYSacrBVBl20VHQvhylprwbN5dYuHBADh54wBhEbWvYFRuQt50uIDfwDIzuZCve2wg0oXnTWpHhUSaoacW75cRAHOAWZyplhrSIjn6-xBSJaKNGvbU/s1600/search.png) no-repeat center center;
height:43px;
width:50px;
float:left;
border:none;
margin:3px 0px;
border:1px solid #fff;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
-box-shadow:1px 1px 3px #555;
outline:none;
cursor:pointer;
}
input.sb_search:hover{
background-color:#fff;
}
.box{
margin:0px auto 0 auto;
height:480px;
width:540px;
position:relative;
-moz-box-shadow:0px 0px 5px #444;
-webkit-box-shadow:0px 0px 5px #444;
box-shadow:0px 0px 5px #444;
background:#1783BF url(click.png) no-repeat 380px 80px;
}
.box h2{
background-color:#1275AD;
border-color:#0E5A85 #0E5A85 #0E5A85;
border-style:ridge ridge solid;
border-width:1px;
color:#FFFFFF;
font-size:22px;
padding:10px;
text-shadow:1px 1px 1px #000000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
/**
* the element
*/
var $ui = $('#ui_element');
/**
* on focus and on click display the dropdown,
* and change the arrow image
*/
$ui.find('.sb_input').bind('focus click',function(){
$ui.find('.sb_down')
.addClass('sb_up')
.removeClass('sb_down')
.andSelf()
.find('.sb_dropdown')
.show();
});
/**
* on mouse leave hide the dropdown,
* and change the arrow image
*/
$ui.bind('mouseleave',function(){
$ui.find('.sb_up')
.addClass('sb_down')
.removeClass('sb_up')
.andSelf()
.find('.sb_dropdown')
.hide();
});
/**
* selecting all checkboxes
*/
$ui.find('.sb_dropdown').find('label[for="all"]').prev().bind('click',function(){
$(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
});
});
</script>
<br />
<div class="content">
<h1>
UI Elements</h1>
<div class="box">
<h2>
Search Box with Filter Demo</h2>
<form class="sb_wrapper" id="ui_element">
<span class="sb_down"></span>
<input class="sb_input" type="text" />
<input class="sb_search" type="submit" value="" />
<br />
<ul class="sb_dropdown" style="display: none;">
<li class="sb_filter">Filter your search</li>
<li><input type="checkbox" /><label for="all"><b>All Categories</b></label></li>
<li><input type="checkbox" /><label for="Automotive">Automotive</label></li>
<li><input type="checkbox" /><label for="Baby">Baby</label></li>
<li><input type="checkbox" /><label for="Beauty">Beautys</label></li>
<li><input type="checkbox" /><label for="Books">Books</label></li>
<li><input type="checkbox" /><label for="Cell">Cell Phones & Service</label></li>
<li><input type="checkbox" /><label for="Cloth">Clothing & Accessories</label></li>
<li><input type="checkbox" /><label for="Electronics">Electronics</label></li>
<li><input type="checkbox" /><label for="Gourmet">Gourmet Food</label></li>
<li><input type="checkbox" /><label for="Health">Health & Personal Care</label></li>
<li><input type="checkbox" /><label for="Home">Home & Garden</label></li>
<li><input type="checkbox" /><label for="Industrial">Industrial & Scientific</label></li>
<li><input type="checkbox" /><label for="Jewelry">Jewelry</label></li>
<li><input type="checkbox" /><label for="Magazines">Magazines</label></li>
</ul>
</form>
</div>
</div>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-6972461686412392342013-02-23T06:32:00.000-08:002013-02-23T07:10:22.648-08:00furzi
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCt0B_wdTpIHDw8VbvoNdepCDlVTAH6HM4ITSAx-vcokNXiJ2nBVqHUi1bZFyBWFwtteYgzMs6BKa5YABG-vqjt8undfYLkDZdSiHWaNlNaVb-gLQexrRvYHBtx-WNCNd5ylyjcBIiIgk/s1600/bgbutton.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCt0B_wdTpIHDw8VbvoNdepCDlVTAH6HM4ITSAx-vcokNXiJ2nBVqHUi1bZFyBWFwtteYgzMs6BKa5YABG-vqjt8undfYLkDZdSiHWaNlNaVb-gLQexrRvYHBtx-WNCNd5ylyjcBIiIgk/s320/bgbutton.png" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFZX6VvoeKq2nGPampDKqOjEM1aNk08tJ6DJyt7bSW91AFPt0OqOEX-R68d2CfbCgzo_sJzbOmG329f7rLH-IFcSzLJRsgWVbUQy_mnwW2pcQBJY_HAm04VhZkrfS9_J-3S55T3ibsWyY/s1600/1.jpg" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFZX6VvoeKq2nGPampDKqOjEM1aNk08tJ6DJyt7bSW91AFPt0OqOEX-R68d2CfbCgzo_sJzbOmG329f7rLH-IFcSzLJRsgWVbUQy_mnwW2pcQBJY_HAm04VhZkrfS9_J-3S55T3ibsWyY/s320/1.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRMGPEd6rDu4_Dh6IaAvfq5hRzrF1IUub6tOaBbkco2c4mCUyM5J6osckcBAS2n7pz9_ueH31OtcFjMDWJ-cnUg2g-0rg94r_wGeFDxqRX9sFa6NJS4WYLfVC7vI3RdOaMLukylUb14d4/s1600/shuffle.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRMGPEd6rDu4_Dh6IaAvfq5hRzrF1IUub6tOaBbkco2c4mCUyM5J6osckcBAS2n7pz9_ueH31OtcFjMDWJ-cnUg2g-0rg94r_wGeFDxqRX9sFa6NJS4WYLfVC7vI3RdOaMLukylUb14d4/s320/shuffle.png" /></a>
<style type="text/css">
.rp_list {
font-family:Verdana, Helvetica, sans-serif;
position:fixed;
right:-220px;
top:40px;
margin:0;
padding:0;
}
span.rp_shuffle{
background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRMGPEd6rDu4_Dh6IaAvfq5hRzrF1IUub6tOaBbkco2c4mCUyM5J6osckcBAS2n7pz9_ueH31OtcFjMDWJ-cnUg2g-0rg94r_wGeFDxqRX9sFa6NJS4WYLfVC7vI3RdOaMLukylUb14d4/s1600/shuffle.png) no-repeat 10px 50%;
width:28px;
height:14px;
display:block;
margin:10px 0px 0px 20px;
cursor:pointer;
padding:4px;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul{
margin:0;
padding:0;
list-style:none;
}
.rp_list ul li{
width: 240px;
margin-bottom:5px;
display:none;
}
.rp_list ul li div{
display: block;
line-height:15px;
width: 240px;
height: 80px;
background:#333;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul li div img{
width:70px;
border:none;
float:left;
margin:4px 10px 0px 4px;
border:1px solid #111;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
}
span.rp_title{
font-size:11px;
color:#ddd;
height:46px;
margin:4px 0px 0px 20px;
display:block;
text-shadow:1px 1px 1px #000;
padding-top:3px;
background:#222;
-moz-box-shadow:0px 0px 5px #000 inset;
-webkit-box-shadow:0px 0px 5px #000 inset;
box-shadow:0px 0px 5px #000 inset;
}
span.rp_links{
width:195px;
height:8px;
padding-top:2px;
display:block;
margin-left:42px;
}
span.rp_links a{
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCt0B_wdTpIHDw8VbvoNdepCDlVTAH6HM4ITSAx-vcokNXiJ2nBVqHUi1bZFyBWFwtteYgzMs6BKa5YABG-vqjt8undfYLkDZdSiHWaNlNaVb-gLQexrRvYHBtx-WNCNd5ylyjcBIiIgk/s1600/bgbutton.png) repeat-x;
padding: 2px 18px;
font-size:10px;
color: #fff;
text-decoration: none;
line-height: 1;
-moz-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;
box-shadow:0 1px 3px #000;
text-shadow: 0 -1px 1px #222;
cursor: pointer;
outline:none;
}
span.rp_links a:hover{
background-color:#000;
color:#fff;
}
</style>
<script src="https://www.opendrive.com/files/NF83MDg2MTgzX0JyZ1JDXzA0NzY/relatedposts.js" type="text/javascript"></script>
<style>
body{
background:#BFE2FF;
font-family:Arial;
}
h1{
position:relative;
text-indent:-9000px;
width:633px;
height:150px;
margin:20px;
background:transparent url(title.png) no-repeat top left;
}
.content{
margin:0 auto;
}
a.back{
background:transparent url(back.png) no-repeat top left;
height:13px;
width:248px;
display:block;
clear:both;
text-indent:-9000px;
margin:20px auto;
position:absolute;
bottom:10px;
left:50%;
margin-left:-124px;
}
a.back:hover{
background-position:0px -13px;
}
div.shuffle{
position:fixed;
top:476px;
right:19px;
width:200px;
height:50px;
background:transparent url(shuffle.png) no-repeat top left;
}
div.hover{
position:fixed;
top:68px;
right:90px;
width:253px;
height:65px;
background:transparent url(hover.png) no-repeat top left;
}
</style>
</head>
<body>
<div class="content">
<h1>Realted Posts Slide Out Boxes with jQuery and CSS3</h1>
<a href="http://tympanus.net/codrops/2010/07/21/related-posts-slide-out-boxes/" class="back">Back to the Codrops Tutorial</a>
<div class="shuffle"></div>
<div class="hover"></div>
</div>
<div id="rp_list" class="rp_list">
<ul>
<li>
<div>
<img src="images/1.jpg" alt=""/>
<span class="rp_title">Beautiful Background Image Navigation</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/05/beautiful-background-image-navigation-with-jquery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/BeautifulBackgroundImageNavigation.zip">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/2.jpg" alt=""/>
<span class="rp_title">Awesome Bubble Navigation with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/BubbleNavigation/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/3.jpg" alt=""/>
<span class="rp_title">Stunning Circular Motion Effect with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/CircularPortfolio/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/4.jpg" alt=""/>
<span class="rp_title">Fresh Set of CSS-only Menus</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/01/31/fresh-set-of-css-only-menus/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/CSSonlyMenus/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/5.jpg" alt=""/>
<span class="rp_title">Fresh Sliding Thumbnails Gallery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/FreshSlidingThumbnailsGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/6.jpg" alt=""/>
<span class="rp_title">A jQuery Heat Map</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/02/08/a-jquery-heat-map/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/jQueryHeatMap/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/7.jpg" alt=""/>
<span class="rp_title">jTextTranslate: A jQuery Translation Plugin</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2009/11/30/jtexttranslate-a-jquery-translation-plugin/">Article</a>
<a target="_blank" href="http://tympanus.net/jTextTranslate/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/8.jpg" alt=""/>
<span class="rp_title">Awesome Mobile Image Gallery Web App</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/27/awesome-mobile-image-gallery-web-app/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/WonderwallMobileGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/13.jpg" alt=""/>
<span class="rp_title">Awesome CSS3 & jQuery Slide Out Button</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/02/08/awesome-css3-jquery-slide-out-button/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/SlideOutButton/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/14.jpg" alt=""/>
<span class="rp_title">Beautiful Slide Out Navigation</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/FixedNavigationTutorial/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/9.jpg" alt=""/>
<span class="rp_title">Neat Photo Hover Effect with CSS Sprites and jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/02/22/neat-photo-hover-effect-with-css-sprites-and-jquery/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Development/PhotoEffect/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/10.jpg" alt=""/>
<span class="rp_title">Beautiful Photo Stack Gallery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/PhotoStack/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/11.jpg" alt=""/>
<span class="rp_title">Pimp Your Tables with CSS3</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/CSS3Tables/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/12.jpg" alt=""/>
<span class="rp_title">Scrolling to the Top and Bottom with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/01/03/scrolling-to-the-top-and-bottom-with-jquery/">Article</a>
<a target="_blank" href="http://www.tympanus.net/scrollupdown/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/15.jpg" alt=""/>
<span class="rp_title">Awesome Cufonized Fly-out Menu</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/CufonizedFlyOutMenu/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/16.jpg" alt=""/>
<span class="rp_title">Minimalistic Slideshow Gallery with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/MinimalisticSlideshowGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/17.jpg" alt=""/>
<span class="rp_title">Interactive Photo Desk with jQuery and CSS3</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/">Article</a>
<a target="_blank" href="http://tympanus.net/Development/PhotoDesk/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/18.jpg" alt=""/>
<span class="rp_title">Sliding Panel Photo Wall Gallery with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/19.jpg" alt=""/>
<span class="rp_title">Slide Down Box Menu with jQuery and CSS3</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/SlideDownBoxMenu/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="images/20.jpg" alt=""/>
<span class="rp_title">Multimedia Gallery for Images, Video and Audio</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/06/24/multimedia-gallery/">Article</a>
<a target="_blank" href="http://tympanus.net/Development/MultiMediaGallery/">Demo</a>
</span>
</div>
</li>
</ul>
<span id="rp_shuffle" class="rp_shuffle">
</span>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function() {
/**
* the list of posts
*/
var $list = $('#rp_list ul');
/**
* number of related posts
*/
var elems_cnt = $list.children().length;
/**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200);
function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
var loaded = 0;
//show 5 random posts from all the ones in the list.
//Make sure not to repeat
while(loaded < 5){
var r = Math.floor(Math.random()*elems_cnt);
var $elem = $list.find('li:nth-child('+ (r+1) +')');
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//animate them
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}
/**
* hovering over the list elements makes them slide out
*/
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});
/**
* when clicking the shuffle button,
* show 5 random posts
*/
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);
function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});
</script>howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-60960924929346384042013-02-23T06:23:00.003-08:002013-02-23T06:27:38.497-08:00slide out box<style type="text/css">
#slidebox{
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:3px solid #E28409;
position:fixed;
bottom:0px;
right:-430px;
-moz-box-shadow:-2px 0px 5px #aaa;
-webkit-box-shadow:-2px 0px 5px #aaa;
box-shadow:-2px 0px 5px #aaa;
}
#slidebox p, a.more{
font-size:11px;
text-transform:uppercase;
font-family: Arial,Helvetica,sans-serif;
letter-spacing:1px;
color:#555;
}
a.more{
cursor:pointer;
color:#E28409;
}
a.more:hover{
text-decoration:underline;
}
#slidebox h2{
color:#E28409;
font-size:18px;
margin:10px 20px 10px 0px;
}
a.close{
background:transparent url(../images/close.gif) no-repeat top left;
width:13px;
height:13px;
position:absolute;
cursor:pointer;
top:10px;
right:10px;
}
a.close:hover{
background-position:0px -13px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(window).scroll(function(){
var distanceTop = $('#last').offset().top - $(window).height();
if ($(window).scrollTop() > distanceTop)
$('#slidebox').animate({'right':'0px'},300);
else
$('#slidebox').stop(true).animate({'right':'-430px'},100);
});
$('#slidebox .close').bind('click',function(){
$(this).parent().remove();
});
});
</script>
<p id="last">
Some paragraph text.The other day I was reading an article in the NYTimes and I really liked the box that slides out from the right when you are reading the last part of the article. It shows another article from the same category and I thought that it might be something interesting for any blog or website.
The idea is to have an element in the page (here it is in the last paragraph) that triggers the box to appear. You could, for example, use this to show a related article or to explain a certain term you are using in your post.
Ok, let’s start!We give the box a fixed position, so that it follows the user while he is scrolling. The initial right value will make the box be hidden; we will make it slide out with some jQuery.
The box will have a nice CSS3 box shadow, and no, that will not work in IE browsers (except IE9, probably).
Check out this entry on CSS3.info if you want to see how to create a shadow
</p>
<div id="slidebox">
<a class="close"></a>
<p>More in Technology & Science (4 of 23 articles)</p>
<h2>The Social Impact of Scientific Research and new Technologies</h2>
<a class="more">Read More »</a>
</div>howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-55680643241740293182013-02-23T03:15:00.000-08:002013-02-23T03:15:12.739-08:00Fashion Style<style type="text/css">
#menu12 ul {
list-style:none;
font-family: 'palatino linotype',palatino;
font-size: 30px;
letter-spacing: -1px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
border:5px solid #ccc;
}
#menu12 ul li{
float:left;
}
#menu12 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#ddd;
width:170px;
text-align:center;
border:4px double #ddd;
}
#menu12 ul li a span{
display:block;
}
#menu12 ul li a span.title{
color:#fff;
padding-bottom:5px;
border-bottom:1px solid #fff;
}
#menu12 ul li a:hover{
background-color:#fff;
border:4px double #ddd;
}
#menu12 ul li a:hover span.title{
color:#333;
border-bottom:1px solid #ddd;
text-transform:uppercase;
}
#menu12 ul li a span.text{
color:#999;
font-size:12px;
letter-spacing:0px;
visibility:hidden
}
#menu12 ul li a:hover span.text{
visibility:visible;
}
</style>
<h2>Menu 12</h2>
<div id="menu12">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-63371937635145204922013-02-23T03:12:00.003-08:002013-02-23T03:13:07.681-08:00etadi<style type="text/css">
#menu10 ul {
list-style:none;
font-family: Georgia, serif;
font-size: 40px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
border:3px solid #5F3B2F;
}
#menu10 ul li{
float:left;
}
#menu10 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#955542;
width:170px;
text-align:center;
}
#menu10 ul li a span{
display:block;
}
#menu10 ul li a span.title{
color:#fff;
padding-bottom:5px;
}
#menu10 ul li a:hover{
}
#menu10 ul li a:hover span.title{
font-family: Georgia, serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 2em;
color:#fff;
border:1px dashed #fff;
padding-bottom:3px;
background-color:#AF6C57;
}
#menu10 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 1.4em;
color:#fff;
background-color:#5F3B2F;
visibility:hidden;
border-bottom:1px groove #AF6C57;
}
#menu10 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible;
}
</style>
<h2>Menu 10</h2>
<div id="menu10">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-71260347126234333222013-02-23T03:10:00.001-08:002013-02-23T03:10:16.473-08:00Blue White<style type="text/css">
#menu9 ul {
list-style:none;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 40px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
}
#menu9 ul li{
float:left;
}
#menu9 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#00adef;
width:170px;
text-align:center;
}
#menu9 ul li a span{
display:block;
}
#menu9 ul li a span.title{
color:#fff;
border-bottom:2px solid #fff;
padding-bottom:5px;
}
#menu9 ul li a:hover{
}
#menu9 ul li a:hover span.title{
color:#074a64;
border-bottom:2px solid #0b6f95;
}
#menu9 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 1.4em;
color:#fff;
background-color:#074a64;
visibility:hidden;
}
#menu9 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible;
}
</style>
<h2>Menu 9</h2>
<div id="menu9">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-2643071721751285092013-02-22T20:39:00.002-08:002013-02-22T20:39:35.230-08:00White Pink<style type="text/css">
#menu8 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
letter-spacing: -2px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
border:5px solid #fff;
}
#menu8 ul li{
float:left;
}
#menu8 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#fff;
width:170px;
border-left:6px solid #888;
}
#menu8 ul li a span{
display:block;
}
#menu8 ul li a span.title{
color:#888;
}
#menu8 ul li a:hover{
border-left:6px solid #000;
}
#menu8 ul li a:hover span.title{
color:#df246f;
}
#menu8 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
visibility:hidden;
color:#df246f;
text-align:right;
border-top:5px solid #000;
}
#menu8 ul li a:hover span.text{
visibility:visible;
}
</style>
<h2>Menu 8</h2>
<div id="menu8">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-16287037529285734092013-02-22T20:34:00.000-08:002013-02-22T20:34:47.808-08:00black<style type="text/css">
#menu7 ul {
list-style:none;
font-family: Cambria, serif;
font-size: 40px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.1em;
float:left;
clear:both;
margin:20px;
border-top:2px dotted #555;
}
#menu7 ul li{
float:left;
}
#menu7 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#888;
background-color:#000;
width:170px;
}
#menu7 ul li a span{
display:block;
}
#menu7 ul li a span.title{
border-bottom:2px dotted #888;
}
#menu7 ul li a:hover{
background-color:#fff;
}
#menu7 ul li a:hover span.title{
color:#000;
border-bottom:2px dotted #555;
}
#menu7 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
background-color:#666;
visibility:hidden;
color:#fff;
text-align:right;
}
#menu7 ul li a:hover span.text{
visibility:visible;
}
</style>
<h2>Menu 7</h2>
<div id="menu7">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-28675672184682420762013-02-22T20:30:00.000-08:002013-02-22T20:35:03.142-08:00yellow<style type="text/css">
#menu6 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.1em;
float:left;
clear:both;
margin:20px;
border:4px groove #ffe430;
}
#menu6 ul li{
float:left;
}
#menu6 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#fff;
background-color:#ffc730;
width:170px;
}
#menu6 ul li a span{
display:block;
}
#menu6 ul li a span.title{
border-bottom:2px solid #ffc730;
}
#menu6 ul li a:hover{
background-color:#fff;
}
#menu6 ul li a:hover span.title{
color:#ffc730;
border-bottom:2px solid #ffe430;
}
#menu6 ul li a span.text{
padding:0px 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
background-color:#ffc730;
visibility:hidden;
color:#fff;
}
#menu6 ul li a:hover span.text{
visibility:visible;
}
</style>
<h2>Menu 6</h2>
<div id="menu6">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-18100341394762180112013-02-22T20:28:00.000-08:002013-02-22T20:35:17.751-08:00vintage<style type="text/css">
#menu5 ul {
list-style:none;
font-family: Georgia, serif;
font-size: 44px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
border:4px double #ccc;
}
#menu5 ul li{
float:left;
}
#menu5 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#555;
background-color:#fff;
width:170px;
}
#menu5 ul li a span{
display:block;
}
#menu5 ul li a span.title{
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
#menu5 ul li a:hover span.title{
color:#ccc;
}
#menu5 ul li a span.text{
padding:0px 5px;
font-family: Georgia, serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.7em;
color:#444;
visibility:hidden;
}
#menu5 ul li a:hover span.text{
visibility:visible;
}
</style>
<h2>Menu 5</h2>
<div id="menu5">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-68490665841351456852013-02-22T20:22:00.002-08:002013-02-22T20:35:36.088-08:00transparent blue<style type="text/css">
#menu4 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 30px;
letter-spacing: -3px;
line-height: 1.2em;
border-top:5px dotted #c7e7f3;
border-bottom:5px dotted #c7e7f3;
float:left;
clear:both;
margin:20px;
}
#menu4 ul li{
float:left;
}
#menu4 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#66b8d8;
width:170px;
}
#menu4 ul li a span{
display:block;
}
#menu4 ul li a span.title{
}
#menu4 ul li a:hover span.title{
color:#00adef;
}
#menu4 ul li a span.text{
padding:0px 5px;
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.6em;
color:#c7e7f3;
visibility:hidden;
}
#menu4 ul li a:hover span.text{
visibility:visible;
}
</style>
<h2>Menu 4</h2>
<div id="menu4">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-69015551189091800302013-02-22T20:14:00.002-08:002013-02-22T20:35:53.723-08:00strong<style type="text/css">
#menu3 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
font-weight: bold;
letter-spacing: -2px;
line-height: 1.2em;
border-top:4px solid #000;
border-bottom:4px solid #666;
float:left;
clear:both;
margin:20px;
}
#menu3 ul li{
float:left;
}
#menu3 ul li a{
display:block;
text-decoration:none;
background-color:#ccc;
padding:10px 10px 5px 10px;
color:#666;
width:170px;
}
#menu3 ul li a span{
display:block;
text-align:center;
}
#menu3 ul li a span.title{
}
#menu3 ul li a:hover span.title{
color:#000;
}
#menu3 ul li a span.text{
padding:0px 5px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 2em;
text-align:right;
margin-top:-20px;
color:#f0f0f0;
font-weight:bold;
background-color:#000;
visibility:hidden;
}
#menu3 ul li a:hover span.text{
visibility:visible;
}
</style>
<h2>Menu 3</h2>
<div id="menu3">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.comtag:blogger.com,1999:blog-7783859694209612564.post-67170696191202897412013-02-22T20:11:00.002-08:002013-02-22T20:36:16.422-08:00Dashed Rich<style type="text/css">
#menu2 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.2em;
border:1px solid #000;
border-left:none;
float:left;
clear:both;
margin:20px;
border:5px dashed #fff;
}
#menu2 ul li{
float:left;
}
#menu2 ul li a{
display:block;
text-decoration:none;
background-color:#f0f0f0;
padding:5px 10px;
color:#666;
width:140px;
}
#menu2 ul li a span{
display:block;
text-align:center;
}
#menu2 ul li a span.title{
}
#menu2 ul li a:hover span.title{
color:#000;
}
#menu2 ul li a span.text{
font-size:12px;
font-style:italic;
padding:0px 5px;
border:1px solid #f0f0f0;
}
#menu2 ul li a:hover span.text{
}
#menu2 ul li a:hover span.text{
border:1px inset #ccc;
background-color:#fff;
}
</style>
<h2>Menu 2</h2>
<div id="menu2">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
howtowebsitehttp://www.blogger.com/profile/15592701475307939974noreply@blogger.com