السبت، 17 مايو 2014

قائمه منسدله بلغة CSS3 بشكل جميل جدا + شرح التركيب

انقطعت عن التدوين فى مدونة ابداعاتى لفترة أنا و الأخ الفاضل محمود سعيد بسبب مشاغل الدراسة وهانحن انتهينا من الدراسة وعدنا لنقدم لكم الجديد والحصرى فى مجال البلوجر داعين اللــه التوفيف والسـداد 
فى موضوعى هذا سأقدم لكم قائمة منسدلة احترافية بتقنية css3 بشكلها الجميل والمميز مع شرح بسيط ومفصل للتركيب بدون أخطاء واستخدام هذه القائمة فى مدونتك يعتبر أهمية قصوى لأنها وبلاشك ستكسب مدونتك رونق وجمال غير عادى ولكم المعاينة والشرح

قبل كل شى نتطرق للمعاينة 
لمعاينة القائمه اضغط هنا

الأكـــــــــــــواد المطلوبة 
(1) أكواد الـــ CSS3
<style>
.menu,.sub-menu {
list-style-type: none;
margin: 0;
padding: 0;
 }

.menu li {
background-color: #3E454D;
cursor: pointer;
position: relative;
transition: background-color .5s;
-moz-transition: background-color .5s;
-o-transition: background-color .5s;
-webkit-transition: background-color .5s;
 }

.menu li:hover {background-color: #353B41 !important;}

.menu a {
color: #FFF;
display: block;
font-family: 'Open Sans', sans-serif;
height: 100%;
margin: 0 5px;
overflow: hidden;
position: relative;
text-align: center;
text-decoration: none;
text-transform: uppercase;
word-wrap: break-word;
 }

.menu a:hover {color: #FFF;}

.menu {height: 90px;}

.menu > li {
float: left;
height: 100%;
width: 15%;
width: calc((100% - 90px) / 5);
width: -moz-calc((100% - 90px) / 5);
width: -webkit-calc((100% - 90px) / 5);
}

.menu > li.home {
background: #3E454D url(http://s26.postimg.org/qbf4q4j9h/home.png) center no-repeat;
width: 90px;
}

.menu > li.current {
background-color: #F2762E !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.menu > li:not(:first-child) {
box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
-moz-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
-webkit-box-shadow: inset 1px 0 0 0 #272B31, inset 2px 0 0 0 #434A52;
}

.menu > li.home > a {color: transparent !important;}

.menu > li > a > span {
left: 0;
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
}

.sub-menu {
max-height: 0;
min-width: 100%;
overflow: hidden;
position: absolute;
top: 100%;
transition: max-height .5s .2s;
-moz-transition: max-height .5s .2s;
-o-transition: max-height .5s .2s;
-webkit-transition: max-height .5s .2s;
 }

li:hover > .sub-menu {max-height: 600px;}

.sub-menu li {height: 60px;}

.sub-menu a {
line-height: 60px;
transition: color .5s;
-moz-transition: color .5s;
-o-transition: color .5s;
-webkit-transition: color .5s;
white-space: nowrap;
 }

.sub-menu li.current a,.sub-menu a:hover {color: #F2762E !important;}
</style>
(2) كود الــ HTML 
<div id="wrapper">
<nav>
<ul class="menu">
<li><a href="#"><span>قسم</span></a></li>
<li><a href="#"><span>+قسم</span></a>
<ul class="sub-menu">
<li><a href="#">قسم فرعى</a></li>
<li><a href="#">قسم فرعى</a></li>
<li><a href="#">قسم فرعى</a></li>
</ul>
</li>
<li><a href="#"><span>قسم</span></a></li>
<li><a href="#"><span>قسم</span></a></li>
<li><a href="#"><span>قسم</span></a></li>
<li class="home current"><a href="#"><span>Home</span></a></li>
</ul>
</nav>
</div>

شرح التركيب
(1)
  تركيب القائمة من التخطيط فى لوجة التحكم
اذهب للتخطيط >> اضافة أداة >> Html/javascript
ثم انسخ الأكواد السابقة ( CSS3 ، HTML )
وضعهم فى الأداة وقم بالحفظ 

(2)
تركيب الأداة من القالب فى لوجة التحكم 
حرر قالب مدونتك >> ابحث عن أكواد القائمة القديمة 
استبدل الأكواد القديمة بالجديدة 
التعديلات على القائمة
(1) فى كود الـ HTML استبدل الكلمات العربية بما يناسبك
(2) لتغيير لون الخط الافتراضى ( الابيض ) لأى لون آخر
افتح كود CSS ثم اضغط على } CTRL + F للبحث 
قم بالبحث عن هذا الجزء من الكود .menu a {
ستجد اسفله مباشرة هذا الكود #fff
استبدله بكود اى لون تريده >> يمكن الحصول على اكواد الالوان >>  من هنا
(3) لتغيير اللون بعد وقوف الماوس علي الخط ( الــ HOVER )
افتح كـــــــود الــ CSS ثم ابحث عن هذا الجزء .menu a:hover {
واستبدل اللون كما ذكرت سابقا 
(4) من لديه اى تعديلات خاصـــة يترك تعليقه 

كلمة شكر من الأعضاء تجعلنى ازداد فى  العطاء
من فضلك اضغظ لايك لمشاهدة لينك التحميل

6 التعليقات:

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

    ردحذف
    الردود
    1. الفضل للأخ محمود ,,
      شكرا لمرورك اخى مدثر .
      (f)

      حذف
  2. قائمة رائعة جدا والوان متناسقة أبدعت أخى محمود

    ردحذف

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار