بسم الله الرحمن الرحيم
والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة والسلام
السلام عليكم ورحمة الله وبركاته.
والصلاة والسلام على خير خلق الله سيدنا محمد عليه افضل الصلاة والسلام
السلام عليكم ورحمة الله وبركاته.
[CSS3] قائمة منسدلة كاملة احترافية للموقع
طريقة التركيب :
- ادخل مدونتك
- ابحث عن ]]></b:skin>
- ضع هذا الكود فوقه مباشره او قبله :
@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
#contact-links{
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
text-align: right;
font: 12px 'Droid Arabic Kufi', serif;
direction: rtl;
}
#contact-links a{
color:#4C9FEB;
}
#contact-links a:hover{
color:#3D85C6;
}
a#o-7lol-dro{
background:url(https://jetara.googlecode.com/svn/trunk/icon-ios7-arrow-down-16.png);
background-repeat:no-repeat;
background-position:center left 5px;
padding-left:25px!important;
}
#menu-container{
background:-webkit-gradient(linear,left top,left bottom,from(#f6f6f6),color-stop(#e9eaea),0));
background:-webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background:-moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background:-o-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background:linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
-webkit-border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
border-radius:0 0 4px 4px;
border:1px solid rgba(0,0,0,0.1);
-webkit-box-shadow:-1px 1px 0 rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow:-1px 1px 0 rgba(255, 255, 255, 0.8) inset;
box-shadow:-1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear:both;
height:46px;
padding-top:1px;
}
#neat-menu{
float:right;
}
#neat-menu a{
text-decoration:none;
}
#neat-menu ul{
list-style:none;
margin:0;
padding:0;
}
#neat-menu > ul > li{
float:right;
padding-bottom:12px;
}
#neat-menu ul li a{
-webkit-box-shadow:-1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow:-1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
box-shadow:-1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
border-color:#D1D1D1;
border-image:none;
border-style:solid;
border-width:0 1px 0 0;
color:#333333;
display:block;
height:25px;
line-height:25px;
padding:11px 10px 10px;
text-shadow:0 1px 0 #FFFFFF;
}
#neat-menu > ul > li.active > a{
background:-webkit-gradient(linear,left top,left bottom,from(#55A6F1),color-stop(#3F96E5),0));
background:-webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:-moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:-o-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom:1px solid #2D81CC;
border-top:1px solid #4791D6;
-webkit-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
-moz-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color:#FFFFFF;
margin:-1px 0 -1px -1px;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu > ul > li.active > a{
background:url(https://jetara.googlecode.com/svn/trunk/house-32.png);
border:0;
background-repeat:no-repeat;
background-position:center;
color:#FFFFFF;
margin:-1px 0 -1px -1px;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
width:25px;
}
#neat-menu ul ul{
background:-webkit-gradient(linear,left top,left bottom,from(#F7F7F7),color-stop(#F4F4F4),0));
background:-webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background:-moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background:-o-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background:linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border:1px solid rgba(0, 0, 0, 0.1);
-webkit-box-shadow:0 1px 0 #FFFFFF inset;
-moz-box-shadow:0 1px 0 #FFFFFF inset;
box-shadow:0 1px 0 #FFFFFF inset;
height:0;
margin-top:1px;
opacity:0;
overflow:hidden;
width:240px;
padding:0;
position:absolute;
visibility:hidden;
z-index:1;
-webkit-transition:all .5s;
-moz-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
}
#neat-menu ul li:hover ul{
margin-top:0\2;
height:auto;
opacity:1;
visibility:visible;
}
#neat-menu ul ul a{
border-left-width:0;
border-top:1px solid #D1D1D1;
-webkit-box-shadow:0 1px 0 #FFFFFF inset;
-moz-box-shadow:0 1px 0 #FFFFFF inset;
box-shadow:0 1px 0 #FFFFFF inset;
color:#444444;
height:24px;
line-height:24px;
padding:7px 12px;
text-shadow:0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover{
background:-webkit-gradient(linear,left top,left bottom,from(#55A6F1),color-stop(#3F96E5),0));
background:-webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:-moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:-o-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background:linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-top:1px solid #4791D6;
-webkit-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
-moz-box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
box-shadow:-1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color:#FFFFFF;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.3);
}
#neat-menu ul ul li:first-child a{
border-top-width:0;
}
#menu-search{
margin:8px 10px 0 3px;
float:left;
}
#menu-search form{
background:url("data:image/gif;base64,R0lGODlhDAAMAMQRANXV1fPz897e3sbGxvX2+Nzc3NHR0dvb2+np6ebm5vT09OLi4sHBwba2trS0tMjIyLOzs////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABEALAAAAAAMAAwAAAVHYBQtT/MsYhoBUNsC6uKcAemg4uMkaTKnDYgqAmmkBhBE7ycSQB5KxANySCkMjmzLwVApCqXHgdEwDgkiBbk7TAXWbRXjEAIAOw==") no-repeat scroll 5% 50% transparent;
border:1px solid #CCCCCC;
-webkit-border-radius:3px 3px 3px 3px;
-moz-border-radius:3px 3px 3px 3px;
border-radius:3px 3px 3px 3px;
-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
-moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
box-shadow:0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
height:26px;
padding:0 25px;
position:relative;
width:130px;
}
#menu-search form:hover{
background-color:#F9F9F9;
}
#menu-search form input{
color:#999999;
height:26px;
text-shadow:0 1px 0 #FFFFFF;
background:none repeat scroll 0 0 transparent;
border:medium none;
float:right;
outline:medium none;
padding:0;
width:100%;
font: 10px 'Droid Arabic Kufi', serif;
}
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder{
color:#C4C4C4;
}
- ثم ادخل التخطيط.
- واختر مكان مناسب وجيد , مثلا اسفل الهيدر او فوقه , او فوق صندوق المشاركات .
- اختر اداة HTML/JAVASCRIPT
- والصق بها هذا الكود مع استبدال الروابط والنصوص :
<div id='contact-links'>
<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'> </a></li>
<li><a id='o-7lol-dro' href='#'>مسندلة</a>
<ul>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
</ul>
</li>
<!---------- 7lolblogger.com ---------->
<li><a id='o-7lol-dro' href='#'>مسندلة</a>
<ul>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
</ul>
</li>
<!---------- 7lolblogger.com ---------->
<li><a id='o-7lol-dro' href='#'>مسندلة</a>
<ul>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
<li><a href='http://blog.7lolblogger.com/'>قائمة منسدلة 5</a></li>
</ul>
</li>
<!---------- 7lolblogger.com ---------->
<li><a href='#'>قائمة فردية</a></li>
<li><a href='#'>قائمة فردية</a></li>
</ul>
</nav>
<div id='menu-search'>
<form method='get' action='/search'>
<input autocomplete='off' name='q' placeholder='ابحث ...' type='text' value=''/>
</form>
</div>
</div>
</div>
0 التعليقات