السلام عليكم ورحمة الله

هذه أول مساهمة لي في مجتمع Arabia وسيكون أول مقال إضافة للمقالات التي بدأ بها Hussam3bd

وإن شاء الله تكون إضافتي مفيدة للجميع

الإشارة إلى وجود قائمة فرعية:

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

لرؤية صورة للتطبيق :

لتحميل ملفات الكود :

http://www.mediafire.com/do...

القوائم الفرعية ....

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

كيف نستطيع تمييزها بدون استخدام الجافا سكربت وبدون استخدام classes إضافية كأن يكون هناك if ضمن css تختبر إذا كان هناك قائمة فرعية تقوم بتمييز هذا القسم بصورة أو بلون معين ؟؟

الفكرة هي إنشاء كود cssيستطيع تمييز القسم الذي فيه قائمة فرعية من دون أي كلاس جديد لهذا القسم _____شيء مثل ميثود has () in jquery ______

فالحل يكون باستخدام (pseudo elements : first-child , nth-last-child(2

لنطبق الفكرة بشكل عملي

كما العادة فإن القائمة الرئيسية عبارة عن تعداد ul وبه مجموعة من الأقسامli ففي حال كان لدينا قائمة فرعية نقوم بإنشاء تعداد آخر ul بداخل القسم الذي نريد فيكون لدينا كالتالي:

    <nav>
        <ul class="nav">
            <li><a href="">Home</a></li>                 
            <li><a href="">design</a>
                <ul>
                    <li><a href="">Adobe</a>
              <ul>
                <li><a href="">photoshop</a></li>
                <li><a href="">Dream weaver</a></li>
              </ul>
            </li> 
            <li><a href="">other</a></li>
            <li><a href="">other</a></li>                            
                </ul>
        </li>
        <li><a href="">About</a></li>
      </ul>
   </nav> 

نريد أولا أن نتأكد من أن العنصر li يحتوي على عنصر a كعنصر أول ثم نريد التأكد من وجود عنصر آخر بعد a والذي سيكون ul للقائمة الفرعية ...وكأن لدي شرطين يجب أن يتحقق كلاهما لكي يتم تمييز li التي تحوي قائمة فرعية

nav li a:first-child:nth-last-child(2) 

ننشئ كود التنسيقات العامة للقائمة الخاصة بنا :

   .nav  li{ position: relative;             
       background-color:black ; }
   .nav > li{float: left;
       border-bottom: 4px #aaa solid;
       margin-right: 1px; }
   .nav  li a{color: white;             
        font-size: 80%;
        text-transform: uppercase;
        padding: 10px 30px; 
        line-height: 30px;
        text-decoration: none;}

من المهم وضع position: relative لعنصرli

عندما نستخدم > فإنها دلالة على أنني أريد تطبيق هذا التنسيق على عناصر القائمة الرئيسية فقط دون عناصر القائمة الفرعية

كود تنسيق القائمة الفرعية :

لمنع ظهور القائمة الفرعية في حال عدم مرور الماوس استخدمنا left: -99999px نستطيع استخدام خاصية display أيضا

  .nav li ul{ 
        position: absolute;
        white-space: nowrap;
        border-bottom: 5px orange solid;
        z-index: 1;
        left: -99999px;}
 .nav > li:hover > ul{
              left: auto;
              margin-top: 5px;
              min-width: 100%;}
 .nav >li li:hover > ul{
              left: 100%;
              margin-left: 1px;
              top: -1px;}

في مثالي هذا أريد تمييز التبويب الذي يحوي قائمة فرعية بسهم صغير وسأستخدم before لرسم السهم

كود رسم السهم:

.nav li a:first-child:nth-last-child(2):before{ 
  content: ""; 
  position: absolute; 
  height: 0; 
  width: 0; 
  border: 5px solid transparent;   
  top: 50% ;
  right:5px;}
.nav > li > a:first-child:nth-last-child(2):before { 
  border-top-color: #aaa;}

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

كود تنسيق السهم عند تمرير الماوس:

.nav > li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent; 
  border-bottom-color: orange; 
  margin-top:-5px;}

كود تنسيق السهم عند عدم تمرير الماوس :

 .nav > li > a:first-child:nth-last-child(2):before { 
  border-top-color: #aaa;}