الجمعة، 1 مايو 2015

قائمتين احترافيتين على شكل دوائر منبثقة


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

الأن نأتي إلى المعاينة :

طريقة التركيب :
● القائمة الأولى :
1- ابحث عن <head> وأضف أسفله الكودين التاليين :
<link href='http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css' rel='stylesheet'/>
<script src='https://dl.dropboxusercontent.com/u/280199022/svg/modernizr-2.6.2.min.js'/>
2- ابحث عن </body> وأضف فوقه الكود التالي :
<script>
(function(){

 var button = document.getElementById(&#39;cn-button&#39;),
    wrapper = document.getElementById(&#39;cn-wrapper&#39;);

    //open and close menu when the button is clicked
 var open = false;
 button.addEventListener(&#39;click&#39;, handler, false);

 function handler(){
   if(!open){
     this.innerHTML = &quot;إغلاق&quot;;
     classie.add(wrapper, &#39;opened-nav&#39;);
   }
   else{
     this.innerHTML = &quot;القائمة&quot;;
  classie.remove(wrapper, &#39;opened-nav&#39;);
   }
   open = !open;
 }
 function closeWrapper(){
  classie.remove(wrapper, &#39;opened-nav&#39;);
 }

})();
    </script>
<script src='https://dl.dropboxusercontent.com/u/280199022/svg/polyfills.js'/>
3- ابحث عن ]]></b:skin> وأضف فوقه الكود التالي :
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}


.component {
 position: relative;
 margin-bottom: 3em;
 height: 25em;
 background: rgba(0,0,0,0.05);
}

.component > h2 {
 position: absolute;
 overflow: hidden;
 width: 100%;
 text-align: center;
 text-transform: uppercase;
 white-space: nowrap;
 font-weight: 300;
 font-style: italic;
 font-size: 12em;
 opacity: 0.1;
 cursor: default;
}

.cn-button {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 11;
  margin-top: -2.25em;
  margin-left: -2.25em;
  padding-top: 0em;
  width: 4.5em;
  height: 4.5em;
  border: none;
  border-radius: 50%;
  background: none;
  background-color: #fff;
  color: #52be7f;
  text-align: center;
  font-size: 1.5em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  font-family: 'lolblogger';
}

.csstransforms .cn-wrapper {
 position: absolute;
 top: 100%;
 left: 50%;
 z-index: 10;
 margin-top: -13em;
 margin-left: -13.5em;
 width: 27em;
 height: 27em;
 border-radius: 50%;
 background: transparent;
 opacity: 0;
 -webkit-transition: all .3s ease 0.3s;
 -moz-transition: all .3s ease 0.3s;
 transition: all .3s ease 0.3s;
 -webkit-transform: scale(0.1);
 -ms-transform: scale(0.1);
 -moz-transform: scale(0.1);
 transform: scale(0.1);
 pointer-events: none;
 overflow: hidden;
}

/*cover to prevent extra space of anchors from being clickable*/
.csstransforms .cn-wrapper:after{
  content:".";
  display:block;
  font-size:2em;
  width:6.2em;
  height:6.2em;
  position: absolute;
  left: 50%;
  margin-left: -3.1em;
  top:50%;
  margin-top: -3.1em;
  border-radius: 50%;
  z-index:10;
  color: transparent;
}

.csstransforms .opened-nav {
 border-radius: 50%;
 opacity: 1;
 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 transition: all .3s ease;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 pointer-events: auto;
}

.csstransforms .cn-wrapper li {
 position: absolute;
 top: 50%;
 left: 50%;
 overflow: hidden;
 margin-top: -1.3em;
 margin-left: -10em;
 width: 10em;
 height: 10em;
 font-size: 1.5em;
 -webkit-transition: all .3s ease;
 -moz-transition: all .3s ease;
 transition: all .3s ease;
 -webkit-transform: rotate(76deg) skew(60deg);
 -moz-transform: rotate(76deg) skew(60deg);
 -ms-transform: rotate(76deg) skew(60deg);
 transform: rotate(76deg) skew(60deg);
 -webkit-transform-origin: 100% 100%;
 -moz-transform-origin: 100% 100%;
 transform-origin: 100% 100%;
 pointer-events: none;
}

.csstransforms .cn-wrapper li a {
 position: absolute;
 right: -7.25em;
 bottom: -7.25em;
 display: block;
 width: 14.5em;
 height: 14.5em;
 border-radius: 50%;
 background: #429a67;
 background: -webkit-radial-gradient(transparent 35%, #429a67 35%);
 background: -moz-radial-gradient(transparent 35%, #429a67 35%);
 background: radial-gradient(transparent 35%, #429a67 35%);
 color: #fff;
 text-align: center;
 text-decoration: none;
 font-size: 1.2em;
 line-height: 2;
 -webkit-transform: skew(-60deg) rotate(-75deg) scale(1);
 -moz-transform: skew(-60deg) rotate(-75deg) scale(1);
 -ms-transform: skew(-60deg) rotate(-75deg) scale(1);
 transform: skew(-60deg) rotate(-75deg) scale(1);
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 pointer-events: auto;
}

.csstransforms .cn-wrapper li a span {
  position: relative;
  top: 2.8em;
  display: block;
  font-size: .5em;
  text-transform: uppercase;
}

.csstransforms .cn-wrapper li a:hover,
.csstransforms .cn-wrapper li a:active,
.csstransforms .cn-wrapper li a:focus {
 background: -webkit-radial-gradient(transparent 35%, #449e6a 35%);
 background: -moz-radial-gradient(transparent 35%, #449e6a 35%);
 background: radial-gradient(transparent 35%, #449e6a 35%);
}
.csstransforms .cn-wrapper li a:focus {
    position: fixed; /* fix the displacement bug in webkit browsers when using tab key */
}

.csstransforms .opened-nav li {
 -webkit-transition: all .3s ease .3s;
 -moz-transition: all .3s ease .3s;
 transition: all .3s ease .3s;
}

.csstransforms .opened-nav li:first-child {
 -webkit-transform: rotate(-20deg) skew(60deg);
 -moz-transform: rotate(-20deg) skew(60deg);
 -ms-transform: rotate(-20deg) skew(60deg);
 transform: rotate(-20deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(2) {
 -webkit-transform: rotate(12deg) skew(60deg);
 -moz-transform: rotate(12deg) skew(60deg);
 -ms-transform: rotate(12deg) skew(60deg);
 transform: rotate(12deg) skew(60deg);
}

.csstransforms .opened-nav  li:nth-child(3) {
 -webkit-transform: rotate(44deg) skew(60deg);
 -moz-transform: rotate(44deg) skew(60deg);
 -ms-transform: rotate(44deg) skew(60deg);
 transform: rotate(44deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(4) {
 -webkit-transform: rotate(76deg) skew(60deg);
 -moz-transform: rotate(76deg) skew(60deg);
 -ms-transform: rotate(76deg) skew(60deg);
 transform: rotate(76deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(5) {
 -webkit-transform: rotate(108deg) skew(60deg);
 -moz-transform: rotate(108deg) skew(60deg);
 -ms-transform: rotate(108deg) skew(60deg);
 transform: rotate(108deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(6) {
 -webkit-transform: rotate(140deg) skew(60deg);
 -moz-transform: rotate(140deg) skew(60deg);
 -ms-transform: rotate(140deg) skew(60deg);
 transform: rotate(140deg) skew(60deg);
}

.csstransforms .opened-nav li:nth-child(7) {
 -webkit-transform: rotate(172deg) skew(60deg);
 -moz-transform: rotate(172deg) skew(60deg);
 -ms-transform: rotate(172deg) skew(60deg);
 transform: rotate(172deg) skew(60deg);
}

.no-csstransforms .cn-wrapper {
 overflow: hidden;
 margin: 10em auto;
 padding: .5em;
 text-align: center;
}

.no-csstransforms .cn-wrapper ul {
 display: inline-block;
}

.no-csstransforms .cn-wrapper li {
 float: left;
 width: 5em;
 height: 5em;
 background-color: #fff;
 text-align: center;
 font-size: 1em;
 line-height: 5em;
}

.no-csstransforms .cn-wrapper li a {
 display: block;
 width: 100%;
 height: 100%;
 color: inherit;
 text-decoration: none;
}

.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
 background-color: #f8f8f8;
}

.no-csstransforms .cn-wrapper li.active a{
 background-color: #6F325C;
 color: #fff;
}

.no-csstransforms .cn-button {
 display: none;
}

@media only screen and (max-width: 620px) {
 .no-csstransforms li {
  width: 4em;
  height: 4em;
  line-height: 4em;
 }
}

@media only screen and (max-width: 500px) {
 .no-ccstransforms .cn-wrapper {
  padding: .5em;
 }

 .no-csstransforms .cn-wrapper li {
  width: 4em;
  height: 4em;
  font-size: .9em;
  line-height: 4em;
 }
}

@media only screen and (max-width: 480px) {
 .csstransforms .cn-wrapper {
  font-size: .68em;
 }

 .cn-button {
  font-size: 1em;
 }
}

@media only screen and (max-width:420px) {
 .no-csstransforms .cn-wrapper li {
  width: 100%;
  height: 3em;
  line-height: 3em;
 }
}
4- الأن أضف هذا الكود داخل القالب في أي مكان تريده :
<div class='component'>
 <!-- Start Nav Structure -->
    <button class='cn-button' id='cn-button'>القائمة</button>
 <div class='cn-wrapper' id='cn-wrapper'>
  <ul>
   <li><a href='#'><span>اعرف أكثر</span></a></li>
   <li><a href='#'><span>أدوات</span></a></li>
   <li><a href='#'><span>مقالات</span></a></li>
   <li><a href='#'><span>خدمات</span></a></li>
   <li><a href='#'><span>إضافات</span></a></li>
   <li><a href='#'><span>اتصل بنا</span></a></li>
   <li><a href='#'><span>تابعنا</span></a></li>
  </ul>
 </div>
 <!-- End of Nav Structure -->
</div>
هكذا نكون قد ركبنا القائمة الأولى.
● القائمة الثانية :
1- سنبحث أيضا عن <head> ونضيف أسفله الكودين التاليين :
<link href='http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css' rel='stylesheet'/>
<script src='https://dl.dropboxusercontent.com/u/280199022/svg/modernizr-2.6.2.min.js'/>
2- ابحث عن </body> وأضف فوقه الكود التالي :
<script>
(function(){

 var button = document.getElementById(&#39;cn-button&#39;),
    wrapper = document.getElementById(&#39;cn-wrapper&#39;),
    overlay = document.getElementById(&#39;cn-overlay&#39;);

 //open and close menu when the button is clicked
 var open = false;
 button.addEventListener(&#39;click&#39;, handler, false);
 wrapper.addEventListener(&#39;click&#39;, cnhandle, false);

 function cnhandle(e){
  e.stopPropagation();
 }

 function handler(e){
  if (!e) var e = window.event;
   e.stopPropagation();//so that it doesn&#39;t trigger click event on document

    if(!open){
      openNav();
    }
   else{
      closeNav();
    }
 }
 function openNav(){
  open = true;
     button.innerHTML = &quot;-&quot;;
     classie.add(overlay, &#39;on-overlay&#39;);
     classie.add(wrapper, &#39;opened-nav&#39;);
 }
 function closeNav(){
  open = false;
  button.innerHTML = &quot;+&quot;;
  classie.remove(overlay, &#39;on-overlay&#39;);
  classie.remove(wrapper, &#39;opened-nav&#39;);
 }
 document.addEventListener(&#39;click&#39;, closeNav);

})();
    </script>
<script src='https://dl.dropboxusercontent.com/u/280199022/svg/polyfills.js'/>
3- ابحث عن ]]></b:skin> وأضف فوقه الكود التالي :
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}


.csstransforms .cn-wrapper {
  font-size: 1em;
  width: 26em;
  height: 26em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  bottom: -13em;
  left: 50%;
  border-radius: 50%;
  margin-left: -13em;
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  transform: scale(0.1);
  pointer-events: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
}

.csstransforms .opened-nav {
  border-radius: 50%;
  pointer-events: auto;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.cn-overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  z-index: 2;
}

.cn-overlay.on-overlay {
  visibility: visible;
  opacity: 1;
}

.cn-button {
  border: none;
  background: none;
  color: #f06060;
  text-align: center;
  font-size: 1.8em;
  padding-bottom: 1em;
  height: 3.5em;
  width: 3.5em;
  background-color: #fff;
  position: fixed;
  left: 50%;
  margin-left: -1.75em;
  bottom: -1.75em;
  border-radius: 50%;
  cursor: pointer;
  z-index: 11;
}

.cn-button:hover,
.cn-button:active,
.cn-button:focus {
  color: #aa1010;
}

.csstransforms .cn-wrapper li {
  position: absolute;
  font-size: 1.5em;
  width: 10em;
  height: 10em;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-top: -1.3em;
  margin-left: -10em;
  -webkit-transition: border .3s ease;
  -moz-transition: border .3s ease;
  transition: border .3s ease;
}

.csstransforms .cn-wrapper li a {
  display: block;
  font-size: 1.18em;
  height: 14.5em;
  width: 14.5em;
  position: absolute;
  bottom: -7.25em;
  right: -7.25em;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  padding-top: 1.8em;
  text-align: center;
  -webkit-transform: skew(-50deg) rotate(-70deg) scale(1);
  -ms-transform: skew(-50deg) rotate(-70deg) scale(1);
  -moz-transform: skew(-50deg) rotate(-70deg) scale(1);
  transform: skew(-50deg) rotate(-70deg) scale(1);
  -webkit-backface-visibility: hidden;
  -webkit-transition: opacity 0.3s, color 0.3s;
  -moz-transition: opacity 0.3s, color 0.3s;
  transition: opacity 0.3s, color 0.3s;
}

.csstransforms .cn-wrapper li a span {
  font-size: 1.1em;
  opacity: 0.7;
}

/* for a central angle x, the list items must be skewed by 90-x degrees
in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */

.csstransforms .cn-wrapper li:first-child {
  -webkit-transform: rotate(-10deg) skew(50deg);
  -ms-transform: rotate(-10deg) skew(50deg);
  -moz-transform: rotate(-10deg) skew(50deg);
  transform: rotate(-10deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(2) {
  -webkit-transform: rotate(30deg) skew(50deg);
  -ms-transform: rotate(30deg) skew(50deg);
  -moz-transform: rotate(30deg) skew(50deg);
  transform: rotate(30deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(3) {
  -webkit-transform: rotate(70deg) skew(50deg);
  -ms-transform: rotate(70deg) skew(50deg);
  -moz-transform: rotate(70deg) skew(50deg);
  transform: rotate(70deg) skew(50deg)
}

.csstransforms .cn-wrapper li:nth-child(4) {
  -webkit-transform: rotate(110deg) skew(50deg);
  -ms-transform: rotate(110deg) skew(50deg);
  -moz-transform: rotate(110deg) skew(50deg);
  transform: rotate(110deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(5) {
  -webkit-transform: rotate(150deg) skew(50deg);
  -ms-transform: rotate(150deg) skew(50deg);
  -moz-transform: rotate(150deg) skew(50deg);
  transform: rotate(150deg) skew(50deg);
}

.csstransforms .cn-wrapper li:nth-child(odd) a {
  background-color: #a11313;
  background-color: hsla(0, 88%, 63%, 1);
}

.csstransforms .cn-wrapper li:nth-child(even) a {
  background-color: #a61414;
  background-color: hsla(0, 88%, 65%, 1);
}

/* active style */
.csstransforms .cn-wrapper li.active a {
  background-color: #b31515;
  background-color: hsla(0, 88%, 70%, 1);
}


/* hover style */
.csstransforms .cn-wrapper li:not(.active) a:hover,
.csstransforms .cn-wrapper li:not(.active) a:active,
.csstransforms .cn-wrapper li:not(.active) a:focus {
  background-color: #b31515;
  background-color: hsla(0, 88%, 70%, 1);
}
.csstransforms .cn-wrapper li:not(.active) a:focus
{
    position:fixed;
}
 

/* fallback */
.no-csstransforms .cn-button {
  display: none;
}

.no-csstransforms .cn-wrapper li {
  position: static;
  float: left;
  font-size: 1em;
  height: 5em;
  width: 5em;
  background-color: #eee;
  text-align: center;
  line-height: 5em;
}

.no-csstransforms .cn-wrapper li a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  font-size: 1.3em;
  border-right: 1px solid #ddd;
}

.no-csstransforms .cn-wrapper li a:last-child {
  border: none;
}

.no-csstransforms .cn-wrapper li a:hover,
.no-csstransforms .cn-wrapper li a:active,
.no-csstransforms .cn-wrapper li a:focus {
  background-color: white;
}

.no-csstransforms .cn-wrapper li.active a {
  background-color: #6F325C;
  color: #fff;
}

.no-csstransforms .cn-wrapper {
  font-size: 1em;
  height: 5em;
  width: 25.15em;
  bottom: 0;
  margin-left: -12.5em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  left: 50%;
  border: 1px solid #ddd;
}

@media screen and (max-width:480px) {
  .csstransforms .cn-wrapper {
    font-size: .68em;
  }

  .cn-button {
    font-size: 1em;
  }

  .csstransforms .cn-wrapper li {
    font-size: 1.52em;
  }
}

@media screen and (max-width:320px) {
  .no-csstransforms .cn-wrapper {
    width: 15.15px;
    margin-left: -7.5em;
  }

  .no-csstransforms .cn-wrapper li {
    height: 3em;
    width: 3em;
  }
}
4- الأن أضف هذا الكود داخل القالب في أي مكان تريده :
<div class='component'>
 <!-- Start Nav Structure -->
 <button class='cn-button' id='cn-button'>+</button>
 <div class='cn-wrapper' id='cn-wrapper'>
  <ul>
   <li><a href='#'><span class='icon-picture'/></a></li>
   <li><a href='#'><span class='icon-headphones'/></a></li>
   <li><a href='#'><span class='icon-home'/></a></li>
   <li><a href='#'><span class='icon-facetime-video'/></a></li>
   <li><a href='#'><span class='icon-envelope-alt'/></a></li>
  </ul>
 </div>
<div class='cn-overlay' id='cn-overlay'/>
<!-- End Nav Structure -->
</div>
هكذا نكون قد ركبنا القائمة الثانية.
إلى هنا أحبتي انتها درسنا لهذا اليوم والذي قدمنا لكم من خلاله قائمتين احترافيتين تنبثقان على شكل دوائر بعد الضغط بالفأرة
أتمنى دعمنا بنشر الموضوع وشكرا
مرسلة بواسطة في
التسميات:

ليست هناك تعليقات:

إرسال تعليق

الاشتراك في: تعليقات الرسالة (Atom)