اضافة قائمة لصفحات المدونة منبثقة وبشكل مميز

غير معرف

13 أكتوبر 2022

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

اضافة قائمة لصفحات المدونة منبثقة وبشكل مميز

الاضافة فى طياتها سهلة التركيب

وهى اضافة جذابة للجميع

يمكن التعديل على حجم الخطوط

والتعديل على الالوان

الاضافة مكونة من اكواد HTML و اكواد CSS فقط اي هي خفيفة على الموقع الخاص بك , كما ان طريقة التركيب الخاص بها سهلة جدا تتم فقط عبر نقل الاكواد التى ساقدمها لكم ووضعها فى اضافة جديدة HTML/JAVA من داخل التخطيط و تبقى عليك فقط تغيير اسماء الصفحات الخاصة بالاضافة باسماء صفحاتك او اقسامك او اي روابط تريد وضعها , مع اضافة الروابط الخاص بتلك الصفحات و بعدها يبقى عليك الحفظ و انتهينا

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

لا اطيل عليكم طريقة التركيب

هو أخذ الكود اللاحق ثم فتح تخطيط وبعدها اضافة جافا جديدة ثم تضع الكود فى اى مكان .

الكود

<div class="menu-outer">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
    <nav>
        <ul>
           <li><a href="/">الرئيسية</a></li>
<li><a href="#">الصفحة الاولى</a></li> 
           <li><a href="#">الصفحة الثانية</a></li>
            <li><a href="#">الصفحة الثالثة</a></li>
<li><a href="#">الصفحة الرابعة</a></li> 
<li><a href="#">الصفحة الخامسة</a></li> 
<li><a href="#">لاصفحة السادسة</a></li> 
       </ul>
   </nav>
</div>
<a class="menu-close" onclick="return true">
    <div class="menu-icon">
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
</a>
<style>
/* Stuff I added */
.menu-outer:hover ~ .menu-close {
  margin-right:-100px;
background-color:#444;
}
.menu-outer:hover .bar { background:rgba(100,200,240,.9); }
.menu-outer > nav ul { top:5%; }
.menu-outer {
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 998;  
  width: 100%;
  left: 100%;
  margin-left: -100px;
  height: 200%;
  background: rgba(100,200,240,.9);  
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s; 
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-outer:hover {
  background: rgba(100,200,240,.98);
  left: 0;
  margin-left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.menu-icon {
  z-index: 999;
  position: absolute;
  top: 58px;
  left: 15px;
  width: 30px;
  pointer-events: none;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-icon .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  margin: 0 0 5px;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > .menu-icon {
  opacity: 0;
}
nav ul {
  position:absolute;
  width:100%;
  padding: 0;
  left: 10%;; /*prevents possible click when not oppened*/
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
}
.menu-outer:hover > nav ul {
  left: 0;
}
nav li {
  list-style:none;
  text-align: center;
  text-transform: uppercase;

}
nav li a {
  font-size: 2em;
  color: #fff;
  text-decoration: none;
  margin: 0 auto;
  padding: 20px;
  display:block;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;

}
nav li a:hover {
  color:#fafafa;
  text-decoration:none;
}
@media screen and (max-width: 600px), screen and (max-height: 600px) {
  nav ul {font-size:.75em;}
  nav ul a {padding: 10px;}
}
.menu-close {
  z-index: 9999;
  position: fixed;
  top: 0;
  right: 100%;
  width: 200px;
  height: 200px;
  background: rgba(250,130,70,1);
  cursor: pointer;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s;
  -ms-transition: all ease .5s;
  -o-transition: all ease .5s;
  transition: all ease .5s;
  -webkit-transform-origin: top right;
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -o-transform-origin: top right;
  transform-origin: top right;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .menu-icon {
  right: 15px; left: auto;top: 68px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-close .bar {
  background: rgba(250,250,250,1);
  width: 100%;
  height: 5px;
  position:absolute;
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}
.menu-close .bar:first-child {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.menu-close .bar:last-child {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
</style>

نتمنى ان نكون عند حسن ظنكم وان نتشرف بوجودكم الكريم على مدونتنا مجلة الأستاذ على للمنوعات .

ونحن حريصون دائما ان نقدم لكم كل ماهو جديد من اضافات بلوجر المفيدة .

وقوالب بلوجر المميزة التى تمتاز بالسرعة والانسيابية .

كما ان مدونتنا تحتوى على مواضيع متنوعة مثل العلوم والمشاريع والصحة .

كم يمكنكم تحميل الكود من اسفل

معاينة اضغط هنا تحميل اضغط هنا

واخيرمع اضافات جديدة لبلوجر

نشكر تواجدكم الكريم معنا

شاهد ايضا

الكلمات المفتاحية :

مجلة الأستاذة شمس للمنوعــات

القائمة الرئيسية

الصفحات

أخر الأخبار [LastPost]

اضافة قائمة لصفحات المدونة منبثقة وبشكل مميز

اضافة قائمة لصفحات المدونة منبثقة وبشكل مميز

الكود

شاهد ايضا

أخر المواضيع من قسم : اضافات

تعليقات

إرسال تعليق

مجلة بسيطة في الشكل لكنها متميزه وخفيفة في محتواها وأفكارها مفيدة. تخاطب الجميع