كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر

01-07-2015, 10:23 PM

المدون

مدون جديد

تاريخ التسجيل: 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'/>

givarawan معجب بهذا

__________________

من مواضيع المدون

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

الكلمات الدلالية (Tags)

قائمة متعددة الاعمد بلوجر

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

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

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة لا تستطيع الرد على المواضيع لا تستطيع إرفاق ملفات لا تستطيع تعديل مشاركاتك BB code is متاحة الابتسامات متاحة كود [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

كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر

طلبات الدعم الفني