Windows phone screen style design

Daha  önceleri  hiç Windows Phone kullanmadım ama Android ve BlackBerry cihazlar için yapılmış olan Windows Phone tarzı ekran görüntülerini denemiştim bir kaç defa.  Windows Phone ekranındaki dört köşeli uygulama  ikonları sürekli durmadan hareket  halindeler. Bazen bir tane uygulama ikonu bazende  bir kaç tane uygulama ikonu birden bire  dönmeye başlar. İkonların bulunduğu çerçevelerin bir kaç defa 360 derece dönmesi baya güzel görünüyor. En sevdiğim özelliği de buydu zaten bu işletim sisteminin.

Aynı tarzda bir menüyü  sitenin sağ yada sol tarafına eklemek oldukça dikkat çekici olurdu. Web sayfasının yan tarafında sürekli  hareket  eden, ara sıra bir tane ve ara sıra da bir kaç tane ikonun 360 derece  dönmesi daha görünür olurdu. Bu yazıda paylaştığımız menü örneğindeki ikonlar da  aynı Windows cep telefonlarının ekranındaki gibi durmadan hareket ediyorlar. Ayrıca sürükle bırak (drag and drop) özelliği sayesinde ikonları mouse ile tutup yerlerini de değiştirebilirsiniz. Çerçevenin en üst sağ tarafında  bulunan  ok işaretine tıkladığınızda da yan gizli linkler görünüyor. Siz de bu örneği kullanarak web sitenize hareketli bir menü çalışması ekleyebilirsiniz.

Sosyal medya sitelerinin web siteleri için önemini hepimiz az çok biliyoruz. Ne kadar çok takipçimiz olursa içeriklerimizi paylaşmak ta bir o kadar kolay olur. Birçok web sitesi sayfa açılır  açılmaz Facebook ve Twitter gibi siteler üzerinden kendileirni takip etmemizi isteler ve bazıları da  takip etmemiz için zorlarlar. Bana göre  bu tür çalışmalar  site ziyaretçilerine  aşırı derece rahatsızlık verir. Ayrıca benim en sevmediğim çalışmalardandır. Windows Phone benzeri menü örneğine sosyal medya sitelerinizi eklerseniz bu tarz rahatsız edici örnekler kullanmak zorunda kalmazsınız. Butonların sürekli hareket etmesi ziyaretçilerin dikkatini çekmeye yeter de artar bile.

Kullanım

Css : 

<link rel="stylesheet" href="stil.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

Cs dosya adresleri : 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

 JavaScript : 

<script type="text/javascript">
$('.open').click(function() {
    $("#menu_panel").animate({width: 'toggle'}, 200);
	$(".tile li").css("visibility","hidden");
	$(".open").css("visibility","hidden");
});

$('.close').click(function() {
    $("#menu_panel").animate({width: 'toggle'}, 200);
	$(".tile li").css("visibility","visible");
	$(".open").css("visibility","visible");
});

$( function() {
    $( '#jquery-ui-sortable' ) . sortable();
    $( '#jquery-ui-sortable' ) . disableSelection();
} );
</script>

 Html : 

<div id="wrapper">
<div id='menu_panel'>
    <ul>
        <li>Phone</li>
        <li>Mail</li>
        <li>facebook</li>
        <li>skype</li>
        <li>People</li>
        <li>twitter</li>
        <li>RSS</li>
        <li>Linkdin</li>
        <li>Internet Explorer</li>
    </ul>
    <div class='close'>
    </div>
</div>
<div class='open'>
</div>
<div class="bg">
    <ul class="tile" id="jquery-ui-sortable">
        <li class="mawaru01 ui-state-default"><span>Phone</span></li>
        <li class="mawaru02 ui-state-default"><span>Mail</span></li>
        <li class="mawaru03 ui-state-default"><span>facebook</span></li>
        <li class="mawaru04 ui-state-default"><span>skype</span></li>
        <li class="mawaru05 ui-state-default"><span>People</span></li>
        <li class="mawaru06 ui-state-default"><span>twitter</span></li>
        <li class="mawaru07 ui-state-default"><span>RSS</span></li>
        <a href="https://www.mintik.com/?p=12197"><li class="mawaru08 ui-state-default"></li></a>
        <li class="mawaru09 ui-state-default"><span>Linkdin</span></li>
        <li class="mawaru10 ui-state-default"><span>Internet Explorer</span></li>
    </ul>
</div>