الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
أ
شارككم قائمة جانبية إحترافية بتصميم نقي بــ Css خفيفة وقليلة الأكواد هذه القائمة تتمركز بشكل ثابت في الأعلى أقصى اليمين ، بمجرد مرور الماوس عليها تفتح مع زر الإخفاء عند فتح القائمة يتمركز في الأعلى أقصى اليسار ، ستخدم هذه الإضافة للذين لا يتوفرون على قائمة علوية يمكنهم الإستعانة بها لعرض أقسامهم الخاصة سأقدم لكم الأكواد مع مساعدتكم في تركيبها لمن واجه أي مشكل فليقدمه في صندوق التعليقات
شارككم قائمة جانبية إحترافية بتصميم نقي بــ Css خفيفة وقليلة الأكواد هذه القائمة تتمركز بشكل ثابت في الأعلى أقصى اليمين ، بمجرد مرور الماوس عليها تفتح مع زر الإخفاء عند فتح القائمة يتمركز في الأعلى أقصى اليسار ، ستخدم هذه الإضافة للذين لا يتوفرون على قائمة علوية يمكنهم الإستعانة بها لعرض أقسامهم الخاصة سأقدم لكم الأكواد مع مساعدتكم في تركيبها لمن واجه أي مشكل فليقدمه في صندوق التعليقات
معاينة القائمة
أكواد Css
* تضع فوق ]]></b:skin> أو فوق <head/> بإضافة الوسم <style> <style/>
/* Slide Menu Hm*/
.menu-outer:hover ~ .menu-close {
margin-right:-100px;
}
.menu-outer:hover .bar { background:rgba(100,200,240,.9); }
.menu-outer > nav ul { top:15%; }
.menu-outer {
overflow: hidden;
position: fixed;
top: 0;
font-family: 'Montserrat', serif;
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: rgba(255,255,255,.8);
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: rgba(255,255,255,1);
}
@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);
}
أكواد HTML
* توضع بمكان الذي تراه مناسب داخل القالب ما بين <body>
<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>
</ul>
</nav>
</div>
<a class="menu-close" onClick="return true">
<div class="menu-icon">
<div class="bar"></div>
<div class="bar"></div>
</div>
</a>
ملحوظة:
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
اخي انا عندي مشكلة كيف تجعل الصور تظهر في المشاركات الشائعة ان الصور لاتظهر
ردحذفحتى من ادخل اي لوحة التحكم وانا ناشر مواضيع لاتظهر الصورة هل المشكلة من الخلاصة
اخى اين اضع الكود الثانى تحديدا
ردحذفممكن طلب صغير ؟
ردحذفالقالب الذي تعاين عليه هذه القائمه يعجبني جداً
ممكن ترفعه على مركز الخليج و تنشره ؟
القالب غير مكتمل
حذفلا يهمني انا اريده فقط كما هو
حذفإذا سمحت
اترك بريدك الإلكتروني وسأرسله لك
حذفأخي حسام ممكن أنا أيضا ذلك القالب أرجوك ولك جزيل الشكر
حذفmabdelmorite@gmail.com
اخي انا عندي مشكلة في الخلاصة يقول لي هكذا
ردحذفYour feed filesize is larger than 650K. You need to reduce its size in order for FeedBurner to process it. Tips for controlling feed file size with Blogger can be found in Tech Tips on FeedBurner Forums, our support site.
ارجوا الحل بسرعة من الاصدقاء والكاتب او المدونين ارجوكم الحل بسرعة
هل لديك حساب في FeedBunner قديم أم غير لديك
حذفأزال المؤلف هذا التعليق.
ردحذفنعم قد تظهر بشكل جيد لكن كل واح واختياره وإختيارك في محله ويمكن تطبيقة إذهب إلى قالبك ثم ابحث عن nav li a ستجد display:block; غير block بــ inline ثم اضف اسفل nav li a هذا الكود line-height: 3; ستجد في السطور اسفل قليلا ابحث عن هذا الكود nav li a:hover { غير الكود الذي أسفلها بهاته الأكواد
حذفdisplay: inline;
color: #666;
font-weight: 400;
background: #fff;
padding: 10px 20px;
border-radius: 3px;
انتهى غير للون الإطار وهو #fff ولون الكلمات #666
قالب حدود مافيهوش ?????
ردحذفعندي مشكلة عند اغلاق اي لا توجد زر الاغلاق القائمة
ردحذفلا يوجد بها زر الإغلاق، تغلق فقط عند إبتعاد الماوس
ردحذفاخي اريده اسفل ايامين ما هوا تغير في كود
ردحذفانا كنت عايز ازي اضايف قائمه علويه افقه مثل بتاعتك =D
ردحذفستكون هناك قائمات آخرى
حذفحسنا لكن اريد قائمه ارجوك في اسرع وقت
ردحذفتفضل هذه: http://www.ar1web.com/2014/09/pure-css3-mega-dropdown-menu.html
حذف