معكم من جديد إخواني اخواتي الأعزاء موضوع اليوم يقتصر على قائمتيين جانبيتين خفيفتين وبمميزات خفيفة أيضا كلها بتصميم 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3JuuvsTqA764v752h6SwncgYNEe_3wDkyIHdZgA7CLPtFgaReG7y9a70bgQwShi7-1RL179uyQQmILKr1vRtTcp8Ul0-laP6qnP124Hn7EKq2cZn_nD7eTDT0ubldQJ_bbEE3ZgvoFok/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmItVOMdffyWKaOxGkoDClXpdINMAg7dX_Sh6DQSxrGRWLYZrjJHRc0W3VWIsHWlHmO2TKr2bSmRU33YMpyD9VvijyRxRtjlslwQMjM3BKgMnG4rysFWY3Zed3iD0nCq_aJ55r92aZUAPm/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&width=250&height=250&colorscheme=light&show_faces=true&header=false&stream=false&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>
* المحدد باللون الأصفر غيره بإسم صفحتك
* المحدد باللون الأحمر خاص بالروابط
إنتهينا كل ماتبقى لك أن تخصص اسماء والروابط لتستمتع بقائمتك الجديدة أي مشكل نحن في الخدمة
مدون و مصمم محترف . أهتم خاصة بمجال تصميم المواقع و الواجهات . درسة البرمجة بمدرسة الإعلاميات العربية بوجدة .
المدونة: مدونة دروسنا
