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

akbear فبراير 27, 2018
طريقة التركيب :
طبعا طريقة التركيب تختلف من قالب لقالب , يعني انت وشطارتك في الاكواد ): ابحث عن مكان مناسب لها مثلاَ تحت الهيدر , او اي مكان تشاء , وهذا الكود كامل وجاهز :
<div id="menu">
< ul>
< li><a class="mhome" href="http://رابط مدونتك.com/"></a></li>
< li><a href="http://رابط مدونتك.com/">تكنولوجيا</a></li>
< li><a href="http://رابط مدونتك.com/">ويندوز<i class="icon-me"></i></a>
< ul>
< li><a href="http://رابط مدونتك.com/">مشاكل وحلول</a></li>
< li><a href="http://رابط مدونتك.com/">تحديثات</a></li>
< li><a href="http://algرابط مدونتكme3.blogspot.com/">أخبار</a></li>
< li><a href="http://رابط مدونتك.com/">ثيمات</a></li>
< /ul>
< /li>
< li><a href="http://رابط مدونتك.com/">حماية</a></li>
< li><a href="http://رابط مدونتك.com/">برمجة</a></li>
< li><a href="http://رابط مدونتك.com/">برامج</a></li>
< li><a href="http://رابط مدونتك.com/">مواقع</a></li>
< li><a href="http://رابط مدونتك.com/">العاب</a></li>
< li><a href="http://رابط مدونتك.com/">مقالات</a></li>
< /ul>

< style>
/*------menu D: رابط مدونتك.com ------*/
#menu{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfW1F2dIEfGxQlCo4D11270CZQHYgf5I7HBFnc9Ei5gmzCYt7bBOus5W74PiNqjPorwT5xdHGyw5eJGOFxXU4A71gAidkq4_TQX2SKpUD-qfeK8YH8WhDGmjsrG_ELZhXTnTfzavr_8ks/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/AVvXsEjFdh69T1BkcyIukFhCSF_CNzHgtx5IKvdNXTaKoLgCbPMJ8vzMB_kLvLxp_9M_PzdFxn_MlemqpbqDVP9sDIU9zoii91vm76FagyK3llA2BZGTdS4pDt9rZ7VV6LWm1An3CHKDhlg85ws/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/AVvXsEgNvany8S9zV-3ecCzGbF3KWixeQ_AiqfwTvnYfEqm2Jsi6tFceQuMA7DLEaTA_ywnqwJZCk4GJN59nMrvYOEBiMSZGdHn5ExE3IeaLJU1iu4hnryOXFZ67GkjWmImK129crs1ZajvwDUo/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/AVvXsEjlhvk8brd_Jqcvm2F_k_9twTX76IQ8nI-8a2tjhyphenhyphenEZ7XI62ezrMsABqxeS3vvuvqtOP-y6Zf6DIz43SYw3t5b97BeJ5-3AVihtL8b3PmugeMdeFsTI-pWivhGHgPkzKiN06_SjAz-Ssf0/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/AVvXsEi3tFgyXVaTcwyJP1-wIuxvrYOkkOuxh_n3s1ULhly_KprThzWZiM1I1bM-lbvD0u3uethBLHWSWQdLn-ThBfr0Ue252Sw_X1Z4JHDrrTTpuQuklY8WdUDYVR_poeBzwx5iKDQ6yNAATZ0/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/AVvXsEhBBYiyo-7XVzKC_ie-34dek9ZbFGmbaYTYtYVFKrbxihvJBDlSIrry5QQqnHP3GzJj2uHD78VF_ivmBz7HodcKAqAaUeg7UpCQfHoM6thADOpfyU8em1KXjUCTbKx9rB2oJ86_09084ag/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>
وسلامتكم

akbear

مرسلة بواسطة akbear

إرسال تعليق

0 تعليقات