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

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

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

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

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

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

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

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

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

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

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

صورة :

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

الكود:

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

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

صورة :

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

الكود :

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

الشكل الثالث " أزرق " :

صورة :

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

الكود :

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

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

صورة :

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

الكود :

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