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


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

شاطر

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


Time Online :
1d 20h 25m 49s

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

تاريخ التسجيل :
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 معطلة