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

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

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

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

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

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

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

الاضافة مكونة من اكواد 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>

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

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

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

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

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

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

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

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

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

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

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

الكود

شاهد ايضا

إرسال تعليق

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

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

الكود

شاهد ايضا

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

إرسال تعليق

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