hossam123

hossam

المواضيع الأخيرة
» كود وضع حقوق نصية اسفل المنتدى لمصممي الاستايلات
من طرف 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

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

قائمتين جانبيتين خفيفتين Empty قائمتين جانبيتين خفيفتين

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

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

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

القائمة الأولى  القائمة الثانية

شرح طريقة التركيب 


* الكود التالي خاص بالأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته


ضعه فوق </head>

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>


* بإمكانك وضع القائمة بداخل أداة Html/Javascript أو بداخل القالب فوق </body>


القائمة الأولى


إضغط مرتيين لنسخ الكود
الكود:
<style>
#RLMenu{
width: 240px;
height: 100%;
position: fixed;
}
.RLMenu-left{
right: -180px;
top: 0px;
transition:right 1s;
}
.RLMenu-left:hover{
right:0px;
}
/*################## RIGHT MENU ##############*/
.RLMenu-right{
right: -180px;
top: 0px;
direction: rtl;
transition:right 1s;
}
.RLMenu-right ul>li i,#toggle{
right: 200px;
}
.RLMenu-right:hover{
right:0px;
}
#menuHeader{
width: 100%;
height: 60px;
cursor: pointer;
}
#toggle{
position: absolute;
right: 195px;
top: 10px;
}
#menuLogo{
position: absolute;
top: 10px;
left:70px;
}
#RLMenu ul>li{
position: relative;
height: 45px;
width: 100%;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
list-style: none;
}
#RLMenu ul>li a{
color: #fff;
line-height: 48px;
margin: 50px;
font-family: ge_ss_threeregular;
transition: color 0.5s;
text-decoration: none;
}
#RLMenu ul>li i{
position: absolute;
right: 200px;
top:15px;
color: rgba(255, 255, 255, 0.3);
transition: color 0.5s;
}
#social{
width: 85%;
height: 100px;
margin: 20px 23px;
}
#social a{
text-decoration: none;
}
#social i{
width: 36px;
height: 36px;
color: #fff;
text-align: center;
line-height: 37px;
border: 1px solid rgba(255, 255, 255, 0.03);
transition: background 0.5s;
}
.define h3:hover{
color#169aff;
border-top:3px solid #169aff;
border-bottom:3px solid #169aff;
}
.define h3{
text-transform: uppercase;
text-align:center;
}
#social .fa-facebook:hover{
background: #305891;
}
#social .fa-twitter:hover{
background: #2CA8D2;
}
#social .fa-youtube:hover{
background: #C82828;
}
#social .fa-google-plus:hover{
background: #CE4D39;
}
#RLMenu{
background: #222222;
z-index:999;
color: #fff;
}
#menuHeader{
background: #24AAE9;
}
#RLMenu ul>li:hover  a{
color: #24AAE9;
}
#RLMenu ul>li:hover  i{
color: #24AAE9;
}
</style>

<div class='RLMenu-left' id='RLMenu'>
<div id='menuHeader'>
<div id='toggle'><i class='fa fa-bars fa-2x'/></i></div>
<div id='menuLogo'><img alt='RLMenu' src='http://2.bp.blogspot.com/-6DhIhl_df80/VC6PTqe90yI/AAAAAAAAGOw/Cfx8fQm-IcM/s1600/hereyourlogo.png'/></div>
</div>
<nav>
<ul>
<li>
<a href='#'>
    الرئيسية <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='#'>
    من أنا <i class='fa fa-user'/>
</i></a>
</li>
<li>
<a href='#'>
    سياسة الإستخدام <i class='fa fa-users'/>
</i></a>
</li>
<li>
<a href='#'>
    المتجر <i class='fa fa-shopping-cart'/>
</i></a>
</li>
<li>
<a href='#'>
    أخبار التكنلوجيا <i class='fa fa-file'/>
</i></a>
</li>
<li>
<a href='#'>
    خدماتي <i class='fa fa-laptop'/>
</i></a>
</li>
<li>
<a href='#'>
    المدونة <i class='fa fa-home'/>
</i></a>
</li>
<li>
<a href='#'>
    فريق العمل <i class='fa fa-group'/>
</i></a>
</li>
<li>
<a href='#'>
    مقالات <i class='fa fa-folder'/>
</i></a>
</li>
<li>
<a href='#'>
    راسلني<i class='fa fa-envelope'/>
</i></a>
</li>
</ul>
</nav>
<div id='social'>
<a href='#'>
<i class='fa fa-facebook fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-google-plus fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-twitter fa-2x'/>
</i></a>
<a href='#'>
<i class='fa fa-youtube fa-2x'/>
</i></a>
</div>
</div>

* المحدد باللون الأصفر غيره برابط صورة اللوجو
* المحدد باللون الأحمر خاص بالروابط


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

الكود:
<style>
/*
 * ----------- www.ar1web.com -------------- *
 */
     

        .menu-btn {background: #0AF url(http://3.bp.blogspot.com/-PnkPIBXqRUc/VC6SAvSFRpI/AAAAAAAAGPA/VNtUpvoS6WY/s1600/icon_slidetoggle-menus.png) no-repeat center center;
                  width: 30px;
                  height: 30px;
                  padding: 4px;
                  position: fixed;
                  top: 25px;
                  right: 25px;
                  z-index: 99999;
                  text-indent: -900px;
                  overflow: hidden;}
    #menu-ar1web a{text-decoration: none;
                  color: #FFF;
                  font-family: ge_ss_threeregular;
                  font-size: 20px;
                  font-weight: bold;}
      #menu-ar1web{position: fixed;
                  top:0;
                  bottom: 0;
                  right:0;
                  background: #444;
                  color:#fff;
                  height: 100%;
                  width:250px;
                  padding: 0 25px 0 25px;
                  z-index: 999;
                  overflow: auto;}
        .ar1web-2 {background: #0AF;
                  width: 30px;
                  height: 30px;
                  padding: 4px;
                  position: fixed;
                  top: 25px;
                  right: 25px;
                  z-index: 99999;
                  overflow: hidden;
                  text-align: center;
                  line-height: 28px;}
    .title-ar1web {color: #888;
                  font: normal 18px ge_ss_threeregular;
                  text-align: right;
                  border-bottom: 1px solid #0AF;
                  float: right;
                  position: relative;
                  top: 26px;
                  right: 38px;
                  line-height: 28px;
                  display: block;
                  padding-bottom: 8px;
                  padding: 0 12px 8px 93px;}
  .menu-a-ar1web {color: #EEE;
                  text-align: right;
                  font: normal 17px ge_ss_threeregular;
                  margin: 13px 0;
                  display: block;
                  transition: all .5s;}
.like-box-ar1web { position: fixed;
                  background: #444;
                  bottom: 0;
                  top: auto;
                  right: 0;
                  left: auto;
                  padding: 0 25px;
                  width: 250px;}
.menu-ul-ar1web {  float:right; width: 100%;}
.menu-li-ar1web {  list-style: none;}
.ar1web-1 , .ar1web-2 {cursor: pointer}
#menu-ar1web , .ar1web-2 {display: none;}
.menu-li-ar1web:hover .menu-a-ar1web {color:#0AF!important;}
</style>
 <a class='menu-btn ar1web-1'></a>
 <div id='menu-ar1web' class='menu-ar1web ar1web.com'>
 <a class="ar1web-2">x</a>
 <h2 class='title-ar1web'>اقسام الموقع</h2>
 <br/><br/><br/>
 <ul class='menu-ul-ar1web ar1web.com'>
 <li class='menu-li-ar1web ar1web.com'><a href='http://www.ar1web.com' class='menu-a-ar1web ar1web.com'>الصفحة الرئيسية</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>اعمالنا</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>عملائنا</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>اتصل بنا</a></li>
 <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>تابعنا على الفيسبوك</a></li> <li class='menu-li-ar1web ar1web.com'><a href='#' class='menu-a-ar1web ar1web.com'>تابعنا على جوجل +</a></li>
 </ul>
 <!-- like box -->
 <div class='like-box-ar1web' id='ar1web.com'>
 <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Farabe1web&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
 </div></div>
 <!-- script -->
 <script>
 $(".ar1web-1").click(function(){
 $(".ar1web-2,#menu-ar1web").fadeIn(500)
 $(".ar1web-1").fadeOut(500)
 });
 $(".ar1web-2").click(function(){
 $("#menu-ar1web,.ar1web-2").fadeOut(500)
 $(".ar1web-1").fadeIn(500)
 });
 </script>
* المحدد باللون الأصفر غيره بإسم صفحتك
* المحدد باللون الأحمر خاص بالروابط
إنتهينا كل ماتبقى لك أن تخصص اسماء والروابط لتستمتع بقائمتك الجديدة أي مشكل نحن في الخدمة

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

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

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

التسجيل

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


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

تسجيل الدخول

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


تسجيل الدخول

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

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى
©phpBB | Ahlamontada.com | منتدى مجاني للدعم و المساعدة | التبليغ عن محتوى مخالف | ملفات تعريف الارتباط التابعة لجهات خارجية | آخر المواضيع