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

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

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

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

1- اضافة اكواد CSS فوق الوسم  

<!-- start navmenu CSS by:www.arabes1.com -->#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%;} <!-- end navmenu CSS by:www.arabes1.com -->

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

<!-- start html navmenu by:www.arabes1..com --><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><!-- end html navmenu by:www.arabes1..com -->