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

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

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

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

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

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

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

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

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

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

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- menu by:the6professional.blogspot.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>