قائمه منسدله بلغة 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) من لديه اى تعديلات خاصـــة يترك تعليقه 

كلمة شكر من الأعضاء تجعلنى ازداد فى  العطاء