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

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

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

قائمة جميلة اخذتها من احد القوالب الاجنبيه وقمت بتعريبها , القائمة تتميز ببميزات عدة منها انها خفيفة وجميلة المنظر , وايضاَ تم اضافة خط عربي احترافي لها وهو الخط المشهور : DroidKufi-regular  .

صورة : 


مثال مباشر : من هنا .


طريقة التركيب : 


  • طبعا طريقة التركيب تختلف من قالب لقالب , يعني انت وشطارتك في الاكواد ): ابحث عن مكان مناسب لها مثلاَ تحت الهيدر , او اي مكان تشاء , وهذا الكود كامل وجاهز :


<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('http://1.bp.blogspot.com/-Xv8Xughx1Yo/UvqZsAdn27I/AAAAAAAADJo/AAEkqEiK-8Q/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('http://1.bp.blogspot.com/-DVnUCifOj9c/UvqZphRLR2I/AAAAAAAADJg/KoM1KvYcci4/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('http://4.bp.blogspot.com/-g_ewyZEafmw/Uvo42zmrMKI/AAAAAAAADJI/BUJppcoWuhw/s1600/home.png');
background-repeat: no-repeat;
margin-right: 10px;
background-position: 11px 10px;}
.icon-me{padding: 0px 10px 0px 10px;
background: url('http://3.bp.blogspot.com/-uwe3sspmyqI/UvtUBBo9lSI/AAAAAAAADKU/IKWYKQd508s/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('http://2.bp.blogspot.com/-x3lNawiunoU/UvtSOUkWEYI/AAAAAAAADJ8/haUUBytDfP0/s1600/submenu-bg.png');
background-repeat: repeat-y;}
#menu li:hover ul{display:block;}
#menu li ul li{display:block;background-image:url('http://3.bp.blogspot.com/-iZMUnW10XTc/UvtSOaL9evI/AAAAAAAADJ4/Kj__d3_JHs0/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>

بالتوفيق

تحرير المقال
عن الكاتب
مقالات مشابهة

ليست هناك تعليقات:

أو يمكنكم الإتصال بنا من خلال النموذج التالي

الاسم بريد إلكتروني* رسالة*

إعلان أول الموضوع

إعلان تحت صورة الموضوع

إعلان وسط الموضوع


إعلان آخر الموضوع

التعليقات

تعليقات الموقع