بسم الله الرحمن الرحيم
بعد طلبات كثيره بأضافه قائمه المترو العلويه في سلسله طلبات الزوار
اليوم اقدم لكم القائمه حصريه لدينا من تصميمي
لمعاينه القائمه اصعد الي اعلي واضغط علي
افتح القائمه التي بجانبها علامه ويندوز
حتي لا اطيل عليكم نأتي الي تركيب القائمه
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/AVvXsEh20jMgJuHFJS6NL2gknshtuQtmaPH9scQfeMKxGjwPHTfydx1xRA5T1a0hkcNfh8kFEPiVHj2zZCV387JvUw0gUBB48oImdPBZwAbAwgcKCJSmsNSTI3VjplH3B081GO_CVG-M6ZTZNqjQ/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/AVvXsEg0P-Xsbn7tZMncf8qNayoM6X3ddLdUBx8WddWdGo13Ji2uVTsNSfuwkrDZLP0VegVFWTRV8Yrp315o_hqY-NFsJAS49JkmefhYgA6K0EfpvocP5biTeXdVXcopSmTYEtIYWLPdgjiFWEbE/s1600/button-open.png) no-repeat left 0}
.tab a.close{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgke2dvInpCboWZ_KL_HiDN36VNZX7E3q6zn9EAU5dBYM5edlvmChPaqJyz2ZQ8-xrqUTP8fxt5-Nwg1hZ-ICZFqxX_fmfTawjcURVDwVbp0oQ-IxKXwDhbr1AMIBHABl_iCdXRfzaffxXW/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/AVvXsEis_G7xeCz3vsa0Ce0dU3Lapk19bw6tKJu73SginC96MoppD54-Y5V55jWzV4lA0GHV3ptJZNvb3LXm3xFa-1Mj2PuWByOgJdMMVak74i53PChkaah2jAwqZKB_RWwR2aC6-mq9PE3c3oxh/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/AVvXsEj-Z8EkCHSAzZSd58-2bHXc5zEkLuii4a1TqWxFfQqnc_R1DOtJ7nN2t1sg83UgkksFHX2aZiVbRUT0u5RZRt1hZUyGdoaTTLmIrLkwcth30r_t06mO7jw1jVaLjs1KBuwr3MlMfe5_UW0D/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>
واضف اسفله الكود التالي
