قائمه مترو منسدله اعلي المدونه - جي كيوري

بسم الله الرحمن الرحيم 

بعد طلبات كثيره بأضافه قائمه المترو العلويه في سلسله طلبات الزوار 

اليوم اقدم لكم القائمه حصريه لدينا من تصميمي 
لمعاينه القائمه اصعد الي اعلي واضغط علي 
افتح القائمه التي بجانبها علامه ويندوز

حتي لا اطيل عليكم نأتي الي تركيب القائمه

1- اذهب الي قالب

2- تحرير Html 

3- ابحث عن الكود التالي

]]></b:skin>

واضف فوقه الكود التالي

/* css menu metro top */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
* html .clearfix{height:1%}
.clearfix{display:block}
.clearfix{height:1%}
.clearfix{display:block}
.tab{position:relative;z-index:999;width:990px;margin-right:auto;margin-left:auto;border-radius:38px;height:39px;border-top:6px double #00ff33}
.tab ul.login{display:block;position:relative;clear:left;height:39px;font-weight:bold;line-height:42px;margin:0;color:white;font-size:80%;text-align:center;margin-right:-32px}
.tab ul.login li.left{height:39px;width:30px;padding:0;margin:0;display:block;float:left;border-radius:20px 0 0 20px;border:none;background:rgba(0,0,0,0)}
.tab ul.login li.right{height:36px;width:30px;padding:0;margin:0;display:block;float:left;border-radius:0 20px 20px 0;background:rgba(0,0,0,0);border-bottom:0}
.tab ul.login li{text-align:left;padding:0 16px;display:block;float:left;background:#0CBB2F;color:#FFF;font-family:ge_dinar;font-size:22px;height:39px;border-radius:0 0 20px 20px}
.tab ul.login li a{color:#FFF;font-family:ge_dinar;font-size:18px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGbsAtNgzzYa4lHXMaVUYuVaz2acB-k-K89AL9xhYfhDxRnaISy_PX_ewoeLeJRLbl11TpgtRFXq4XWeYk4ZjswjphrT4A-qLnuG0_DLgvst9aMs7i2CHZs5LV4YHR9MYe38AB47taldtZ/s1600/btn.png);margin-top:-1px;text-align:center}
.tab ul.login li a:hover{box-shadow:0 0 0;border-left:0 solid #00ff33;border-radius:0;padding:0;text-shadow:0 0 4px #000,0px 0 20px #000,0px 0 30px #000;margin-top:-5px}
.tab .sep{color:#414141}
.tab a.open,.tab a.close{height:20px;line-height:20px!important;padding-left:30px!important;cursor:pointer;display:block;width:100px;position:relative;top:11px}
.tab a.open{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh50nF3EgANASMejSZwb5-V78d-67RE0QSi08M1xqvUcpkHKOpUmtLCAEbckWa-kczdkxceYbfskh0QMkHpJ1o82o2yQG8erDF-F7Do0ezv7V3lq6_NkSfjwTNdxy_AxRy5pTXdvnmBWHC/s1600/button-open.png) no-repeat left 0}
.tab a.close{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiEBblGbYSGB_1f3SUdkOxMwLXVd2S5Ppjd2G6G7urnHwHYgGtCFJ3sxGbA4xTXhNoOXfAPaADUK-38HhBfE9AdHTrACfBoqtJI1sWiFvxOH1plv-Yc50iFNyuvoGUjIW7Fr5THatA8k_Z/s1600/button-close.png) no-repeat left 0}
.tab a:hover.open{}
.tab a:hover.close{}
#slide-top-panel{position:absolute;top:0;width:100%;z-index:999;text-align:center;margin-left:auto;margin-right:auto}
#panel{width:100%;height:233px;color:#236907;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmDsICB0opfzr_uQXKAvSR7ofbw0pwuaRNYfeNfReaRLiwbBxvGEdg26jWLzHYg1f7xlzs-ECl1VEu4mZ0mPwBoemt9Xk5DZ4CkhBcKfFg-AvF7EZ9uUJDObEwETAamML6BNGk-YOXgN4e/s1600/bg-body.jpg);overflow:hidden;position:relative;z-index:3;border-radius:17px;font-family:ge_dinar;font-size:20px;display:none;border-bottom:5px double #00ff33;text-align:center}
#panel h4{font-size:18px;color:#000000;text-align:center;padding:5px 0 10px;margin:0;font-family:droidkufi-bold;border-bottom:7px solid #0FA21C;border-radius:20px;padding-bottom:9px;box-shadow:5px -2px 5px #0fa21c}
#panel p{margin:5px 0;padding:0}
#panel a{text-decoration:none;color:#15ADFF}
#panel a:hover{color:#000;background:rgba(0,0,0,0);border-radius:0;border-left:none;box-shadow:0 0 0;transform:scale(0.9) rotate(-2deg)}
#panel .content{width:960px;margin:0 auto;padding-top:15px;text-align:left;font-size:0.85em}
#panel .content .left{width:280px;float:right;padding:0 19px;border-left:1px solid #333;margin-top:-8px}
#panel .content .right{border-right:1px solid #333;margin-top:-8px}
#panel .content form{margin:0 0 10px 0}
#panel .content label{float:left;padding-top:8px;clear:both;width:280px;display:block}
#panel .content input.field{border:1px #C7C3C3 solid;background:#B0F5AA;border-radius:10px;margin-right:5px;margin-top:4px;width:200px;color:#000;height:23px;font-family:droidkufi-bold}
#panel .content input:focus.field{width:244px}
#panel .content input.button-register{display:block;clear:both;height:34px;width:94px;background:#00ff33;text-align:center;cursor:pointer;border:none;font-weight:bold;margin:10px auto;font-family:droidkufi-bold;box-shadow:2px 2px 5px;float:center;margin-left:auto;border-radius:6px}
#panel .content input.button-register:hover{border-radius:100%}
#sliding-panel{width:144px;float:right}
#sliding-panel2{width:144px;float:left}
#sliding-panel ul,#sliding-panel2 ul{font-family:Arial,Helvetica,sans-serif;list-style-type:none;margin:0;padding:0;margin-right:-75px}
#sliding-panel ul li a,#sliding-panel2 ul li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdSbrVJFC1Vbz-v_yYiQ8U9aMnKsK0BkjQFOsBQjwHbuP0mooaDBScekGstQeL84dWXXMFwthPzU2MGWDpSktzJnmAU0U1UWg5jrmKlsQPKGlhNC30Qx3TveWjg0kxUa64mom2_ydxNkJG/s1600/star-bullet.png) center left no-repeat;margin:0;padding:3px 3px 3px 18px}
#sliding-panel li,#sliding-panel2 li{display:inline}
#sliding-panel a,#sliding-panel2 a{color:#999999;text-decoration:none;font-size:11px;display:block;padding:3px;width:160px}
#sliding-panel a:link,#sliding-panel a:visited,#sliding-panel2 a:link,#sliding-panel2 a:visited{color:#000000;text-decoration:none;font-family:droidkufi-bold;font-size:11px;width:126px;margin-right:67px;background:#8FF5A3}
#sliding-panel a:hover,#sliding-panel2 a:hover{color:#000;background:#00ff33;border-radius:50px}
#search-box22{margin-top:20px}
#search-box22 input[type="text"]{float:right;background:10px 6px #A7F5AE;border:0 none;font:12px goth;color:#000;width:160px;padding:6px 15px 6px 35px;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;-webkit-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset;-moz-box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset;box-shadow:0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.2) inset;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;font-family:droidkufi-bold}
#search-box22 input[type="text"]:focus{width:200px}
.about-author{width:100%;text-transform:none;margin-top:15px}
.authorbox{overflow:hidden;padding:0;width:100%}
.authorbox .authorinfo{}
.authorbox .authorinfo img{float:left;margin:4px 10px 4px 5px;border-radius:100%;width:20%;background:#09D522;padding:6px}
.authorbox .authorinfo p{margin:0;padding:0 5px;text-align:right}
.authorinfo p a{text-decoration:none}
.authorbox h3{margin:0;display:inline-block}
h3.boxtitle{font-size:14px;margin-left:84px;font-family:droidkufi-bold}
/*===MBL METRO UI Menu==*/
.mblmetromenu{width:960px;margin:auto}
@media screen and (max-width:960px){.mblmetromenu{width:100%}}
.MblMetroMenu{position:relative}
.om-nav{position:absolute;width:100%;z-index:999;display:none}
.om-ctrlbar{width:100%;height:48px}
.om-ctrlitems{margin:auto;padding:0;height:48px;display:inline-block;text-align:center}
.om-ctrlitem{height:48px;width:48px;display:none;cursor:pointer;float:left;opacity:0.5;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"!important;filter:alpha(opacity=50)!important;/* For IE8 and earlier */}
.om-ctrlitem:hover{opacity:0.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"!important;filter:alpha(opacity=80)!important;/* For IE8 and earlier */}
.om-activectrlitem{opacity:1!important;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"!important;filter:alpha(opacity=100)!important;/* For IE8 and earlier */}
.om-controlitems{width:960px;margin:auto}
.om-controlitem{height:48px;cursor:pointer}
.om-closenav{float:left}
.om-movenext{float:right}
.om-itemholder{margin:auto;padding:20px 0}
@media screen and (max-width:960px){.om-closenav{position:absolute;z-index:9999;left:0;top:0}.om-movenext{position:absolute;z-index:9999;right:0;top:0}.om-controlitems{width:100%}.om-itemholder{width:100%}}
.om-centerblock{display:inline-block}
.om-item{display:none}
.om-showitem{margin:5px;float:left;display:none}
.tile-bt{text-align:center;cursor:pointer;width:90px;height:90px}
.tile-bt a{display:block;padding-top:12px;text-decoration:!important}
.tile-bt img{margin:0 auto 0 auto;padding-bottom:5px;height:48px;width:48px;position:relative;display:block}
.tile-bt span{font-size:12px;padding-bottom:0;display:block}
.tile-bt:active{opacity:0.5}
.tile-bt-large{width:190px;height:90px;line-height:90px;text-align:center;cursor:pointer}
.tile-bt-large a{display:block;text-decoration:!important}
.tile-bt-large img{vertical-align:middle;margin:auto;padding:0;position:relative;width:48px;height:48px}
.tile-bt-large span{vertical-align:middle;display:inline}
.tile-bt-large:active{opacity:0.5}
.tile-bt-extralarge{text-align:center;cursor:pointer;width:190px;height:190px}
.tile-bt-extralarge a{display:block;padding-top:52px;text-decoration:!important}
.tile-bt-extralarge img{margin:0 auto 0 auto;padding-bottom:22px;height:80px;width:80px;position:relative;display:block}
.tile-bt-extralarge span{font-size:14px;padding-bottom:12px;display:block}
.tile-bt-extralarge:active{opacity:0.5}
.shadow-white,.shadow-black,.shadow-blue,.shadow-green,.shadow-red{/*display:inline-block;*/}
.shadow-white:hover{box-shadow:0 0 6px 3px #fff;-webkit-box-shadow:0 0 6px 3px #fff;-moz-box-shadow:0 0 6px 3px #fff;-o-box-shadow:0 0 6px 3px #fff;-ms-box-shadow:0 0 6px 3px #fff}
.shadow-blue:hover{box-shadow:0 0 6px 3px #38D1F7;-webkit-box-shadow:0 0 6px 3px #38D1F7;-moz-box-shadow:0 0 6px 3px #38D1F7;-o-box-shadow:0 0 6px 3px #38D1F7;-ms-box-shadow:0 0 6px 3px #38D1F7}
.shadow-green:hover{box-shadow:0 0 6px 3px #AACA37;-webkit-box-shadow:0 0 6px 3px #AACA37;-moz-box-shadow:0 0 6px 3px #AACA37;-o-box-shadow:0 0 6px 3px #AACA37;-ms-box-shadow:0 0 6px 3px #AACA37}
.shadow-red:hover{box-shadow:0 0 6px 3px #E81750;-webkit-box-shadow:0 0 6px 3px #E81750;-moz-box-shadow:0 0 6px 3px #E81750;-o-box-shadow:0 0 6px 3px #E81750;-ms-box-shadow:0 0 6px 3px #E81750}
.shadow-black:hover{box-shadow:0 0 6px 3px #444;-webkit-box-shadow:0 0 6px 3px #444;-moz-box-shadow:0 0 6px 3px #444;-o-box-shadow:0 0 6px 3px #444;-ms-box-shadow:0 0 6px 3px #444}
.solid-blue{background:#00BBE2}
.solid-blue-2{background:#2C84EE}
.solid-darkblue{background:#044E94}
.solid-violetred{background:#781766}
.solid-red{background:#E51400}
.solid-red-2{background:#E81750}
.solid-pink{background:#FF539B}
.solid-purple{background:#D02090}
.solid-orange{background:#FB8F02}
.solid-orange-2{background:#FF6600}
.solid-orange-3{background:#DD5F37}
.solid-coral{background:#CD5B45}
.solid-green{background:#67B239}
.solid-green-2{background:#96BF01}
.solid-darkgreen{background:#016C38}
.solid-olive{background:#999900}
.solid-grass{background:#CDCD00}
.solid-darkred{background:#5F0000}
.solid-gold{background:#FEE9AE}
.solid-yellow{background:#F7D100}
.solid-black{background:#000}
.solid-smoke{background:#F5F5F5}
.clearspace{clear:both}
.floatleft{float:left}
.floatright{float:right}
.none{display:none!important;width:0!important}
.light-text{color:#fff}
.dark-text{color:#1e1e1e}
.gradient{background:-moz-linear-gradient(-45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);/* FF3.6+ */
 background:-webkit-gradient(linear,left top,right bottom,color-stop(0%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,0.3)));/* Chrome,Safari4+ */
 background:-webkit-linear-gradient(-45deg,rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%);/* Chrome10+,Safari5.1+ */
 background:-o-linear-gradient(-45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);/* Opera 11.10+ */
 background:-ms-linear-gradient(-45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);/* IE10+ */
 background:linear-gradient(-45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);/* W3C */}
.margin-5{margin:5px}

ثم قم بالبحث عن الكود التالي

<head>

واضف اسفله الكود التالي

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='https://ayana-tech1.googlecode.com/svn/trunk/metro-menu.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() { 
$(&quot;#open&quot;).click(function(){
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);
}); 
$(&quot;#close&quot;).click(function(){
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);
}); 
$(&quot;#toggle a&quot;).click(function () {
$(&quot;#toggle a&quot;).toggle();
}); 
});</script>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
body#layout #slide-top-panel {display:none !important;}
</style>
</b:if>

تم قم بالبحث عن الكود التالي

<body

واضف اسفله الكود التالي

<div id='slide-top-panel'>
<div id='panel'>
<div class='content clearfix'>
<!-- first section -->
<!-- mblmetromenu -->
<div class='mblmetromenu'>
<div class='tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
  <a class='gradient' href='http://ayanatech.blogspot.com'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMyE8lSsfaLEMiUHbdfq_uv-l4zdHtSSM0C5HVMmxnq_CSSej8Nw_2vMIU5Qufd2hGA8Wm_271v3KWp91153X5hO0Nv0uEfzJ_PAP9TWI62Nlrflg71N1O-KY-SdcWUboZYIVe5iHgPqI/s1600/home.png'/>
<span class='light-text'>الصفحه الرئيسيه</span>
</a>
</div>
<div class='tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='http://ayanatech.blogspot.com/p/blog-page_7874.html'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9ehYbVrYSoZxF0bm30jADRaS6CZGrH-IPDDWK90O5aFJTFRfT3Ao0gBsNkR1qsQC72BjyOtHCG88YIdxlENQ6tWZcaq6XDOpsZuWtaBtRhTOVmrs7Acy8i_-GPlSWijz0XFLB_p8kcK4/s1600/messanger.png'/>
<span class='light-text'>من نحن</span>
</a>
</div>
<div class='tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='http://feeds.feedburner.com/AyanaTech'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYv15TEC8eQU3HeTDec4CjTbynyhaJYVdcWz8ugveUscfrrlxowL1ytNm-rSK1gY_2HpvkFNzsy5rlpcNCLBmHpnFsQk_uBMYLjUp_ur0_uOmnPb3Zp74X5kJl_SjVtb-bA5dXw-R0cgo/s1600/rss.png'/>
<span class='light-text'>الخلاصه</span>
</a>
</div>
<div class='tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZQwiF_ilps1cPU5E29mvsZwrvZX2LQJZOOB2TsgE7JpxNYTZi61AAzZfLbx-col4FLUHzvnZKLrxAzpgSEDgqinruIgjTjZ4fksFjnwYoWh28SEmizK6iy0AKsJLmlyw3bydlhAE0ANg/s1600/search.png'/>
<span class='light-text'>بحث</span>
</a>
</div>
<div class='tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='http://ayanatech.blogspot.com/p/blog-page_6025.html'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8ii5hsplh2aRAm5VHtHZYhUPvrz5fXm7cksyhdw-H2C7VmnZanbJA6NHvBOq8oXqcPiOIHVDEg7rF0zK98B6sJ9ZsJc9ql2F2nyZNJjBRm_R0L2EpBiiEUjyksQ2gtQn420Z14fFQMoE/s1600/mail.png'/>
<span class='light-text'>اتصل بنا</span>
</a>
</div>
<div class='tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='http://ayanatech.blogspot.com/p/blog-page_97.html'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMjtLKtnATaqgQLPvVLNJZBM0iGIYO63UbqBs0wF0yx-XYn4QGTK8FF-5NMLZSVNIHKusEl3wiISa4VjcJklJvf6BJPeDdEjNsqUFWtXSb4Qb4xl4JrqSiMFQyckEjaF2naOSClaxVaKM/s1600/help.pn'/>
<span class='light-text'>حول القالب</span>
</a>
</div>
<div class='tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='http://www.youtube.com/ayanatech'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6HMj2_6aWscR9LkqGrBOKJgxy_gCAZArRBoxLlkNu67x7R7yNJB5lwcRVsJfhyphenhyphenYr2pb0n7GTFPLy6OOF0gsCQBesX8DBJx4q4hIq1Bn3gx0Mc-yZJqk9CC2pSCWKdJuiIFgCQTuIl4FM/s1600/youtbe.png'/>
<span class='light-text'>قناتـي</span>
</a>
</div>
<div class='tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
  <a class='gradient' href='http://www.facebook.com/ayanatech'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7L_JVsOrW_rD1pS_CoiKQAO0qxQhwwvGfCofZU999E9PQoyW5ZK6tbQu-KjShtaFiY6yLgRUEmGWCRFdqP0NCCD9U-DnZ1Jbs8q2OIw4oCiEaF0t2LDSRWkdhHh0zym_r9riuxiXj_s/s1600/face.png'/>
<span class='light-text'>صفحتنا</span>
</a>
</div>
<div class='tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
<a class='gradient' href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaFIv7BOfZ5zTdbeIL92wbR47r6lePdj1gfItoPu4COES0DzysrDBXQiffszthVChuQXZYxK2jjbQ29SuDykfyB8zPMtb_0nZatJCY3g7Ac91mrdvbK-QcmAyQ96xLQXV7K9C9WevMlks/s1600/photo.png'/>
<span class='light-text'>اعمالي</span>
</a>
</div>
<div class='tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu' data-navid='om-nav2'>
<a class='gradient' href='#'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-T7IyMiolEgv8x-UAsqlWoHEJn-_46ZoW3VK4es1YoAHfkIs-4Tc7lh6ECCHpMK6_nZWHCxXbd46Hv6qMB3XIK8iqed0zqJhva2PI2xGQnrJQgV0uIJVBAEMXdTDK7mqUxMAkniyEqYQ/s1600/music.png'/>
<span class='light-text'>موسيقي</span>
</a>
 </div>
<div class='tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu' data-navid='om-nav'>
  <a class='gradient' href='http://ayanatech.blogspot.com/p/blog-page_46.html'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1jXXbsrPf8H5UH2KTFJehpOCUoS2H35A7gF3oso6Ud3Zwc9yYc_eBnaspR9U7PXkxZsXUAFbZZpUzP0H4Gj9ALZMSvJMU97KWy64EI5KlhL9xlzvvJVMUV5DAB6rxFUkmiQuQlW_dQIQ/s1600/MBL.png'/>
<span class='light-text'>خدماتي</span>
</a>
</div>
<!-- End MblMetroMenu -->
</div>
<!-- END mblmetromenu -->        
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
  <li>مرحبا بك ايها الزائر</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' href='#' id='open'>ا&#1613;فتح القائمه</a>
<a class='close' href='#' id='close' style='display: none;'>ا&#1613;غلاق</a>
</li>
<li class='right'/>
</ul>
</div>

قم بتغير التسميات والروابط بما يناسبك

قم بعمل حفظ واذهب لمشاهده القالب

وصلنا الي نهايه الموضوع اتمني يكون الموضوع اعجبكم او افادكم

والسلام عليكم ورحمه الله وبركاته