#gizlenir

[felsefil-0]

Ne dersin? Göğe bakıp içimizi konuşturalım mı? Çünkü dışarıda çok yalan var..

[we-dekormimar-me]

Facebook'ta Beğeniler Nasıl Gizlenir

Facebook’ta Beğeniler Nasıl Gizlenir

Sayfanız ve yorum beğenileriniz yalnızca sizindir. Öyleyse Facebook bu bilgiyi dünyayla paylaşmak için neden uygun görüyor? Asil bir nedene sahip bazı sayfalar için benzer kutusuna bir çetele eklemek, mükemmel bir sonuç verme eğilimindedir. Hatta ona dikkat çekmek isteyebilirsiniz. Peki ya kişisel ve özel düzeyde sevdiğiniz şeyler? Bir şeyi beğendiğinizde, o sayfayı veya sizinki ziyaret eden…

View On WordPress

[benimyerimburasi-blog]

Android Telefonlarda Uygulamalar Nasıl Gizlenir?

Android Telefonlarda Uygulamalar Nasıl Gizlenir?

Kişiselleştirmenin vahası olan Android telefonlar, tabiki başkalarının görmesini istemediğiniz uygulamaları gizlemenize imkan sağlıyor. İşte nasıl yapıldığı. Bazen hepimiz kişisel cihazlarımızdaki bazı uygulamaların gözden uzak olmasını isteriz. Bunun nedeni kimi zaman meraklı birinin Facebook’umuza girmesini engellemek ya da WhatsApp sohbetlerinize ulaşılamamasını istemeniz olabilir. Neyseki…

View On WordPress

[bilgilazim-blog]

Sizlere faydal

Facebook’taki arkadaş listenizi hiç kimsenin görmemesini istiyorsanız, makalemizde anlattığımız oldukça basit adımlarla bu işlemi kolayca gerçekleştirebilirsiniz. Popüler sosyal medya sitesi Facebook, gizliliğine önem veren kullanıcılar için birçok gizlilik ayarı sunuyor. Bunlardan belki de en önemlisi, Arkadaş listemizi diğer kullanıcılardan gizleyebilmemiz. Listenizin, diğer arkadaşlarınız tarafından görüntülenmesini istemiyorsanız bunu birkaç adımda çözebilirsiniz.

[adobewordpress]

New Post has been published on adobewordpress ~ güncel tasarım okulu

New Post has been published on http://www.adobewordpress.com/sayfanin-ustunde-acilabilir-menu

Sayfanın Üstünde Açılabilir Menü

Menü öğeleriniz fazla mı yer kaplıyor? Onları gizli ve açılabilir bir alana mı saklamak istiyorsunuz? Toggle butonu ile çalışan şık bir menüye mi ihtiyacınız var? Bu tasarım tam sizlik!

Bu makalemizde jQuery ve CSS3‘ün hünerlerini kullanarak açılıp kapanabilen bir menü örneği hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

Açılabilir / Kapanabilir menü nasıl hazırlanır?

İlk olarak JavaScript kodlarımız ile başlayalım. Daha sonra sırasıyla HTML ve CSS kodlarımızı ekleyeceğiz.

JavaScript Kodları

Body elemanını kapatmadan hemen öncesine, tüm CSS ve HTML kodlarının altına JavaScript kodlarımızı ekliyoruz.

Bu yapının işlevselliğini jQuery vermekte. O yüzden ilk jQuery kütüphanesini include ederek başlayalım.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Daha sonra yukarı ve aşağıya açılışı sağlayalım.

$(function() var openBtn = $('.buton'), slideMenu = $('.acilabilir-menu'), layer = $('<div />').addClass('perde'); openBtn.on("click", function() if (slideMenu.is(':hidden')) layer.appendTo('body'); slideMenu.slideDown(300); else slideMenu.slideUp(300); layer.remove(); ); );

HTML Kodları

HTML5‘in nav elemanını bir div ile sarıp iç kısmına ul yapısındaki menümüzü yerleştirelim.

<div class="menubar"> <nav class="acilabilir-menu"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul> </nav> <div class="buton"><span></span></div> </div>

CSS Kodları

İlk olarak body elemanımıza tanımlamalar yapalım. Örneğin body’deki tüm margin değerini sıfırlarsak menü ekranın tam üstüne yapışacaktır. Beraberinde uyumlu bir border da ekleyebiliriz.

body border-top: 10px solid khaki; margin:0; background-color:#f6f0ba;

Şimdi de açılabilir menüyü stilize edelim.

.menubar width: 100%; font:300 14px 'Open Sans'; position: absolute; top: 0; z-index: 999; .acilabilir-menu padding: 50px 0; border-bottom: solid 10px darkkhaki; background: #fff; display: none; .acilabilir-menu ul overflow: hidden; margin: 0 auto; padding: 0; max-width: 800px; width: 100%; .acilabilir-menu li float: left; padding: 0; width: 20%; list-style: none; .acilabilir-menu li a display: block; margin: 0 5%; padding: 20px 0; border: solid 1px #333; background: #fff; color: #666; text-align: center; text-decoration: none; font-size: 18px; .acilabilir-menu li a:hover border: solid 1px tomato; color: tomato; Butonu ve perdesini şekillendirelim. 1 .buton margin: 0 auto; width: 200px; height: 30px; border-radius: 0 0 5px 5px; background: IndianRed; cursor: pointer; .buton span position: relative; top: 12px; left: 50%; display: block; margin-left: -25px; width: 50px; height: 5px; border-radius: 5px; background: #fff; box-shadow: inset 1px 1px 2px #ddd; .perde position: fixed; top: 0; width: 100%; height: 100%; background-color:rgba(0, 0, 0, 0.1);

Son olarak küçük çözünürlüklü cihazlar için tasarımı menü öğelerini alt alta dizelim.

@media screen and (max-width: 480px) .acilabilir-menu padding: 5%; .acilabilir-menu li width: 100%; .acilabilir-menu li a border-top: none; .acilabilir-menu li a:hover margin-top: -1px; .acilabilir-menu li:first-child a border-top: solid 1px #333; .acilabilir-menu li:first-child a:hover margin-top: 0; border-top: solid 1px #12a1c6;

Bu kadar!

Kapanış

Bu tip şık tasarımlar sayesinde menülerinizi gizleyip web sayfanızdaki çalışma alanını genişletebilirsiniz.

İyi çalışmalar.