قائمة منسدلة احترافية CSS3 لموقعك

قائمة منسدلة احترافية CSS3 لموقعك

بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة واتم التسليم
السلام عليكم ورحمة الله وبركاته .

قائمة منسدلة احترافية 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/AVvXsEjRx4_Vw0IDX2q95BuOroPk6ksa3jQFWwysVtklLRGV-TOY7JIMI4m5KXSBbMDNFn5kyQnXvIpg30ncgaA3Mc1EuOdMd6zbeL4_ZqYR0OYAXyGq5PSfqhKNw1ISu3aaYtyGiCNxNJuV6Uk/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/AVvXsEiJgjfgaS0dzG5Q6trcd8wDNEPZtjIQMdE_X_gIp1nQ2hcIYORCkw-XF54ktIf1OCs7fP6uyaYEEasuWBvkua4t21N7LdTwm7-A8TdlA9sWmITKahAQMSOJJW-263zKFPlBKgd5VlaKk_s/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/AVvXsEj94BQnLflsUyziyRsnP360Z-vzCLbTUJXCLukLtGwwqpav6Mjm6tm32zoLKdD_FK0kWAH4o1mVITeVmsC3lQWF23GbOewn2RIjLCaKfg2R7nU2ZOkuJQuQm0En2QUmlyGfC6pH_DigWwg/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/AVvXsEi3-VinomPO3XyMBhjMVflO3KghmJdvBXMs9MEz-4O_Wz0hZhIQPVPD18cK9OUnCAA8Su52AOgVWrRiV5cXQh6BGPV-5NdRifDfaKoPgeY1MsfqeA-8Z4BkG_5Ulvt8-iO00C2Hu17zKIk/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/AVvXsEgp0MV0n5paAyCaIS_RZf3j1LaNGci686x8i5AHb2HRzuGuRdY4APQOFH-o1g1c4YStSRc31XV8pihKlfc65RZo69F-ymbxg5yQpVTEZMv0yZZ7zf_yMV6XZ7Spzts9usG44ibju1OZ5xc/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/AVvXsEhugHF_XjeSgGijc8G_KbAYVxrk7PX6SLoGy5ZJHIpNu03-uACvx_lKppQr9AJicpTqjKZd9pRniH9f8atT0Hqny1wxr8bLzdW0zB9X2nk8ktApREDgi0yoFgw04pl_NymJJJP7_0UXpM4/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>

بالتوفيق

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة

صورة التدوينة

عنوان التدوينة :قائمة منسدلة احترافية CSS3 لموقعك

ملخص التدوينة:

قائمة منسدلة احترافية CSS3 لموقعك بسم الله الرحمن الرحيم والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة واتم التسليم ا...

goust

الساعه : 2014-08-30T18:50:00+03:00

تاريخ : 30‏/08‏/2014

من : المملكة العربيه السعوديه

التعليقات : 5

انشرها :

تاق :