DEV

jQuery+CSS3サンプル

#CSS#Javascript#JQuery

jQueryとCSS3を使ったサイトのサンプルを作ってみました。

jQueryをちょっとばかにしてたけどかなり色々できて面白い。スマホだとIE対応等の為に重くなっているらしいので、もっと軽いjQueryみたいなやつが沢山でているそうです。同じような使い方であることを祈ります。

このサンプルは、ここで見られます。

このサンプルは、画面がロードされるとメニューが横から飛んできます。メニューはアコーディオンになっていて、アクティブなメニューと非アクティブなメニューで色分けされます。後は、ローダーもspinnerというプラグインを使って入れてみました。このプラグインは分かり易いし便利です。あとは、ポップアップしてFacebookみたいに登録完了を告げてちょっとしたらポップアップが消えていくようにしました。インターネットが重い場合は、最初のメニューが横から飛んでくる前に画面に表示されちゃうかもしれません。最初は透明にするなりしておけばよかった。

html

<!DOCTYPE html>
<html>


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Test</title>
<link href='http://fonts.googleapis.com/css?family=Fascinate|Sirin+Stencil|Walter+Turncoat|Medula+One|Coming+Soon|Sunshiney|Quantico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="./css/p13.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.spinner.js"></script>
<script type="text/javascript" src="./js/p13.js"></script>
</head>


<body>
<div id="box1">
<h1 id="t"><a href="./">TEST</a></h1>
<div id="box2">
<div class="m" id="a">aaaaaa</div>
<div class="smb">
    <div class="sm" id="a1">111111</div>
    <div id="a1c"><form action="" method="post">
        HogeWord <input type="text" id="a1t" />
        <input type="submit" value="submit" id="a1s" /></form>
        <div id="a1cc"></div>
    </div>
    <div class="sm" id="a2">222222</div>
</div>
<div class="m" id="b">bbbbbb</div>
<div class="m" id="c">cccccc</div>
</div>
</div>
</body>


</html>

p13.css

body {
    background: #000;
    color: #fff;
    font-family: 'Quantico', cursive;
    font-size:13px;
    margin: 5px;
}


a{
    color:#fa0;
    text-decoration:none;
}
h1, h2, h3, h4 {
    font-weight: normal;
    margin:0;
}
h1#t{
    text-shadow:0 0 1px #fff,0 0 3px #0ac,0 0 5px #0ac,0 0 7px #0cf,0 0 9px #0cf;
    margin:20px 0 10px 0;
}
h1#t a{color:#fff;}


#box1{
    margin:0 auto;
    width:600px;
    height:100%;
    padding:0 0 5px 5px;
    text-align:center;
}
#box2{
    position:relative;
}


.m{
    color:#000;
    background-color:#666;
    padding:3px;
    margin: 0 0 10px 0;
    position:relative;
    height:40px;
    cursor:pointer;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    background: -moz-linear-gradient(left top, #f0a,#fa0 50%,#0f0);
    background: -webkit-gradient(linear,left top,right bottom,from(#f0a),color-stop(0.5,#fa0),to(#0f0));
}
.mn{
    background: -moz-linear-gradient(left top, #111,#666 50%,#111);
    background: -webkit-gradient(linear,left top,right bottom,from(#111),color-stop(0.5,#666),to(#111));
    color:#999;
}
.mh{
    background: -moz-linear-gradient(left top, #f3c,#fc3 50%,#3f3);
    background: -webkit-gradient(linear,left top,right bottom,from(#f3c),color-stop(0.5,#fc3),to(#3f3));
}


.smb{
    display:none;
}
.sm{
    color:#000;
    background-color:#666;
    padding:3px;
    margin: 0 0 10px 0;
    position:relative;
    height:20px;
    cursor:pointer;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    background: -moz-linear-gradient(left top, #345,#9dd 50%,#345);
    background: -webkit-gradient(linear,left top,right bottom,from(#345),color-stop(0.5,#9dd),to(#345));
}
.smh{
    background: -moz-linear-gradient(left top, #567,#bff 50%,#567);
    background: -webkit-gradient(linear,left top,right bottom,from(#567),color-stop(0.5,#bff),to(#567));
}
#a1c{
    display:none;
}
#a1c form{
    margin:10px;
}
#a1cc{
    text-align:left;
}


.subox{
    position:relative;
    display:none;
    margin:0 20px;
    border-bottom:1px solid #ccc;
    width:560px;
}
.subox ul{
    margin:0;
    padding:0 10px;
    list-style-type: none;
}
.sbn{
    float:left;
    padding:0;margin:0;
    width:450px;
}
.sbb{
    float:left;
    padding:0;margin:0;
    width:90px;
}


.popup{
    font-size:12px;
    color:#000;
    background-color:#fff;
    top:0px;
    left:450px;
    display:none;
    position:absolute;
    padding:2px;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    background: -moz-linear-gradient(left top, #ccc,#fff 50%,#ccc);
    background: -webkit-gradient(linear,left top,right bottom,from(#ccc),color-stop(0.5,#fff),to(#ccc));
    z-index:10;
}


.clearfix:after{display:block; clear:both; height:0; line-height:0; visibility:hidden;
    content:"."; font-size:0.1em;}
.clearfix{display:inline-block;}

p13.js

$(function(){
    $(document).ready(function(){set_menu();});
    $('.m').mouseover(function(){hover_menu($(this));})
        .mouseout(function(){hover_menu($(this));});
    $('.m').click(function(){open_menu($(this).attr('id'));});
    $('.sm').live('mouseover',function(){hover_sm($(this));})
        .live('mouseout',function(){hover_sm($(this));});
    $('#a1').live('click',function(){a1();});
    $('#a1s').live('click',function(){a1s();return false;});
    $('.b').live('click',function(){b($(this).attr('name'));});
});


function set_menu(){
    var x = getx($('.m'));
    $('.m').css('left',x).show();
    $('#a').animate({left:'0'},'first','swing',function(){
        $('#b').animate({left:'0'},'first','swing',function(){
            $('#c').animate({left:'0'},'first','swing');
        });
    });
}


function hover_menu(th){
    th.toggleClass('mh');
}


function open_menu(id){
    var num_mn = $('.mn').size();
    var num_m = $('.m').size();
    if(num_mn > 0) $('.m[id="'+id+'"]').toggleClass('mn');
    $('.m[id!="'+id+'"]').addClass('mn');
    num_mn = $('.mn').size();
    if(num_mn==num_m) $('.m').removeClass('mn');


    $('.m[id="'+id+'"]+.smb').slideToggle('first');
    $('.m[id!="'+id+'"]+.smb').slideUp('first');
}


function hover_sm(th){
    th.toggleClass('smh');
}


function a1(){
    $('#a1c').slideToggle('first');
}


function a1s(){
    if(!($('#a1t').val())) return;
    var opts = {
        position: 'center',
        hide: true,
        onFinish: function(){a1cc($('#a1t').val());}
    };
    $('#a1s').spinner(opts);
    setTimeout(function() {
        $('#a1s').spinner('remove');
    }, 1000);
}


function a1cc(val){
    $('#a1cc').empty();
    for(var i=0;i<5;i++){
        $('#a1cc').append('<div class="subox clearfix"><ul><li class="sbn">'+val+i+'<li class="sbb"><input type="button" class="b" name="'+i+'" value="put" /></ul></div>');
    }
    var x = getx($('.subox'));
    $('.subox').each(function(idx,ele){
        $(this).css('left',x-100*idx).show().animate({left:'0'},'slow','swing');
    });


}


function b(name){
    var opts = {
        position: 'center',
        hide: true,
        onFinish: function(){popup($('.b[name="'+name+'"]'));}
    };
    $('.b[name="'+name+'"]').spinner(opts);
    setTimeout(function() {
        $('.b[name="'+name+'"]').spinner('remove');
    }, 1000);
}


function popup(th){
    th.after('<div class="popup"></div>')
        .next().append('登録しました')
        .fadeIn('slow',function(){
            setTimeout(function(){
                th.next().fadeOut('slow');
            },1000);
        });
}


function getx(ele){
    var c = $('#container').outerWidth(true);
    var w = getw();
    if(w>c){
        return (w-c)*-0.5-ele.outerWidth(true)-50;
    }else{
        return -ele.outerWidth(true)-50;
    }
}


function getw ( ) {
    if ( window.innerWidth ) { return window.innerWidth; }
    else if ( document.documentElement &amp;&amp; document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; }
    else if ( document.body ) { return document.body.clientWidth; }
    return 0;
}