إضافة قائمة منسدلة رأسية متعددة الإستخدامات كأداة بتخطيط مدونتك

عدد مشاهدات الموضوع:
إضافة قائمة منسدلة كأداة بمدونتك شىء رائع بالفعل, فإذا كانت مدونتك بها أقسام أو سلسلة مقالات تريد وضعها بأداة واحدة بطريقة منظمة كأرشيف مثلا فعليك تطبيق الشرح التالى لتحصل على قائمة منسدلة رائعة بمدونتك سواء كأداة أو تضمينها بداخل موضوع ما تقوم بنشره على مدونتك. ولكن قبل أن تشرع بتطبيق الشرح يمكنك معاينة الإضافة أولا.

معاينة

بعد معاينتك للإضافة الرائعة وتريد أن تستثمرها بمدونتك أو بأحد موضوعات مدونتك الرائعة والهادفة تفضل معى بتطبيق الخطوات التالية.
1- توجه الى لوحة التحكم لمدونتك عبر الرابط www,blogger.com واختر قالب Template ثم تعديل HTML 
2- ابحث عن كود ]]></b:skin> ولتبسيط طريقة الحصول على ذلك الكود يمكنك متابعة الفيديو التالى
3- قم بوضع كود CSS التالى أعلى ]]></b:skin> مباشرة
.cd-accordion-menu {
  width: 90%;
  max-width: 600px;
  background: #4d5158;
  margin: 4em auto;
  box-shadow: 0 4px 40px #70ac76;
}
.cd-accordion-menu ul {
  /* by default hide all sub menus */
  display: none;
}
.cd-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cd-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
  position: relative;
  display: block;
  padding: 18px 18px 18px 64px;
  background: #4d5158;
  box-shadow: inset 0 -1px #555960;
  color: #ffffff;
  font-size: 1.6rem;
}
.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {
  background: #52565d;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu label {
  cursor: pointer;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after {
  background-image: url(http://mybloggerlab.com/Images/cd-icons.svg);
  background-repeat: no-repeat;
}
.cd-accordion-menu label::before {
  /* arrow icon */
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}
.cd-accordion-menu label::after {
  /* folder icons */
  left: 41px;
  background-position: -16px 0;
}
.cd-accordion-menu a::after {
  /* image icon */
  left: 36px;
  background: url(http://mybloggerlab.com/Images/cd-icons.svg) no-repeat -48px 0;
}
.cd-accordion-menu input[type=checkbox]:checked + label::before {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu input[type=checkbox]:checked + label::after {
  /* show open folder icon if item is checked */
  background-position: -32px 0;
}
.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: block;
}
.cd-accordion-menu ul label,
.cd-accordion-menu ul a {
  background: #35383d;
  box-shadow: inset 0 -1px #41444a;
  padding-left: 82px;
}
.no-touch .cd-accordion-menu ul label:hover, .no-touch
.cd-accordion-menu ul a:hover {
  background: #3c3f45;
}
.cd-accordion-menu > li:last-of-type > label,
.cd-accordion-menu > li:last-of-type > a,
.cd-accordion-menu > li > ul > li:last-of-type label,
.cd-accordion-menu > li > ul > li:last-of-type a {
  box-shadow: none;
}
.cd-accordion-menu ul label::before {
  left: 36px;
}
.cd-accordion-menu ul label::after,
.cd-accordion-menu ul a::after {
  left: 59px;
}
.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
  padding-left: 100px;
}
.cd-accordion-menu ul ul label::before {
  left: 54px;
}
.cd-accordion-menu ul ul label::after,
.cd-accordion-menu ul ul a::after {
  left: 77px;
}
.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
  padding-left: 118px;
}
.cd-accordion-menu ul ul ul label::before {
  left: 72px;
}
.cd-accordion-menu ul ul ul label::after,
.cd-accordion-menu ul ul ul a::after {
  left: 95px;
}
.cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

4- توجه الى تخطيط Layout ثم قم بإضافة أداة Gadget جافا سكريبت JavaScript جديدة بالمكان الذى تريده عن طريق نسخ الكود التالى ووضعه بداخلها.
<ul class="cd-accordion-menu">
<li class="has-children">
<input type="checkbox" name="group-1" id="group-1" checked />
<label for="group-1">القائمة الأولى</label>

 <ul>
 <li class="has-children">
 <input type="checkbox" name="sub-group-1" id="sub-group-1" />
<label for="sub-group-1">قائمة فرعية</label>

<ul>
<li><a href="رابط">عنوان</a></li>
<li><a href="رابط">عنوان</a></li>
<li><a href="رابط">عنوان</a></li>
</ul>
</li>
<li><a href="رابط">عنوان</a></li>
<li><a href="رابط">عنوان</a></li>
</ul>
</li>

<li><a href="رابط">عنوان</a></li>
<li><a href="رابط">عنوان</a></li>
</ul> <!-- cd-accordion-menu -->
5- قم بحفظ الأداة بعد التعديل عليها بالعناويين الفرعية الذي تريدها وكذلك مكان الرابط الذى تريد توجيه الزائر اليه بعد الضغط على العنوان. ولا تنسى أنه يمكنك استخدام الكود السابق بوضعه فى أى موضوع يمكنك إنشائه وستظهر الاداة داخل الموضوع كما بالمعاينة السابقة.
شكرا لفريق The Editorial Team من مدونة Mybloggerlab لمشاركة الأداة بمدونتهم. ونتمنى إن كان هناك أى تساؤل حول الإضافة أو هناك أى مشكلة بالشرح مراسلتنا عبر التعليقات. ويمكنك مشاركة الموضوع مع كل مهتم من أصدقائك. شكرا لكم.

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

  1. شكرا يا ابو اياد
    .
    .
    .
    http://www.be-professionall.com/

    ردحذف
  2. شكرا ابو اياد على الموضوع المحترم
    http://www.mycareersnow.com/

    ردحذف
  3. ماشاء الله جميل جدا

    ردحذف

  4. شكرا على الموضوع الرائع..
    .
    ............................
    هارتزي مدونة تعليمية ثقافية تسعى لنشر ثقافة الويب العربي ..

    http://www.hartzy.net/blog/

    ردحذف
  5. شكرا لك أخى :)

    http://elmo7trfiin-web.blogspot.com/

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية