CSS İle Açılır Liste Düzenleme // Drop-Down List

Geçen gün css ile açılır liste düzenlemesi nasıl yaparım diye bi araştırma yaptım ve yabancı kaynaklı bir sitede güzel bir makale gördüm ve bunu kendi yorumumla Türkçe olarak yazmak istedim. Evet Drop-Down Listeleme olayında css kullanmadığımız zaman çok basit bir görünüşü oluyor ve oda sitedeki duruşunu bozuyor. Aşağıda anlatacağım yöntemle güzel,şık ve hoş bir açılır menüye sahip olacaksınız. Anlatıma geçiyorum..
Kod Yapısı:

<div class="wrapper-demo">
<div id="dd" class="wrapper-dropdown-2">
Sosyal Hesaplarım
<ul class="dropdown">
	<li><a href="https://facebook.com/hawksonLY"><em class="icon-facebook icon-large"></em>Facebook</a></li>
	<li><a href="http://twitter.com/BurakSahin59"><em class="icon-twitter icon-large"></em>Twitter</a></li>
	<li><a href="https://gplus.to/BurakSahin"><em class="icon-google-plus icon-large"></em>Google+</a></li>
	<li><a href="http://pinterest.com/buraksahin59/"><em class="icon-pinterest icon-large"></em>Pinterest</a></li>
	<li><a href="http://tr.linkedin.com/pub/burak-şahin/5a/67b/55a/"><em class="icon-linkedin icon-large"></em>Linked.in</a></li>
</ul>
</div>
</div>

<i> etiketi FontAwesome'dan küçük ikonları göstermek için kullanılıyor. Font Awesome'ı açıklamayacağım en son çalıştığını sende göreceksin

<i> etiketinde dikkatinizi çekmek isterim ki class="icon-facebook ibaresinde facebook*kısmını değiştirmek yeterli oluyor.
CSS Ayaları:
style.css dosyası için gerekli kodlar

@import url('demo.css');
@import url('font-awesome.css');

/* GLOBALS */

*,
*:after,
*:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding: 0;
 margin: 0;
}

::selection {
 background: transparent;
}

::-moz-selection {
 background: transparent;
}

.wrapper-demo {
 margin: 60px 0 0 0;
 *zoom: 1;
 font-weight: 400;
}

.wrapper-demo:after {
 clear: both;
 content: "";
 display: table;
}

.wrapper-dropdown-2 {
 /* Size and position */
 position: relative; /* Enable absolute positionning for children and pseudo elements */
 width: 200px;
 margin: 0 auto;
 padding: 10px 15px;

/* Styles */
 background: #fff;
 border-left: 5px solid grey;
 cursor: pointer;
 outline: none;
}

.wrapper-dropdown-2:after {
 content: "";
 width: 0;
 height: 0;
 position: absolute;
 right: 16px;
 top: 50%;
 margin-top: -3px;
 border-width: 6px 6px 0 6px;
 border-style: solid;
 border-color: grey transparent;
}

.wrapper-dropdown-2 .dropdown {
 /* Size & position */
 position: absolute;
 top: 100%;
 left: -5px;
 right: 0px;

/* Styles */
 background: white;
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -ms-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
 list-style: none;

/* Hiding */
 opacity: 0;
 pointer-events: none;
}

.wrapper-dropdown-2 .dropdown li a {
 display: block;
 text-decoration: none;
 color: #333;
 border-left: 5px solid;
 padding: 10px;
 -webkit-transition: all 0.3s ease-out;
 -moz-transition: all 0.3s ease-out;
 -ms-transition: all 0.3s ease-out;
 -o-transition: all 0.3s ease-out;
 transition: all 0.3s ease-out;
}

.wrapper-dropdown-2 .dropdown li:nth-child(1) a {
 border-left-color: #00ACED;
}

.wrapper-dropdown-2 .dropdown li:nth-child(2) a {
 border-left-color: #4183C4;
}

.wrapper-dropdown-2 .dropdown li:nth-child(3) a {
 border-left-color: #3B5998;
}

.wrapper-dropdown-2 .dropdown li i {
 margin-right: 5px;
 color: inherit;
 vertical-align: middle;
}

/* Hover state */

.wrapper-dropdown-2 .dropdown li:hover a {
 color: grey;
}

/* Active state */

.wrapper-dropdown-2.active:after {
 border-width: 0 6px 6px 6px;
}

.wrapper-dropdown-2.active .dropdown {
 opacity: 1;
 pointer-events: auto;
}

/* No CSS3 support */

.no-opacity .wrapper-dropdown-2 .dropdown,
.no-pointerevents .wrapper-dropdown-2 .dropdown {
 display: none;
 opacity: 1; /* If opacity support but no pointer-events support */
 pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity .wrapper-dropdown-2.active .dropdown,
.no-pointerevents .wrapper-dropdown-2.active .dropdown {
 display: block;
}

syle.css dosyamıza font-awesome.css ile demo.css dosyalarımızı kodda gördüğünüz gibi çekiyoruz. Makalenin sonunda demo.css ile font-awesome.css dosyasını size vericem.
JavaScript Ayarları:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script type="text/javascript">

function DropDown(el) {
 this.dd = el;
 this.initEvents();
 }
 DropDown.prototype = {
 initEvents : function() {
 var obj = this;

obj.dd.on('click', function(event){
 $(this).toggleClass('active');
 event.stopPropagation();
 });
 }
 }

$(function() {

var dd = new DropDown( $('#dd') );

$(document).click(function() {
 // all dropdowns
 $('.wrapper-dropdown-2').removeClass('active');
 });

});

</script>

Kaynak: BSahin

wp.tutsplus.com da güzel örnek var.