23‏/10‏/2014

2014-10-23T06:47:00+03:00
23‏/10‏/2014

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

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

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

[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>











.

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

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

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

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

الساعه : 2014-10-23T06:47:00+03:00
تاريخ : 23‏/10‏/2014
من : المملكة العربيه السعوديه
التعليقات : 3
    انشرها :
تاق :
إضافات بلوجر › بلوجر › CSS3 ›
في

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

  1. Unknown23/10/14 18:47

    جميل اخى استمر ^_^
    اخى هل راح تنشر القالب السابق

    ردحذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ولا ننشر تعليق يخص مدونات تخالف الشريعة الإسلامية , اما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولا بمحول الأكواد , واحب ان انبهك انه عند تعليقك تستطيع متابعة التعليق من خلال " إعلامي " الموجودة اسفل يسار صندوق التعليقات.

يمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود :
ت1 ت2 ت3 ت4 ت5 ت6 ت7 ت8 ت9 ج1 ج2 ج3 ج4 ج5 ج6 ج7 ج8 ج9 د1 د2

الاشتراك في: تعليقات الرسالة (Atom)

قالب حلول بلوجر النسخة الثالثه

قالب حلول بلوجر النسخة الثالثه متاح للتحميل , قالب يتميز بالاحترافيه والخفة والسرعه اضافة الى الارشقة الممتازة.

أقرأ الموضوع

الاشتراك في القائمة البريدية

هنا تستطيع الإشتراك في قائمتنا البريدية ضع إيملك بالأسفل وأضغط إشتراك ولا تنسي تأكيد إشتراكك من خلال بريدك الإلكتروني

الاسم

بريد إلكتروني

رسالة