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

**Admin** · **Admin** الإثنين أغسطس 10, 2015 10:57 am

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

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

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

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

التسجيل

تسجيل الدخول