Archive Pages Design$type=blogging

قائمتين مميزتان لتسهيل المهام

نقدم بين يديكم  قائمتين رائعتين مميزتان تصلح لكافة الأعمال وتتناسق مع أي قالب، وسهولة عملها...



نقدم بين يديكم  قائمتين رائعتين مميزتان تصلح لكافة الأعمال وتتناسق مع أي قالب، وسهولة عملها يمكنك استخدامها للوصول إلى صفحة معينة  ... ببساطة تامة . 
القائمة المستديرة لأنها تبقى ثابتةً في مكانها... تشمل الإضافاتين تأثيرات رائعة وتركيبها سهل لذا بدون أي كلمات آخرى أترككم لمعاينتها وتجربتها


شرح طريقة التركيب

1 . من التخطيط أضف أداة Html/Javascript وضع بها كود القائمة المختارة
<div class="ar1webmb"> <input type="checkbox" id="tm" /> <!-- The menu --> <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 checkbox --> <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'/>
تخصيص القائمة :
المحدد بالأحمر # يغير بالرابط
المحدد بالبرتقالي يخص الأيقونات "الموقع"
المحدد بالوردي يغير بالكلمات
المحدد بالأخضر يخص رابط الصورة
المحدد بالأزرق يخص لون الخلفية



 <style> .c-circle-nav__toggle,.c-circle-nav__toggle span{transition:background .3s;-webkit-transition:background .3s}.c-circle-nav{position:fixed;bottom:12px;right:12px;z-index:1000;width:48px;height:48px;border-radius:24px}@media (min-width:480px)and (min-height:480px){.c-circle-nav{width:96px;height:96px;border-radius:48px}}.c-circle-nav__items{display:block;list-style:none;z-index:90;margin:0;padding:0}.c-circle-nav__item{display:block;position:absolute;top:0;left:0;width:48px;height:48px;border-radius:24px;opacity:0;-webkit-transition-property:-webkit-transform,opacity;transition-property:transform,opacity;-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-timing-function:cubic-bezier(.35,-.59,.47,.97);transition-timing-function:cubic-bezier(.35,-.59,.47,.97)}.c-circle-nav__item:nth-child(1){-webkit-transition-delay:.4s;transition-delay:.4s}.c-circle-nav__item:nth-child(2){-webkit-transition-delay:.3s;transition-delay:.3s}.c-circle-nav__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s}.c-circle-nav__item:nth-child(4){-webkit-transition-delay:.1s;transition-delay:.1s}.c-circle-nav__item:nth-child(5){-webkit-transition-delay:0s;transition-delay:0s}.c-circle-nav.is-active .c-circle-nav__item{-webkit-transition-timing-function:cubic-bezier(.35,.03,.47,1.59);transition-timing-function:cubic-bezier(.35,.03,.47,1.59);opacity:1}.c-circle-nav.is-active .c-circle-nav__item:nth-child(1){-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translate(-144px,0);-ms-transform:translate(-144px,0);transform:translate(-144px,0)}@media (min-width:480px)and (min-height:480px){.c-circle-nav__item{width:96px;height:96px;border-radius:48px!important}.c-circle-nav.is-active .c-circle-nav__item:nth-child(1){-webkit-transform:translate(-288px,0);-ms-transform:translate(-288px,0);transform:translate(-288px,0)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(2){-webkit-transition-delay:.1s;transition-delay:.1s;-webkit-transform:translate(-134px,-56px);-ms-transform:translate(-134px,-56px);transform:translate(-134px,-56px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(2){-webkit-transform:translate(-267px,-111px);-ms-transform:translate(-267px,-111px);transform:translate(-267px,-111px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(3){-webkit-transition-delay:.2s;transition-delay:.2s;-webkit-transform:translate(-102px,-102px);-ms-transform:translate(-102px,-102px);transform:translate(-102px,-102px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(3){-webkit-transform:translate(-204px,-204px);-ms-transform:translate(-204px,-204px);transform:translate(-204px,-204px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(4){-webkit-transition-delay:.3s;transition-delay:.3s;-webkit-transform:translate(-56px,-134px);-ms-transform:translate(-56px,-134px);transform:translate(-56px,-134px)}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(4){-webkit-transform:translate(-111px,-267px);-ms-transform:translate(-111px,-267px);transform:translate(-111px,-267px)}}.c-circle-nav.is-active .c-circle-nav__item:nth-child(5){-webkit-transition-delay:.4s;transition-delay:.4s;-webkit-transform:translate(0,-144px);-ms-transform:translate(0,-144px);transform:translate(0,-144px)}.c-circle-nav__link{display:block;width:100%;height:100%;border-radius:24px!important;box-shadow:inset 0 0 0 2px #fff}@media (min-width:480px)and (min-height:480px){.c-circle-nav.is-active .c-circle-nav__item:nth-child(5){-webkit-transform:translate(0,-288px);-ms-transform:translate(0,-288px);transform:translate(0,-288px)}.c-circle-nav__link{border-radius:48px!important}}.c-circle-nav__link img{display:block;max-width:100%;height:auto}.c-circle-nav__link:hover{box-shadow:inset 0 0 0 2px #ff283c}.c-circle-nav__toggle{display:block;position:absolute;z-index:100;margin:0;padding:0;width:48px;height:48px;background-color:#ff283c;font:inherit;font-size:0;text-indent:-9999px;border-radius:24px!important;cursor:pointer;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle{width:96px;height:96px;border-radius:48px!important}}.c-circle-nav__toggle.is-active,.c-circle-nav__toggle:focus,.c-circle-nav__toggle:hover{outline:0;background-color:#c10012}.c-circle-nav__toggle span,.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{display:block;position:absolute;height:4px;background:#fff;border-radius:1px!important}.c-circle-nav__toggle span{top:22px;left:10px;right:10px}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle span,.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{height:8px;border-radius:2px!important}.c-circle-nav__toggle span{top:44px;left:20px;right:20px}}.c-circle-nav__toggle span::after,.c-circle-nav__toggle span::before{left:0;width:100%;content:"";-webkit-transition-duration:.3s,.3s;transition-duration:.3s,.3s;-webkit-transition-delay:.3s,0s;transition-delay:.3s,0s}.c-circle-nav__toggle span::before{top:-8px;-webkit-transition-property:top,-webkit-transform;transition-property:top,transform}.c-circle-nav__toggle span::after{bottom:-8px;-webkit-transition-property:bottom,-webkit-transform;transition-property:bottom,transform}@media (min-width:480px)and (min-height:480px){.c-circle-nav__toggle span::before{top:-16px}.c-circle-nav__toggle span::after{bottom:-16px}}.c-circle-nav__toggle.is-active span{background:0 0}.c-circle-nav__toggle.is-active span::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-circle-nav__toggle.is-active span::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition-delay:0s,.3s;transition-delay:0s,.3s}.c-mask{position:fixed;top:0;left:0;z-index:900;visibility:hidden;opacity:0;width:100%;height:100%;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .3s,visibility .3s;transition:opacity .3s,visibility .3s}.c-mask.is-active{opacity:1;visibility:visible} </style> <nav id="c-circle-nav" class="c-circle-nav"> <button id="c-circle-nav__toggle" class="c-circle-nav__toggle"> <span>Toggle</span> </button> <ul class="c-circle-nav__items"> <li class="c-circle-nav__item"> <a href="#" class="c-circle-nav__link"> <img src="http://callmenick.com/_development/css-circle-menu/img/house.svg" alt="" /> </a> </li> <li class="c-circle-nav__item"> <a href="#" class="c-circle-nav__link"> <img src="http://callmenick.com/_development/css-circle-menu/img/photo.svg" alt="" /> </a> </li> <li class="c-circle-nav__item"> <a href="#" class="c-circle-nav__link"> <img src="http://callmenick.com/_development/css-circle-menu/img/pin.svg" alt="" /> </a> </li> <li class="c-circle-nav__item"> <a href="#" class="c-circle-nav__link"> <img src="http://callmenick.com/_development/css-circle-menu/img/search.svg" alt="" /> </a> </li> <li class="c-circle-nav__item"> <a href="#" class="c-circle-nav__link"> <img src="http://callmenick.com/_development/css-circle-menu/img/tools.svg" alt="" /> </a> </li> </ul> </nav> <script src="http://callmenick.com/_development/css-circle-menu/js/circleMenu.min.js"></script>
تخصيص القائمة :
المحدد بالأحمر # يغير بالرابط
المحدد بالأخضر يخص رابط صور الأيقونات


تعليقات

الاسم

أبل أخبارالعالم الرقمي أخبارعالم الأنترنت إختراعـــات إسلاميات إشاعات الباي بال الرئيسية العاب ألواح.نت الويندوز أندرويد إنستغرام برامج بلوجر تطبيقات تويتر جوجل جوجل بلا ستور جوجل كروم حاسوب.نت حلقات حماية دراجتك دروس روابط مفيدة ريــاضة ريـــــاضة مباشر ساعات سماعات سيارات شاشات تلفاز صحة و رشاقةو ريــاضة صورة.نت غرائب وعجائب فيسبوك فيسبوك-تويتر قصص وحكايات كاميرات لرئيسية لوحة مفاتيح مايكروسوفت مجانيات منوعات مواقع نصائح تكنولوجية هل تعلم؟ هواتف واتساب ووردبريس يوتيوب
false
rtl
item
تِــNETـــقْ: قائمتين مميزتان لتسهيل المهام
قائمتين مميزتان لتسهيل المهام
https://2.bp.blogspot.com/-PEiejWyP9BQ/V6iwWpFNEkI/AAAAAAAAeIA/kV8jqtAteyU9q4SvXvjnZ2Rgtm7pOvHCwCK4B/s640/menu.png
https://2.bp.blogspot.com/-PEiejWyP9BQ/V6iwWpFNEkI/AAAAAAAAeIA/kV8jqtAteyU9q4SvXvjnZ2Rgtm7pOvHCwCK4B/s72-c/menu.png
تِــNETـــقْ
http://www.teqnet.us/2016/08/wonderful-menus-blogger.html
http://www.teqnet.us/
http://www.teqnet.us/
http://www.teqnet.us/2016/08/wonderful-menus-blogger.html
true
4363046374865816904
UTF-8
لم يتم العثور على اى مواضيع شاهد الكل اقرأ المزيد رد احذف الرد حذف بواسطة الرئيسية صفحات مواضيع شاهد الكل نوصى لك التسميات الارشيف بحث لم يتم العثور على ماتبحث عنه عودة للرئيسية الاحد الاثنين الثلاثاء الاربعاء الخميس الجمعة السبت الاحد الاثنين الثلاثاء الاربعاء الخميس الجمعة السبت يناير فبراير مارس ابريل مايو يونيو يوليو اغسطس سبتمبر اكتوبر نوفمبر ديسمبر يناير فبراير مارس ابريل مايو يونيو يوليو اغسطس سبتمبر اكتوبر نوفمبر ديسمبر just now 1 دقيقة مضت $$1$$ دقيقة مضت 1 hour ago $$1$$ ساعة مضت الامس $$1$$ يوم مضى $$1$$ اسبوع مضى اكثر من 5 اسابيع مضت