安排菜单项填补空白区域
我希望我的菜单div根据图像1中的标记移动。第二张图像显示原始菜单，就像现在看起来一样。如何移动divs以填补空间。我尝试使用isotope和wookmark，但没有运气。我无法让它发挥作用。阿比帮忙有所作为。
HTML标记：
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>
Web Development</h3>
<ul>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
</ul>
</div>
<div class="column">
<h3>
News Related</h3>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
</ul>
</div>
<div class="column">
<h3>
Technology</h3>
<ul>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
</ul>
</div>
<div class="column">
<h3>
Web Development</h3>
<ul>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
</ul>
</div>
<div class="column">
<h3>
News Related</h3>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
</ul>
</div>
<div class="column">
<h3>
Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
</ul>
</div>
<div class="column">
<h3>
Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
</ul>
</div>
<div class="column">
<h3>
Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
</ul>
</div>
</div>
JAVASCRIPT：
<script type="text/javascript">
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>
CSS：
.megamenu{
position: absolute;
display: none;
left: 0;
top: 0;
background: white;
border: 1px solid #f06b24;
border-width: 5px 1px;
padding: 10px;
font: normal 12px Verdana;
z-index: 100;
width:805px;
}
.megamenu .column{
float: left;
width: 180px; /*width of each menu column*/
margin-right: 5px;
}
.megamenu .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}
.megamenu .column ul li{
padding-bottom: 5px;
}
.megamenu .column h3{
background: #e0e0e0;
font: bold 13px Arial;
margin: 0 0 5px 0;
}
.megamenu .column ul li a{
text-decoration: none;
}
.megamenu .column ul li a:hover{
color: red;
}
这是菜单示例http://www.javascriptkit.com/script/script2/jkmegamenu.shtml的链接
.js很长，所以我不会在.js file link粘贴它。
1 个答案:
答案 0 :(得分：1)
我不太确定您是否正在寻找自动填充空白（使用同位素）或希望获得某个订单的解决方案。
无论如何，两者同时是不可能的。 Isotope将尝试按照您放置的内容的顺序放置您的内容，但是如果它可以填充一个小的间隙，并且发现距离更远的列将会放置它。
使用isotope 填充空白非常简单： http://jsfiddle.net/jaap/QfwJa/1/
按特定顺序排列。
如果您希望以特定顺序显示内容，请先在html中按顺序放置。 我注意到你把每个“内容块”称为一列。如果您希望您的内容按特定顺序排列，请首先创建4个实际列，这些列中的内容......
像这样：
http://codepen.io/anon/pen/ByCde
<div id="megamenu1" class="megamenu">
<div class="column">
<div class="content">
<h3>
Web Development</h3>
<ul>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
</ul>
</div>
<div class="content">
<h3>
Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
</ul>
</div>
</div>
<div class="column">
<div class="content">
<h3>
News Related</h3>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
</ul>
</div>
<div class="content">
<h3>
Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
</ul>
</div>
</div>
<div class="column">
<div class="content">
<h3>
Technology</h3>
<ul>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
</ul>
</div>
<div class="content">
<h3>
News Related</h3>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
</ul>
</div>
</div>
<div class="column">
<div class="content">
<h3>
Web Development</h3>
<ul>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
</ul>
</div>
<div class="content">
<h3>
Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
</ul>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？