المواضيع الأخيرة
» كود وضع حقوق نصية اسفل المنتدى لمصممي الاستايلات
من طرف Admin الخميس يناير 04, 2018 2:38 pm

» [ Css ] حصرى كود css وضع صورة بجانب المجموعات
من طرف Admin الخميس يناير 04, 2018 2:35 pm

» جميع القنوات المجانية والمشفرة بين يديك وبأنترنت ضعيفة
من طرف Admin الثلاثاء نوفمبر 28, 2017 8:10 am

» افضل تطبيق اندرويد يمكن استخدامه للمراقبة والتجسس
من طرف Admin الجمعة أكتوبر 13, 2017 10:35 pm

» تطبيق KMPlayer Pro 2.1.0 المدفوع للاندرويد [اخر اصدار]
من طرف Admin الأربعاء نوفمبر 02, 2016 6:53 pm

» تطبيق MX Player Pro v1.8.9 المدفوع افضل برنامج مشاهده فديوهات وتنزيل ترجمه الافلام ايضا للاندرويد [اخر اصدار]
من طرف Admin الأربعاء نوفمبر 02, 2016 6:10 pm

» تطبيق مسجل الفيديو السري Secret Video Recorder Pro v1.2.3.0 مجانا للاندرويد
من طرف Admin الخميس أكتوبر 20, 2016 8:16 am

» تطبيق تسريع الهاتف Phone Speed Booster Pro v1.5 مدفوع مجانا للاندرويد
من طرف Admin الخميس أكتوبر 20, 2016 8:15 am

» تطبيق Photo Mate R2 v4.2.3 للتعديل الصور مدفوع مجانا للاندرويد
من طرف Admin الخميس أكتوبر 20, 2016 8:11 am

» تطبيق Chrooma Keyboard - Emoji PRO v3.0.1 مدفوع مجانا للاندرويد
من طرف Admin الخميس أكتوبر 20, 2016 8:10 am

» تطبيق Floating Apps (multitasking) v3.6.8 مدفوع مجانا للاندرويد
من طرف Admin الخميس أكتوبر 20, 2016 8:09 am

» تطبيق Retrica Pro v3.4.1 للانشاء تاثيرات رائعة على صورك النسخة المدفوعة مجانا للاندرويد
من طرف Admin الخميس أكتوبر 20, 2016 8:08 am

» تطبيق تحرير النصوص VLk Text Editor PRO v1.8.5 النسخة المدفوعة مجانا للاندرويد
من طرف Admin الخميس أكتوبر 20, 2016 8:07 am

» تطبيق Adobe Photoshop Express Premium v3.1.42 لمعالجة الصور النسخة المدفوعة للاندرويد
من طرف Admin الخميس أكتوبر 20, 2016 8:06 am

» تطبيق تحرير الصوت Voice PRO - HQ Audio Editor v3.3.16 النسخة المدفوعة مجانا للاندرويد
من طرف Admin الخميس أكتوبر 20, 2016 8:05 am

تحميل جي بي واتساب 4.05 و واتساب بلس بميزة ترجمة الرسائل – تحديث

الأربعاء فبراير 24, 2016 8:21 am من طرف Admin

[url=http://arabitechnomedia.com/wp-content/uploads/2016/02/Untitled-1-3.jpg][img(696px,348px):10bf]…[/img(696px,348px):10bf]


تعاليق: 1



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

استعرض الموضوع التالي استعرض الموضوع السابق اذهب الى الأسفل

Admin
Admin
Admin
Time Online : 1d 20h 25m 49s
عدد المساهمات : 279
تاريخ التسجيل : 04/07/2011
https://hossam123.mam9.com

مُساهمةAdmin الإثنين أغسطس 10, 2015 10:57 am

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

أ
شارككم قائمة جانبية إحترافية بتصميم نقي بــ 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>

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة

للمشاركة انت بحاجه الى تسجيل الدخول او التسجيل

يجب ان تعرف نفسك بتسجيل الدخول او بالاشتراك معنا للمشاركة

التسجيل

انضم الينا لن يستغرق منك الا ثوانى معدودة!


أنشئ حساب جديد

تسجيل الدخول

ليس لديك عضويه ؟ بضع ثوانى فقط لتسجيل حساب


تسجيل الدخول

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