أطرح لكم قائمتين رائعتين مميزتان تصلح لكافة الأعمال وتتناسق مع أي قالب، وسهولة عملها يمكنك استخدامها للوصول إلى صفحة معينة أو موقع إلخ... ببساطة تامة أتكلم هنا عن القائمة المستديرة لأنها تبقى ثابتةً في مكانها... تشمل الإضافاتين تأثيرات رائعة وتركيبها سهل لذا بدون أي كلمات آخرى أترككم لمعاينتها وتجربتها
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUJ0Jke-Ed2p2vpp_8dayyjNuJDip5yW-quz8Z27KJ7IUgZ0ylTZO3-yR81AZSazt-wCUGVD-X-50ji5wj4pEy_mC0bqb6MiEpMJgD3qSwL3bhzqK0L0EZvOz5zzX_Qf6N6nBooCp8nt0/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>
تخصيص القائمة :
المحدد بالأحمر # يغير بالرابط
المحدد بالأخضر يخص رابط صور الأيقونات
![[IMG]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_tAo7XETFLCoOzqmsT4UXfkmN3x8lOxYp4n5xPDko05Q2t2PuJz1qvsBLMiydxSa6cZmImZiH1SydWtawEky00zuz2C8byk28da4bjAGMONeYiNuzM=s0-d)
