اضافة قائمة مميزة على المدونة

قائمة جميلة ورائعة

طريقة الاضافة

اذهب للتخطيط - اضافة اداة- HTML/Javascript

وألصق الكود التالي مع تغيير مايلزم

<div class="ar1webmb"> <input type="checkbox" id="tm" />  <ul class="sidenav"> <li><a href="#"><i class="fa fa-check"></i><b>المهام</b></a></li> <li><a href="#"><i class="fa fa-inbox"></i><b>الرسائل</b></a></li> <li><a href="#"><i class="fa fa-pencil"></i><b>المواضيع </b></a></li> <li><a href="#"><i class="fa fa-cog"></i><b>الإعدادات</b></a></li> <li><a href="#"><i class="fa fa-star"></i><b>جديد المدونة</b></a></li> <li><a href="#"><i class="fa fa-power-off"></i><b>الخروج</b></a></li> </ul> <section>  <label for="tm">قائمة<br/> </label> </section> </div> <style> @import url(http://fonts.googleapis.com/css?family=Montserrat|Open+Sans:400,300); #addku1,#addku2 {display:none;} .ar1webmb { float: none; position: relative; overflow: hidden; } #tm { display: none; } .ar1webmb section { background: url("http://3.bp.blogspot.com/-YOrUvAOGxpw/Vd3Wf8IaXtI/AAAAAAAAIf0/OXbB6V72x4M/s1600/ar1web44.jpg"); width: 300px; height: 500px; position: relative; transition: all 0.25s;background-size: cover; box-shadow: 0 0 10px 0px #000000; } .ar1webmb section label { color: white; font: bold 22px 'Adobe Arabic','serif'; text-align: center; border: 2px solid white; display: block; padding: 6px 0; width: 60%; position: absolute; left: 20%; top: 100px; cursor: pointer; text-transform: uppercase; background-color: rgba(49, 46, 47, 0.36); } .sidenav { background: rgb(169, 106, 70); width: 160px; position: absolute; left: 0; top: 0; bottom: 0; padding-top: 100px; } .sidenav li { list-style-type: none;padding-right: 19px; } .sidenav a { color: white; text-decoration: none; } .sidenav b { font: bold 19px/48px 'Adobe Arabic','serif'; display: block; opacity: 0; transform: translateX(50px); transition: all 0.4s; } .sidenav i { display: block; width: 50px; float: left; font-size: 16px; line-height: 48px; text-align: center; } #tm:checked ~ section { transform: translateX(160px); } #tm:checked ~ .sidenav b { opacity: 1; transform: translateX(0); } #tm:checked ~ .sidenav li:nth-child(1) b { transition-delay: 0.08s; } #tm:checked ~ .sidenav li:nth-child(2) b { transition-delay: 0.16s; } #tm:checked ~ .sidenav li:nth-child(3) b { transition-delay: 0.24s; } #tm:checked ~ .sidenav li:nth-child(4) b { transition-delay: 0.32s; } #tm:checked ~ .sidenav li:nth-child(5) b { transition-delay: 0.40s; } #tm:checked ~ .sidenav li:nth-child(6) b { transition-delay: 0.48s; } </style> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>