20‏/02‏/2014

2014-02-20T14:19:00+03:00
20‏/02‏/2014

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

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

قائمة منسدلة تقنية أحترافيه بأستخدام CSS3 والجيكوري

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





اولا: معاينة مباشرة للقائمة 


القائمة متوفره بأربع الوان اختر مايناسبك منها ثم اتبع الاتي :

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


  • أذهب الى التخطيط .
  • ثم اضافة اداة جديده > يجب ان تكون تحت الهيدر مباشره .
  • ثم الصق كود الاداة التي تريدها , طبعاَ مع تعديل الروابط والاسماء بما تريد :


الشكل الاول " الرمادي  :

صورة :
قائمة مسندلة احترافيه لون رمادي
قائمة مسندلة احترافيه لون رمادي

الكود:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
  <li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
   <li><a href="#">وصلة</a></li>
   <li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
  <ul>  <!-- القائمة الفرعية -->
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<li><a href="#">وصلة رئيسية</a>
  <ul>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<li><a href="#">وصلة رئيسية</a>
  <ul>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div>

<script>
  window.onload = function(){
    $("#menu > ul > li").hover(
      function(){ $(this).find("ul").slideDown('fast'); } ,
      function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}

#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #4D4D4D;
height: 45px;
}
#menu  ul {
  padding:0;
  margin:0;
  list-style:none;
  position:relative; //مهمة
}
#menu > ul > li {
  float:right;
  padding:0;
  margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #5C5B5B;
border-bottom: #5C5B5B;
}
#menu > ul > li > ul {
  position:absolute;
  top:49px;
  display:none;
  margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #5C5B5B;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #575757;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #5C5B5B !important;
padding: 10px;
}
</style>

الشكل الثاني " أحمر " : 

صورة :
قائمة مسندلة احترافيه لون أحمر
قائمة مسندلة احترافيه لون أحمر

الكود :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
  <li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
   <li><a href="#">وصلة</a></li>
   <li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
  <ul>  <!-- القائمة الفرعية -->
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<li><a href="#">وصلة رئيسية</a>
  <ul>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<li><a href="#">وصلة رئيسية</a>
  <ul>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div>

<script>
  window.onload = function(){
    $("#menu > ul > li").hover(
      function(){ $(this).find("ul").slideDown('fast'); } ,
      function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}

#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #DD395A;
height: 45px;
}
#menu  ul {
  padding:0;
  margin:0;
  list-style:none;
  position:relative; //مهمة
}
#menu > ul > li {
  float:right;
  padding:0;
  margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #CC173B;
border-bottom: 4px solid #DD395A;
}
#menu > ul > li > ul {
  position:absolute;
  top:49px;
  display:none;
  margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #CC173B;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #DD395A;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #CC173B !important;
padding: 10px;
}
</style>


الشكل الثالث " أزرق " : 
صورة :
قائمة مسندلة احترافيه لون أزرق
قائمة مسندلة احترافيه لون أزرق

الكود :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
  <li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
   <li><a href="#">وصلة</a></li>
   <li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
  <ul>  <!-- القائمة الفرعية -->
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<li><a href="#">وصلة رئيسية</a>
  <ul>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<li><a href="#">وصلة رئيسية</a>
  <ul>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div>

<script>
  window.onload = function(){
    $("#menu > ul > li").hover(
      function(){ $(this).find("ul").slideDown('fast'); } ,
      function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}

#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #4BCDF7;
height: 45px;
}
#menu  ul {
  padding:0;
  margin:0;
  list-style:none;
  position:relative; //مهمة
}
#menu > ul > li {
  float:right;
  padding:0;
  margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #39B8E9;
border-bottom: 4px solid #4BCDF7;
}
#menu > ul > li > ul {
  position:absolute;
  top:49px;
  display:none;
  margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #39B8E9;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #4BCDF7;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #39B8E9 !important;
padding: 10px;
}
</style>


الشكل الرابع " أخضر " : 

صورة :
قائمة مسندلة احترافيه لون اخضر
قائمة مسندلة احترافيه لون اخضر

الكود :
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:7lolblogger.com -->
<div id="menu">
<ul>
  <li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
   <li><a href="#">وصلة</a></li>
   <li><a href="#">وصلة</a></li>
<li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
  <ul>  <!-- القائمة الفرعية -->
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<li><a href="#">وصلة رئيسية</a>
  <ul>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<li><a href="#">وصلة رئيسية</a>
  <ul>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  <li><a href="#">وصلة فرعية</a></li>
  </ul>
</li>
<!-- menu by:7lolblogger.com -->
</ul>
</div>

<script>
  window.onload = function(){
    $("#menu > ul > li").hover(
      function(){ $(this).find("ul").slideDown('fast'); } ,
      function(){ $(this).find("ul").slideUp('fast'); } );
}
</script>
<style>
@font-face {
font-family: 'DroidKufi-Regular';
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot');
src: url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.eot?') format('embedded-opentype'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.woff') format('woff'),
url('http://dl.dropbox.com/u/22531314/webfont/fonts/DroidKufi-Regular.ttf') format('truetype');}

#menu {
width: 100%;
max-width: 1000px;
margin: 0 auto;
background: #222;
display: inline-block;
border-bottom: 5px solid #42E27C;
height: 45px;
}
#menu  ul {
  padding:0;
  margin:0;
  list-style:none;
  position:relative; //مهمة
}
#menu > ul > li {
  float:right;
  padding:0;
  margin:0 0 -7px 0;
}
#menu > ul > li > a {
display: block;
min-width: 50px;
text-align: center;
padding: 10px 15px 10px 15px;
text-decoration: none;
color: #FFF;
font: 13px 'DroidKufi-Regular';
}
#menu > ul > li > a:hover {
background: #2ABD5F;
border-bottom: 4px solid #42E27C;
}
#menu > ul > li > ul {
  position:absolute;
  top:49px;
  display:none;
  margin-left: -60px;
}
#menu > ul > li > ul > li > a {
background: #2ABD5F;
display: block;
padding: 5px 10px 5px 10px;
text-decoration: none;
color: #FFF;
border-bottom: 1px solid #42E27C;
min-width: 130px;
text-align: right;
font: 12px 'DroidKufi-Regular';
}
#menu > ul > li > ul > li > a:hover {
background: #222;
border-bottom: 1px solid #202020;
}
.gghfg a {
width: 48px !important;
min-width: 48px !important;
height: 25px;
background: #2ABD5F !important;
padding: 10px;
}
</style>


** يرجى عن النقل ذكر المصدر ** 

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

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

معلومات عن التدوينة
صورة التدوينة
عنوان التدوينة :قائمة منسدلة تقنية أحترافيه بأستخدام CSS3 والجيكوري - أربع الوان
ملخص التدوينة:

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

الساعه : 2014-02-20T14:19:00+03:00
تاريخ : 20‏/02‏/2014
من : المملكة العربيه السعوديه
التعليقات : 11
    انشرها :
تاق :
إضافات بلوجر › بلوجر › تصاميمي لكم › جيكوري › CSS3 ›
في

هناك 11 تعليقًا:

  1. يحيى عبسي24/6/14 20:15

    اخي ممكن تفول المكان الصحيح لتركيبها
    مدونتنا المتواضعة
    http://ichaa3.blogspot.com/

    ردحذف
    الردود
    1. goust24/6/14 22:16

      المكان الذي وضعتها فيه ممتاز ولاكن تحتاج الى تعديلات :
      ابحث عن max-width: 1000px; واحذفها .
      ثم ابحث عن height: 25px; واجعلها 40 بدلا من 25

      موفق.

      حذف
  2. يحيى عبسي24/6/14 23:25

    جد مشكور اخي لقد قمت بتعريبه لكن وجدت فيه الكثير من المشاكل و الحمد لله خطوة بخطوة في تطويره اخوك من النغرب 13عاما

    ردحذف
  3. يحيى عبسي24/6/14 23:30

    اخي ما زالت بعض المشاكل هي انها تظهر القوائم المنسدلة خلف مواضيع المدونة هل من حل

    ردحذف
    الردود
    1. goust25/6/14 13:15

      أخي احذفها اذا انها تسبب لك مشاكل .

      حذف
  4. يحيى عبسي24/6/14 23:31

    و السلايد شو لم يعد يظهر

    ردحذف
  5. يحيى عبسي25/6/14 16:50

    اخي ممكن حل لاني اريد ا اضيف قائمة اسفل الهيدر هي مهمة

    ردحذف
    الردود
    1. goust28/6/14 14:09

      ياغالي يمكن الاكواد تتعارض مع الاكواد التي عندك ! جرب قائمة اخرى الانترنت مليئ بها .

      حذف
  6. dfghjkl9/8/14 20:08

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

    ردحذف
    الردود
    1. goust10/9/14 23:56

      عليكم السلام , واسف على التأخر ب الرد .

      اتبع الاتي :
      ابحث عن ]]></b:skin>
      ضع فوقها مباشره الكود الذي يبداء بـ <style> وينتهي ب </style> ولاكن بدون الاقواس وكلمة style يعني فقط مابداخل الكلمتين .

      ثم بعد ذالك ابحث عن </head> وضع قبله هذه الاكواد :
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script>
      window.onload = function(){
      $("#menu > ul > li").hover(
      function(){ $(this).find("ul").slideDown('fast'); } ,
      function(){ $(this).find("ul").slideUp('fast'); } );
      }
      </script>

      ثم بعد ذالك ابحث عن <header> او المكان الذي تريد بالضبط وضع الاداة به , والصق كود html :
      <!-- menu by:7lolblogger.com -->
      <div id="menu">
      <ul>
      <li class='gghfg'><a href='#'><img src='https://lh4.googleusercontent.com/-2p92HsBcl3Q/UwUWKvmwkYI/AAAAAAAAGBY/qU9MdFbVDrc/home.png'/></a></li>
      <li><a href="#">وصلة</a></li>
      <li><a href="#">وصلة</a></li>
      <li><a href="#">وصلة رئيسية</a> <!-- الوصلة الأولى في القائمة -->
      <ul> <!-- القائمة الفرعية -->
      <li><a href="#">وصلة فرعية</a></li>
      <li><a href="#">وصلة فرعية</a></li>
      <li><a href="#">وصلة فرعية</a></li>
      </ul>
      </li>
      <li><a href="#">وصلة رئيسية</a>
      <ul>
      <li><a href="#">وصلة فرعية</a></li>
      <li><a href="#">وصلة فرعية</a></li>
      <li><a href="#">وصلة فرعية</a></li>
      </ul>
      </li>
      <li><a href="#">وصلة رئيسية</a>
      <ul>
      <li><a href="#">وصلة فرعية</a></li>
      <li><a href="#">وصلة فرعية</a></li>
      <li><a href="#">وصلة فرعية</a></li>
      </ul>
      </li>
      <!-- menu by:7lolblogger.com -->
      </ul>
      </div>

      حذف

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

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

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

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

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

أقرأ الموضوع

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

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

الاسم

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

رسالة