الدرس 44: طريقة انشاء قائمة منسدلة متعددة المستويات لشريط أقسام التصنيفات و تسميات مواضيع بلوجر

شرح كيفية انشاء و اضافة قائمة منسدلة متعددة المستويات أفقية ورأسية تظهر فيها موضوعات أقسام وتصنيفات تسميات مدونة بلوجر عبر اكواد CSS و انشاء شريط الاقسام عبر اكواد HTML

السلام عليكم احبتي الكرام فى حلقة جديدة على مدونة علوم وتقنيات و على قسم دورة انشاء مدونة بلوجر احترافية , فى هذا الدرس ان شاء الله ساقدم لكم طريقة عمل قائمة منسدلة متعددة المستويات لشريط أقسام التصنيفات و تسميات مواضيع بلوجر بشكل و تاثيرات جميلة عبر اكواد CSS و انشاء شريط اقسام التسميات عبر اكواد HTML ,حيث تمكنك من ربط التسميات او الاقسام الفرعية مع كل قسم تريده

كيفية انشاء قائمة منسدلة لشريط تسميات مواضيع blogger

تابع الشرح بالفيديو حتى تطبيق هذا الشرح بشكل صحيح

1- اضافة اكواد CSS فوق الوسم </b:skin>

#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: right; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; right: 0; z-index: 598; width: 100%;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; right: auto; left: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; right: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }

#cssmenu { background: #333; border-bottom: 4px solid #1b9bff; font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; font-size: 12px; }
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after { content: ''; display: block; clear: both; }

#cssmenu a { background: #333; color: #CBCBCB; padding: 0 20px; }
#cssmenu ul { text-transform: uppercase; }
#cssmenu ul ul { border-top: 4px solid #1b9bff;text-transform: none; min-width: 190px; }
#cssmenu ul ul a { background: #1b9bff; color: #FFF; border: 1px solid #0082e7; border-top: 0 none; line-height: 150%; padding: 16px 20px;}
#cssmenu ul ul ul { border-top: 0 none; }
#cssmenu ul ul li { position: relative }

#cssmenu > ul > li > a { line-height: 48px;  }
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
#cssmenu ul ul li:hover > a { background: #35a6ff; }
#cssmenu ul ul li:last-child > a { border-radius: 0 0 3px 3px; box-shadow: 0 1px 0 #1b9bff;}
#cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
#cssmenu ul ul li.has-sub > a:after { content: '+'; position: absolute; top: 50%; left: 15px; margin-top: -8px; }

#cssmenu ul li:hover > a, #cssmenu ul li.active > a { background: #1b9bff; color: #FFF;}
#cssmenu ul li.has-sub > a:after { content: '+'; margin-right: 5px; }
#cssmenu ul li.last ul { right: auto; left: 0; }
#cssmenu ul li.last ul ul { right: auto; left: 99.5%;}

2- اضافة اكواد HTML مكان اكواد شريط الاقسام نجده على الاغلب تحت الوسم </Header>

<div id='cssmenu'>
  <ul>
<li class='active'><a href='index.html'>الرئيسية</a></li>
<li class='has-sub '><a href='#'>تقنيات</a>
        <ul>
<li class='has-sub '><a href='#'>البرامج</a>
              <ul>
<li><a href='http://www.arabes1.com/search/label/%D8%A3%D8%AD%D8%AF%D8%AB%20%D8%A7%D9%84%D8%A8%D8%B1%D8%A7%D9%85%D8%AC'>برامج الكمبيوتر</a></li>
<li><a href='http://www.arabes1.com/search/label/%D8%A3%D9%84%D8%B9%D9%80%D8%A7%D8%A8%20%D9%83%D9%85%D8%A8%D9%8A%D9%88%D8%AA%D8%B1'>العاب الكمبيوتر</a></li>
<li><a href='http://www.arabes1.com/search/label/%D9%88%D9%8A%D9%86%D8%AF%D9%88%D8%B2'>الوينذوز</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>شروحات مواقع</a>
              <ul>
<li><a href='http://www.arabes1.com/search/label/%D8%AF%D9%88%D8%B1%D8%A9%20%D8%A5%D8%AD%D8%AA%D8%B1%D8%A7%D9%81%20%D8%A7%D9%84%D8%A8%D9%84%D9%88%D8%AC%D8%B1%20blogger'>دورة بلوجر</a></li>
<li><a href='http://www.arabes1.com/search/label/%D8%A5%D8%B4%D9%87%D8%A7%D8%B1%20%D8%A7%D9%84%D9%85%D9%88%D8%A7%D9%82%D8%B9'>اشهار مواقع</a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub '><a href='#'>العناوين</a><ul>
<li class='has-sub '><a href='#'>العنوان الفرعي1</a><ul>
<li><a href='#'>عنوان ثانوي 1</a></li>
<li><a href='#'>عنوان ثانوي 2</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>العنوان الفرعي2</a><ul>
<li><a href='#'>عنوان ثانوي 1</a></li>
<li><a href='#'>عنوان ثانوي 2</a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub '><a href='#'>العنوان</a><ul>
<li><a href='#'>عنوان فرعي 1</a></li>
<li><a href='#'>عنوان فرعي 2</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>العنوان</a><ul>
<li class='has-sub '><a href='#'>العنوان الفرعي</a><ul>
<li><a href='#'>عنوان ثانوي 1</a></li>
<li><a href='#'>عنوان ثانوي 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>العنوان</a></li>
</ul>
</div>

تعديل المقال

علوم و تقنيات

الدرس 44: طريقة انشاء قائمة منسدلة متعددة المستويات لشريط أقسام التصنيفات و تسميات مواضيع بلوجر

مقالات قد تهمك

أقسام الوصول السريع ( مربع البحث )

الدرس 44: طريقة انشاء قائمة منسدلة متعددة المستويات لشريط أقسام التصنيفات و تسميات مواضيع بلوجر

مقالات قد تهمك