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

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

يوجد الآن مشاهدة التعليقات : 31

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

معكم من جديد إخواني اخواتي الأعزاء موضوع اليوم يقتصر على قائمتيين جانبيتين خفيفتين وبمميزات خفيفة أيضا كلها بتصميم Css لن تضر بمدونتك ستنفعك إذا كنت تتوفر على أقسام كثيرة بموقعك مع هاته القوائم ستحل المشكلة أيضا لن تأخذ مكان واسع ولن تشوه منظر الموقع على العكس وكل هذا ستراه بنفسك في المعاينة أما فيما يخص التركيب فلقد سهلت لكم طريقة تركيبها ندخل للمعاينة أولا
شرح طريقة التركيب
1. الكود التالي خاص بالأيقونات إذا كنت تتوفر عليه فلا داعي لإضافته ضعه فوق </head>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>
2. بإمكانك وضع القائمة بداخل أداة 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>
* المحدد باللون البرتقالي غيره بإسم صفحتك
* المحدد باللون الأحمر خاص بالروابط
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 31 تعليقًا:

  1. أزال المؤلف هذا التعليق.

    ردحذف
  2. رووووووعة استمر

    ردحذف
  3. مشكوووووووووور أخي وكل عام وانت بخير

    ردحذف
    الردود
    1. علينا وعليك والأمة الإسلامية بألف خير
      أسعدني مرورك .

      حذف
    2. ينعاد عليك بالف خير

      حذف
    3. اخي بعد ان جربتها لم تعمل وهذه صورة للتوضيح
      http://im78.gulfup.com/6U1NK7.png
      عملتها بداخل القالب فوق body

      حذف
    4. أضف </div> قبل </body>
      إذا مازال يظهر بالأحمر أضف مرة أخرى </div>
      أو ضع الكود في أداة Html/javascript

      حذف
  4. جميل اخي قائمة ممتازة و بالنسبة للاخ الذي لم تشتغل معه القائمة حين وضعها في القالب فاليضع هذا الكود عوضا عن الاخير الذي بالتدوينة'الكود هو نفسه لكن ازلت منه بعض الشرطيات التي تمنع حفظ القالب:
    <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-user'>
    </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>

    ردحذف
    الردود
    1. تشكر ، أتمنى أن يستفيد منه

      حذف
  5. اخي ممكن كيف تكتب اكود في التعليقات يكتب لي لايمكن قبول HTML

    ردحذف
    الردود
    1. عليك تحويله بمحول الأكواد اسفل التعليقات ضع الكود وإضغط konversi
      http://ask.ar1web.com/2014/09/blog-post_14.html

      حذف
  6. اريد ان احذفها كيف افعل ذالك

    ردحذف
  7. اخي بعد ان وضعت القالب فوق body يظهر خطأ ولا يمكن الحفظ

    ردحذف
    الردود
    1. اضفه الكود في اداة Html/Javascript من التخطيط

      حذف
  8. انا اريد منك هذه الاضافة التى فى الصورة http://im75.gulfup.com/91QYwX.png

    ردحذف
    الردود
    1. ستجدها هنا : http://www.ar1web.com/2014/09/css-side-menu.html

      حذف
    2. شكراً لك وكلمة شكراً لا تساوى شئ لما قدمتموه لى وللزوار

      حذف
  9. هناك طلب اخر
    فى مدونة عرب ويب عند مرور الماوس على الشعار يحدث كما فى الصورة http://im75.gulfup.com/0qjl9g.png
    كيف اجعلها هكذا فى مدونتى .....
    ارجو منك الرد

    ردحذف
  10. اضف هذا الكود فوق ]]></b:skin>
    img {
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    transition: all .5s;
    }
    img :hover {
    -webkit-filter: blur(3px);}

    بدل img ضع وسم أو معرف اللوجو لديك
    ستجد باقي التأثيرات هنا : http://www.ar1web.com/2014/10/best-hover-effects.html

    ردحذف
    الردود
    1. كيف اعرف الوسم او المعرف + شكل الماوس

      حذف
    2. رابط مدونتك ..

      حذف
  11. كيف اقوم بالتعديل على حجم الشعار فى القائمه الاولى

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

      حذف
  12. yasmine Ahmed12/27/2014

    انا محتاجة الإضافة ديه الى هيا فى القايمة الثانية

    ردحذف
  13. حمل الملف أنسخِ الكود ثم توجه إلى التخطيط وأضيف اداة HTML/JAVASCRIPT ضع الكود بها وغير الكلمات ... وقومي بالحفظ

    ردحذف
  14. السلام عليكم أخي أنا أضفت الشكل الأول ونجحت معي، لكني لا أريدها أن تظهر في الجوال هل ممكن

    ردحذف
    الردود
    1. عليكم السلام يجب أن تضيف كود بين أكواد التجاوب والتي تبدأ هكذا : @media
      هذا هو الكود: #RLMenu{display: none!important;}

      حذف
  15. شكرا أخي الكريم يعني أضيف الكود في أي مكان المهم بين أكواد التجاوب

    ردحذف
  16. شكرا لقد نجحت معي دائما مبدع

    ردحذف
  17. ممكن أخى تضع قائمة باليمين وقائمة باليسار

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم