|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
01-06-2015, 11:29 AM | #1 |
مدون جديد
تاريخ التسجيل: Jun 2013
المشاركات: 19
الإجابات الموجودة: 1
|
مجاب: كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر
مرحبا أخوتي الاعضاء كيف لي ان اضيف قائمة متعددة الاعمدة في القائمة المنسدلة السفلى "طبعاً في بلوجر"؟ المثال في الصورة أشكر كل من يساعدني . وجدت موقعاً يوجد فيه كود للقائمة التي احتاجها ولكن لا اعرف كيف اضيفها للمدونة هل لك ان تساعدني فيها الموقع: Bootstrap Multi-column Dropdown Menu Tutorial | alijafarian.com
__________________
|
أفضل جواب - كتبه المدون |
اين القالب المرفق اخي لم اجده لكن على اي حال لتغيير القائمة اذهب الى قالب مدونتك ثم إبحث عن هذا الكود كود بلغة HTML:
<div class='menuku'> <ul> <li class='home'><a href='/'>Home</a></li> <li><a href='#'>Drop menu</a> <ul> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> <li><a href='#'>Menu 3</a></li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a></li> </ul> </li> <li><a href='#'>Drop menu 2</a> <ul> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> <li><a href='#'>Menu 3</a> <ul> <li><a href='#'>Menu 3.1</a></li> <li><a href='#'>Menu 3.2</a></li> <li><a href='#'>Menu 3.3</a></li> <li><a href='#'>Menu 3.4</a></li> </ul> </li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a></li> </ul> </li> <li><a href='#'>Drop menu 3</a> <ul> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> <li><a href='#'>Menu 3</a></li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a></li> </ul> </li> <li><a href='http://creatingwebsite-maskolis.blogspot.com/2012/07/johny-joss-banget-template-joss-untuk.html'>Instruction to use</a></li> <li><a href='http://johnytampan.blogspot.com/p/sample-page_13.html'>Sample Page</a></li> </ul> </div> كود بلغة HTML:
<link href='http://alijafarian.com/demos/bootstrap-multi-column-dropdown-menu/css/bootstrap-3.1.1.min.css' rel='stylesheet' type='text/css'/> <style> * { margin: 0; padding: 0; font-family: 'Oswald', sans-serif; } img { display: block; max-width: 100%; height: auto; } .content { width: 80%; margin: 50px auto; padding: 20px; } .content h1 { font-weight: 400; text-transform: uppercase; margin: 0; color: #fff; } .content h2 { font-weight: 400; text-transform: uppercase; color: #333; margin: 0 0 20px; } .content p { font-size: 1em; font-weight: 300; line-height: 1.5em; margin: 0 0 20px; } .content p:last-child { margin: 0; } .content a.button { display: inline-block; padding: 10px 20px; background: #ff0; color: #000; text-decoration: none; } .content a.button:hover { background: #000; color: #ff0; } .content.title { position: relative; background: #333; } .content.title h1 span.demo { display: inline-block; font-size: .5em; padding: 10px; background: #fff; color: #333; vertical-align: top; } .content.title .back-to-article { position: absolute; bottom: -20px; left: 20px; } .content.title .back-to-article a { padding: 10px 20px; background: #f60; color: #fff; text-decoration: none; } .content.title .back-to-article a:hover { background: #f90; } .content.title .back-to-article a i { margin-left: 5px; } .content.white { background: #fff; box-shadow: 0 0 10px #999; } .content.black { background: #000; } .content.black p { color: #999; } .content.black p a { color: #08c; } .dropdown-menu { min-width: 200px; } .dropdown-menu.columns-2 { min-width: 400px; } .dropdown-menu.columns-3 { min-width: 600px; } .dropdown-menu li a { padding: 5px 15px; font-weight: 300; } .multi-column-dropdown { list-style: none; } .multi-column-dropdown li a { display: block; clear: both; line-height: 1.428571429; color: #333; white-space: normal; } .multi-column-dropdown li a:hover { text-decoration: none; color: #262626; background-color: #f5f5f5; } @media (max-width: 767px) { .dropdown-menu.multi-column { min-width: 240px !important; overflow-x: hidden; } } @media (max-width: 480px) { .content { width: 90%; margin: 50px auto; padding: 10px; } } </style> <!--/.content--> <nav class='navbar navbar-default' role='navigation'> <div class='navbar-header'> <button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'> <span class='sr-only'>Toggle navigation</span> <span class='icon-bar'/> <span class='icon-bar'/> <span class='icon-bar'/> </button> <a class='navbar-brand' href='#'>Beach Backpacks</a> </div> <!--/.navbar-header--> <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'> <ul class='nav navbar-nav'> <li class='dropdown'> <a class='dropdown-toggle' data-toggle='dropdown' href='#'>One Column <b class='caret'/></a> <ul class='dropdown-menu'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </li> <li class='dropdown'> <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Two Column <b class='caret'/></a> <ul class='dropdown-menu multi-column columns-2'> <div class='row'> <div class='col-sm-6'> <ul class='multi-column-dropdown'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here that's extra long so we can see how it looks</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </div> <div class='col-sm-6'> <ul class='multi-column-dropdown'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </div> </div> </ul> </li> <li class='dropdown'> <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Three Column <b class='caret'/></a> <ul class='dropdown-menu multi-column columns-3'> <div class='row'> <div class='col-sm-4'> <ul class='multi-column-dropdown'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </div> <div class='col-sm-4'> <ul class='multi-column-dropdown'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </div> <div class='col-sm-4'> <ul class='multi-column-dropdown'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </div> </div> </ul> </li> <li><a href='#'>Link</a></li> </ul> </div> <!--/.navbar-collapse--> </nav> <!--/.navbar--> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> <script src='http://alijafarian.com/demos/bootstrap-multi-column-dropdown-menu/js/bootstrap-3.1.1.min.js' type='text/javascript'/> |
01-06-2015, 09:33 PM | #2 |
مدون جديد
تاريخ التسجيل: Aug 2013
المشاركات: 44
الإجابات الموجودة: 2
|
رد: كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر
اضافة تلك القائمة الى مدونتك هو من الشهولة بمكان اخي الكريم هاتي رابط مدونتك او صورة لها مع تحديد المكان المراد اضافة القائمة إليه ـــــــــــــــــ التوقيع ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــــــــــــــ معهد تطوير الذات و التنمية البشرية
__________________
|
01-07-2015, 02:08 AM | #3 | |
مدون جديد
تاريخ التسجيل: Jun 2013
المشاركات: 19
الإجابات الموجودة: 1
|
رد: كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر
اقتباس:
شكراً على ردك عزيزي هذه هي مدونتي http://www.gotinenstrana.co.vu/ اريد القائمة ان تكون بمكان القائمة الحلية الموجودة في المدونة بمعنى اريد ازالية القديمة واضافة القائمة المرادة. أرفقت لك القالب ايضاً قد تحتاجه
__________________
|
|
01-07-2015, 10:23 PM | #4 |
مدون جديد
تاريخ التسجيل: Aug 2013
المشاركات: 44
الإجابات الموجودة: 2
|
رد: كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر
اين القالب المرفق اخي لم اجده لكن على اي حال لتغيير القائمة اذهب الى قالب مدونتك ثم إبحث عن هذا الكود كود بلغة HTML:
<div class='menuku'> <ul> <li class='home'><a href='/'>Home</a></li> <li><a href='#'>Drop menu</a> <ul> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> <li><a href='#'>Menu 3</a></li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a></li> </ul> </li> <li><a href='#'>Drop menu 2</a> <ul> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> <li><a href='#'>Menu 3</a> <ul> <li><a href='#'>Menu 3.1</a></li> <li><a href='#'>Menu 3.2</a></li> <li><a href='#'>Menu 3.3</a></li> <li><a href='#'>Menu 3.4</a></li> </ul> </li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a></li> </ul> </li> <li><a href='#'>Drop menu 3</a> <ul> <li><a href='#'>Menu 1</a></li> <li><a href='#'>Menu 2</a></li> <li><a href='#'>Menu 3</a></li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a></li> </ul> </li> <li><a href='http://creatingwebsite-maskolis.blogspot.com/2012/07/johny-joss-banget-template-joss-untuk.html'>Instruction to use</a></li> <li><a href='http://johnytampan.blogspot.com/p/sample-page_13.html'>Sample Page</a></li> </ul> </div> كود بلغة HTML:
<link href='http://alijafarian.com/demos/bootstrap-multi-column-dropdown-menu/css/bootstrap-3.1.1.min.css' rel='stylesheet' type='text/css'/> <style> * { margin: 0; padding: 0; font-family: 'Oswald', sans-serif; } img { display: block; max-width: 100%; height: auto; } .content { width: 80%; margin: 50px auto; padding: 20px; } .content h1 { font-weight: 400; text-transform: uppercase; margin: 0; color: #fff; } .content h2 { font-weight: 400; text-transform: uppercase; color: #333; margin: 0 0 20px; } .content p { font-size: 1em; font-weight: 300; line-height: 1.5em; margin: 0 0 20px; } .content p:last-child { margin: 0; } .content a.button { display: inline-block; padding: 10px 20px; background: #ff0; color: #000; text-decoration: none; } .content a.button:hover { background: #000; color: #ff0; } .content.title { position: relative; background: #333; } .content.title h1 span.demo { display: inline-block; font-size: .5em; padding: 10px; background: #fff; color: #333; vertical-align: top; } .content.title .back-to-article { position: absolute; bottom: -20px; left: 20px; } .content.title .back-to-article a { padding: 10px 20px; background: #f60; color: #fff; text-decoration: none; } .content.title .back-to-article a:hover { background: #f90; } .content.title .back-to-article a i { margin-left: 5px; } .content.white { background: #fff; box-shadow: 0 0 10px #999; } .content.black { background: #000; } .content.black p { color: #999; } .content.black p a { color: #08c; } .dropdown-menu { min-width: 200px; } .dropdown-menu.columns-2 { min-width: 400px; } .dropdown-menu.columns-3 { min-width: 600px; } .dropdown-menu li a { padding: 5px 15px; font-weight: 300; } .multi-column-dropdown { list-style: none; } .multi-column-dropdown li a { display: block; clear: both; line-height: 1.428571429; color: #333; white-space: normal; } .multi-column-dropdown li a:hover { text-decoration: none; color: #262626; background-color: #f5f5f5; } @media (max-width: 767px) { .dropdown-menu.multi-column { min-width: 240px !important; overflow-x: hidden; } } @media (max-width: 480px) { .content { width: 90%; margin: 50px auto; padding: 10px; } } </style> <!--/.content--> <nav class='navbar navbar-default' role='navigation'> <div class='navbar-header'> <button class='navbar-toggle' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'> <span class='sr-only'>Toggle navigation</span> <span class='icon-bar'/> <span class='icon-bar'/> <span class='icon-bar'/> </button> <a class='navbar-brand' href='#'>Beach Backpacks</a> </div> <!--/.navbar-header--> <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'> <ul class='nav navbar-nav'> <li class='dropdown'> <a class='dropdown-toggle' data-toggle='dropdown' href='#'>One Column <b class='caret'/></a> <ul class='dropdown-menu'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </li> <li class='dropdown'> <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Two Column <b class='caret'/></a> <ul class='dropdown-menu multi-column columns-2'> <div class='row'> <div class='col-sm-6'> <ul class='multi-column-dropdown'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here that's extra long so we can see how it looks</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </div> <div class='col-sm-6'> <ul class='multi-column-dropdown'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </div> </div> </ul> </li> <li class='dropdown'> <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Three Column <b class='caret'/></a> <ul class='dropdown-menu multi-column columns-3'> <div class='row'> <div class='col-sm-4'> <ul class='multi-column-dropdown'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </div> <div class='col-sm-4'> <ul class='multi-column-dropdown'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </div> <div class='col-sm-4'> <ul class='multi-column-dropdown'> <li><a href='#'>Action</a></li> <li><a href='#'>Another action</a></li> <li><a href='#'>Something else here</a></li> <li class='divider'/> <li><a href='#'>Separated link</a></li> <li class='divider'/> <li><a href='#'>One more separated link</a></li> </ul> </div> </div> </ul> </li> <li><a href='#'>Link</a></li> </ul> </div> <!--/.navbar-collapse--> </nav> <!--/.navbar--> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> <script src='http://alijafarian.com/demos/bootstrap-multi-column-dropdown-menu/js/bootstrap-3.1.1.min.js' type='text/javascript'/>
__________________
|
01-07-2015, 11:02 PM | #5 |
مدون جديد
تاريخ التسجيل: Jun 2013
المشاركات: 19
الإجابات الموجودة: 1
|
رد: كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر
__________________
|
01-08-2015, 06:48 PM | #6 | |
مدون جديد
تاريخ التسجيل: Jun 2013
المشاركات: 19
الإجابات الموجودة: 1
|
رد: كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر
اقتباس:
شكراً جزيلاُ على المساعدة ولكن حدثت بعض المشاكل : 1- السلايد شو توقف عن العمل. 2- كيف لي أن اغير لون القائمة ؟ 3- كيف لي أن اغير ارتفاع القائمة إلى height: 40px;؟
__________________
|
|
مواقع النشر (المفضلة) |
الكلمات الدلالية (Tags) |
قائمة متعددة الاعمد بلوجر |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
قائمة متعددة الالوان بتقنية css مع التأثير لمدونات بلوجر | Fareed | إضافات وأدوات بلوجر | 0 | 12-16-2014 09:10 PM |
مشكلة في اضافة القائمة المنسدلة | محمد ليث النعيمي | طلبات الدعم الفني | 2 | 01-04-2014 06:16 PM |
مشكلة مع القائمة المنسدلة | Aero | طلبات الدعم الفني | 0 | 02-17-2013 02:48 AM |
حصريا اضافة القائمة المنسدلة بتقنية css بجميع اشكل المدونات فى معهد خبراء بلوجر | السيد ابو جبل | إضافات وأدوات بلوجر | 4 | 09-06-2012 10:45 PM |
مشكل في القائمة المنسدلة هل من مساعد | dahmane1981 | طلبات الدعم الفني | 2 | 08-11-2012 11:14 PM |
الساعة الآن 03:12 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |