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



آخـر المواضيع المضافة
شارك اصدقائك شارك اصدقائك كود وضع حقوق نصية اسفل المنتدى لمصممي الاستايلات
شارك اصدقائك شارك اصدقائك [ Css ] حصرى كود css وضع صورة بجانب المجموعات
شارك اصدقائك شارك اصدقائك جميع القنوات المجانية والمشفرة بين يديك وبأنترنت ضعيفة
شارك اصدقائك شارك اصدقائك افضل تطبيق اندرويد يمكن استخدامه للمراقبة والتجسس
شارك اصدقائك شارك اصدقائك تطبيق KMPlayer Pro 2.1.0 المدفوع للاندرويد [اخر اصدار]
شارك اصدقائك شارك اصدقائك تطبيق MX Player Pro v1.8.9 المدفوع افضل برنامج مشاهده فديوهات وتنزيل ترجمه الافلام ايضا للاندرويد [اخر اصدار]
شارك اصدقائك شارك اصدقائك تطبيق مسجل الفيديو السري Secret Video Recorder Pro v1.2.3.0 مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق تسريع الهاتف Phone Speed Booster Pro v1.5 مدفوع مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق Photo Mate R2 v4.2.3 للتعديل الصور مدفوع مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق Chrooma Keyboard - Emoji PRO v3.0.1 مدفوع مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق Floating Apps (multitasking) v3.6.8 مدفوع مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق Retrica Pro v3.4.1 للانشاء تاثيرات رائعة على صورك النسخة المدفوعة مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق تحرير النصوص VLk Text Editor PRO v1.8.5 النسخة المدفوعة مجانا للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق Adobe Photoshop Express Premium v3.1.42 لمعالجة الصور النسخة المدفوعة للاندرويد
شارك اصدقائك شارك اصدقائك تطبيق تحرير الصوت Voice PRO - HQ Audio Editor v3.3.16 النسخة المدفوعة مجانا للاندرويد
الخميس يناير 04, 2018 2:38 pm
الخميس يناير 04, 2018 2:35 pm
الثلاثاء نوفمبر 28, 2017 8:10 am
الجمعة أكتوبر 13, 2017 10:35 pm
الأربعاء نوفمبر 02, 2016 6:53 pm
الأربعاء نوفمبر 02, 2016 6:10 pm
الخميس أكتوبر 20, 2016 8:16 am
الخميس أكتوبر 20, 2016 8:15 am
الخميس أكتوبر 20, 2016 8:11 am
الخميس أكتوبر 20, 2016 8:10 am
الخميس أكتوبر 20, 2016 8:09 am
الخميس أكتوبر 20, 2016 8:08 am
الخميس أكتوبر 20, 2016 8:07 am
الخميس أكتوبر 20, 2016 8:06 am
الخميس أكتوبر 20, 2016 8:05 am
 

أضف إهدائك

Admin قال تحميل جي بي واتساب 4.05 و واتساب بلس بميزة ترجمة الرسائل – تحديث
الأربعاء فبراير 24, 2016 8:21 am ...
:
[url=http://arabitechnomedia.com/wp-content/uploads/2016/02/Untitled-1-3.jpg][img(696px,348px):10bf]…[/img(696px,348px):10bf]
يجب تسجيل الدخول لنشر الرسائل
اسم الدخول:كلمة السر:
قم بتسجيلي تلقائيا كل:

:: نسيت كلمة السر


hossam123 :: دعم منتديات احلى منتدى :: اكواد CSS

شاطر

رقم المشاركة : [ 1 ]
قديمالإثنين أغسطس 10, 2015 10:57 am
Admin
Admin
avatar


Time Online :
1d 20h 25m 49s

عدد المساهمات :
279

تاريخ التسجيل :
04/07/2011

الماجيك مسعد will become famous soon enoughالماجيك مسعد will become famous soon enough
غير متواجد
مُساهمةموضوع: قائمة جانبية مميزة بتصميم Css


قائمة جانبية مميزة بتصميم Css



أ
شارككم قائمة جانبية إحترافية بتصميم نقي بــ Css  خفيفة وقليلة الأكواد هذه القائمة تتمركز بشكل ثابت في الأعلى أقصى اليمين ، بمجرد مرور الماوس عليها تفتح مع زر الإخفاء عند فتح القائمة يتمركز في الأعلى أقصى اليسار ، ستخدم هذه الإضافة للذين لا يتوفرون على قائمة علوية يمكنهم الإستعانة بها لعرض أقسامهم الخاصة سأقدم لكم الأكواد مع مساعدتكم في تركيبها لمن واجه أي مشكل فليقدمه في صندوق التعليقات

معاينة القائمة


أكواد Css

* تضع فوق ]]></b:skin> أو فوق <head/> بإضافة الوسم <style> <style/>





الكود:

[left][size=12]/* 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);
}
[/size][/left]



أكواد 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>











الــرد الســـريـع
..




الذين يشاهدون محتوى الموضوع الآن : 20 ( الأعضاء 3 والزوار 17)




تعليمات المشاركة
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة





Powered by vBulletin® Copyright ©2000 - 2015, Jelsoft Enterprises Ltd. Designed & TranZ By Almuhajir