| givarawan |
01-08-2015 06:48 PM |
رد: كيف اصنع قائمة متعددة الاعمدة في القائمة المنسدلة+بلوجر
اقتباس:
المشاركة الأصلية كتبت بواسطة المدون
(المشاركة 45591)
اين القالب المرفق اخي لم اجده
لكن على اي حال لتغيير القائمة اذهب الى قالب مدونتك ثم إبحث عن هذا الكود
كود بلغة 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'/>
|
شكراً جزيلاُ على المساعدة ولكن حدثت بعض المشاكل :
1- السلايد شو توقف عن العمل.
2- كيف لي أن اغير لون القائمة ؟
3- كيف لي أن اغير ارتفاع القائمة إلى height: 40px;؟ |
