3

メニューdivを画像1のマーカーに従ってシフトしたい。2番目の画像は、現在のように元のメニューを示しています。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ファイルリンクを貼り付けていません。 ここに画像の説明を入力してください

ttt

4

1 に答える 1

1

（同位体を使用して）空白を自動的に埋める解決策を探しているのか、特定の順序にしたいのかはよくわかりません。

とにかく、両方を同時に行うことはできません。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>

于 2012-11-21T21:32:21.917 に答える