رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 
قديم 01-06-2015, 11:29 AM   #1
givarawan
مدون جديد
 
تاريخ التسجيل: Jun 2013
المشاركات: 19
الإجابات الموجودة: 1
Question مجاب: كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر

أنا : givarawan




مرحبا أخوتي الاعضاء

كيف لي ان اضيف قائمة متعددة الاعمدة في القائمة المنسدلة السفلى "طبعاً في بلوجر"؟

المثال في الصورة أشكر كل من يساعدني .

وجدت موقعاً يوجد فيه كود للقائمة التي احتاجها ولكن لا اعرف كيف اضيفها للمدونة هل لك ان تساعدني فيها

الموقع: Bootstrap Multi-column Dropdown Menu Tutorial | alijafarian.com
الصور المرفقة
نوع الملف: jpg aaaa.jpg (14.2 كيلوبايت, 4 مشاهدات)

الدعم العربي

givarawan غير متواجد حالياً   رد مع اقتباس
أفضل جواب - كتبه المدون
اين القالب المرفق اخي لم اجده
لكن على اي حال لتغيير القائمة اذهب الى قالب مدونتك ثم إبحث عن هذا الكود
كود 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
givarawan
مدون جديد
 
تاريخ التسجيل: Jun 2013
المشاركات: 19
الإجابات الموجودة: 1
افتراضي رد: كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر

أنا : givarawan




اقتباس:
المشاركة الأصلية كتبت بواسطة المدون مشاهدة المشاركة
اضافة تلك القائمة الى مدونتك هو من الشهولة بمكان اخي الكريم
هاتي رابط مدونتك او صورة لها مع تحديد المكان المراد اضافة القائمة إليه


ـــــــــــــــــ التوقيع ــــــــــــــــــــــــــــــــــــــــــــــــــ ـــــــــــــــــــ

معهد تطوير الذات و التنمية البشرية

شكراً على ردك عزيزي هذه هي مدونتي http://www.gotinenstrana.co.vu/ اريد القائمة ان تكون بمكان القائمة الحلية الموجودة في المدونة بمعنى اريد ازالية القديمة واضافة القائمة المرادة.
أرفقت لك القالب ايضاً قد تحتاجه

الدعم العربي

givarawan غير متواجد حالياً   رد مع اقتباس
قديم 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-rel="nofollow" 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
givarawan
مدون جديد
 
تاريخ التسجيل: Jun 2013
المشاركات: 19
الإجابات الموجودة: 1
افتراضي رد: كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر

أنا : givarawan




شكراً جزيلاً 100%

الدعم العربي

givarawan غير متواجد حالياً   رد مع اقتباس
قديم 01-08-2015, 06:48 PM   #6
givarawan
مدون جديد
 
تاريخ التسجيل: Jun 2013
المشاركات: 19
الإجابات الموجودة: 1
Question رد: كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر

أنا : givarawan




اقتباس:
المشاركة الأصلية كتبت بواسطة المدون مشاهدة المشاركة
اين القالب المرفق اخي لم اجده
لكن على اي حال لتغيير القائمة اذهب الى قالب مدونتك ثم إبحث عن هذا الكود
كود 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-rel="nofollow" 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'/>

شكراً جزيلاُ على المساعدة ولكن حدثت بعض المشاكل :
1- السلايد شو توقف عن العمل.
2- كيف لي أن اغير لون القائمة ؟
3- كيف لي أن اغير ارتفاع القائمة إلى height: 40px;؟

الدعم العربي

givarawan غير متواجد حالياً   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)

الكلمات الدليلية (Tags)
قائمة متعددة الاعمد بلوجر


 
أدوات الموضوع
انواع عرض الموضوع

ضوابط المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

كود [IMG]متاحة
كود HTML معطلة



المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
قائمة متعددة الالوان بتقنية 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





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin™ Version 3.8.7
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved. منتديات
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 01:54 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)