بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .
قائمة منسدلة احترافية CSS3 لموقعك
قائمة جميلة اخذتها من احد القوالب الاجنبيه وقمت بتعريبها , القائمة تتميز ببميزات عدة منها انها خفيفة وجميلة المنظر , وايضاَ تم اضافة خط عربي احترافي لها وهو الخط المشهور : DroidKufi-regular .صورة :
 |
| قائمة منسدلة احترافية CSS3 لموقعك |
مثال مباشر : من هنا .
طريقة التركيب :
- طبعا طريقة التركيب تختلف من قالب لقالب , يعني انت وشطارتك في الاكواد ): ابحث عن مكان مناسب لها مثلاَ تحت الهيدر , او اي مكان تشاء , وهذا الكود كامل وجاهز :
<div id="menu">
<ul>
<li><a class="mhome" href="http://blog.7lolblogger.com/"></a></li>
<li><a href="http://blog.7lolblogger.com/">تكنولوجيا</a></li>
<li><a href="http://blog.7lolblogger.com/">ويندوز<i class="icon-me"></i></a>
<ul>
<li><a href="http://blog.7lolblogger.com/">مشاكل وحلول</a></li>
<li><a href="http://blog.7lolblogger.com/">تحديثات</a></li>
<li><a href="http://blog.7lolblogger.com/">أخبار</a></li>
<li><a href="http://blog.7lolblogger.com/">ثيمات</a></li>
</ul>
</li>
<li><a href="http://blog.7lolblogger.com/">حماية</a></li>
<li><a href="http://blog.7lolblogger.com/">برمجة</a></li>
<li><a href="http://blog.7lolblogger.com/">برامج</a></li>
<li><a href="http://blog.7lolblogger.com/">مواقع</a></li>
<li><a href="http://blog.7lolblogger.com/">العاب</a></li>
<li><a href="http://blog.7lolblogger.com/">مقالات</a></li>
</ul>
<style>
/*------menu D: blog.7lolblogger.com ------*/
#menu{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG17Ux4A8T86Qo5PAhmz11g0e_pD8QKpNvZ_0ye7wb4qgxwKQV9zXCacWLvDQSE3oMonXxiw1IF0GCGmVJE5fhC3YhTqDrr9FPsho5vlQlBxae3EN9-UNoaO2k-3SowUtpXE6vcT53yQ/s1600/menu-bg.png')repeat-x ; width:100%; min-height:52px;border-bottom: 4px solid #ff4629; }
#menu ul{line-height: 52px;}
#menu ul li{display:inline;padding: 17px 0px;}
#menu ul li a{padding:10px 13px 10px 17px;color:#ddd;font: 14px DroidKufi-regular,tahoma;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvgRUepdV5q_nGva6qXluwkjNX-RE6F5qanBJu4V8gQUpPJf0n-05FOnGx_ELBHHQS1FICBWH7NDdvbWJAxGIhS0qChM8977PEm2iyqZCCKE5DhP5dgPURdmAzjdLovRG2kYVA-wCsQA/s1600/border.png');background-repeat: no-repeat;background-position:left;}
#menu ul li a:hover{color:#fff;transition: all 0.8s;
-moz-transition: all 0.8s;
-webkit-transition: all 0.8s;-o-transition: all 0.5s;}
#menu ul li .mhome{padding: 16px 28px 16px 28px;
background-color:#ff4629;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjloGMnUn_CYn98wwm3fTtHeO7NZcnwpZ4Qq-po3xzXRw6zjqCQKuuVo3eIT4yAo1FFvx7fhFqm_uFi_wERI6EQ4qUciy4FWD7tQfmvpLUZeupyRJ6Lht8SPAtWamrOn44wjhjwm2-tg/s1600/home.png');
background-repeat: no-repeat;
margin-right: 10px;
background-position: 11px 10px;}
.icon-me{padding: 0px 10px 0px 10px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkJpUQZ15RngZg1c_43h53LbA1KX9tMUJPaQ11N3tQDVEPM5pKqB2CLO2PIKHtQrUR8GVH8pbjm7T_m3PRGtTRNop_UU301P87BI5BrpW9nYzuH9sUsfR3yM7XpdfzYMQ9Jewnee9mLw/s1600/arrow-down.png') no-repeat;
background-position: 0px 7px;}
#menu li ul{display: none;line-height: 37px;margin-top: 3px;
z-index: 9999;margin-right: 151px;
position: absolute;border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
width: 160px;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOHjfOjdWV6CEXHxieAx_4KCyuHkcUwxmTZ60DcozGLcflegTkd3vui_R1bZvWVdYPp-h9QV9JD8RTJ8XuTj7zhckIAsz4KYCNxlhpHc-yAEtCPN15Z087A6JxCBUP2OnBMoMO9TTr4g/s1600/submenu-bg.png');
background-repeat: repeat-y;}
#menu li:hover ul{display:block;}
#menu li ul li{display:block;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHYkukaMcMR8AB8OfFSTBuXuk78geXuk-hDIyEzfz2WSyMs3-XNdOsJd0F_EwUtpkuBYebAwINKwGHbnCtlPpPcz5JkWUtBHxwD1S4KFnhyphenhyphenMoeu2vlVZ4N-MPo_LptkJ6ewpxtlrmyHg/s1600/subborder-bg.png');
background-repeat: no-repeat;background-position:bottom;padding:0;}
#menu li ul li a{background-image:none;padding: 0px 15px 0px 0px;color:#ddd;font: 13px DroidKufi-regular,tahoma;transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;-o-transition: all 0.5s;}
#menu li ul li:hover a{color:#fff; margin-right:5px;}
@font-face {
font-family: "DroidKufi-regular";
font-style: normal;
font-weight: 400;
src: url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot?#iefix") format("embedded-opentype"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff2") format("x-woff2"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff") format("woff"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf") format("truetype");
}
body {
padding: 0;
margin: 0;
direction: rtl;
font-family: DroidKufi-regular,arial,helvetica,clean,sans-serif;
font-size: 14px;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
body {
min-height: 100%;
_height: 100%;
position: relative;
}
* {
margin: 0;
padding: 0;
}
a:visited {
color: #868686;
}
a:hover {
color: #FF4629;
}
a {
text-decoration: none;
color: #868686;
}</style>
</div>
0 التعليقات:
إرسال تعليق