0

JQueryを使用してスライドナビゲーションメニューを作成しようとしています。アイデアは、2つ以上のメインセクションがあり、各セクションにはいくつかのサブセクションがあるということです。

ユーザーが1つのセクションにカーソルを合わせると、サブセクションが水平方向に展開され、別のセクションが現在開いていてそのサブセクションが表示されている場合は、折りたたまれてメインセクションのみが表示されます。

次のように、セクションの幅を拡張するためのいくつかの基本的なコードを実装しました。

jQuery(document).ready(function($) {

// Section 1
$('#S1Hover').mouseover(function() {
    $(this).css('cursor', 'pointer');
    if ($('#S2wrapper').is(":visible")){
        $('#S2wrapper').animate({width: 0})
    }
    $('#S1wrapper').animate({width: 400})
});

// Section 2
$('#S2Hover').mouseover(function() {
    $(this).css('cursor', 'pointer');
    if ($('#S1wrapper').is(":visible")){
        $('#S1wrapper').animate({width: 0})
    }
    $('#s2wrapper').animate({width: '300'});
});   
});

このためのHTMLは

<div id="main">
    <div id="S1Hover" class="event">Section 1</div>
    <div id="S1wrapper">
    <ul id="S1">
        <li id="SS1"><a href="#">SS1</a></li>
        <li id="SS2"><a href="#">SS2</a></li>
        <li id="SS3"><a href="#">SS3</a></li>
        <li id="SS4"><a href="#">SS4</a></li>
    </ul>
    </div>

    <div id="S2Hover" class="event">S2</div>
    <div id="S2wrapper">
    <ul id="projects-nav">
        <li id="SS5"><a href="#">SS5</a</li>
        <li id="SS6"><a href="#">SS6</a></li>
        <li id="SS7"><a href="#">SS7</a></li>
    </ul>
    </div>
</div>

現在は実際には何もしていませんが、これについて助けていただければ幸いです。また、これが機能する場合、ブラウザ固有の注意点はありますか？

編集：セクションが展開されたときに、別のセクションがホバーされるまでその状態のままにしておきたいとは言いませんでした。

ありがとう

4

2 に答える 2

0

この背後にある考え方は、ホバリングしたいものはすべて、ホバリングを開始する要素内に配置する必要があるということです。たとえば、#S2Wrapper でそのコンテンツをホバーさせたい場合は、要素をラップする必要があります。

<div id="S2Wrapper">
 <div class="hover-stuff">
  <ul>
   <li>This is hovered</li>
  </ul>
 </div>
</div>

次に、.hover-stuff を非表示にして、S2Wrapper がホバーされたときにのみ表示します。また、S2Wrapper を相対的に配置し、hover-stuff を必要な長さと幅に対して絶対的に配置することもできます。

その理由は、S2Wrapper がホバーされている要素であるためです。ホバーされていないときにメニューがドロップすると、すぐに元に戻ります。

于 2012-06-06T13:58:46.940 に答える
0

DOM 構造をあまり変更せずに、次のことを試すことができます。

HTML:

<div id="main">
<div id="S1Hover" class="event">Section 1</div>
<div class="wrapper">
<ul id="S1">
    <li id="SS1"><a href="#">SS1</a></li>
    <li id="SS2"><a href="#">SS2</a></li>
    <li id="SS3"><a href="#">SS3</a></li>
    <li id="SS4"><a href="#">SS4</a></li>
</ul>
</div>

<div id="S2Hover" class="event">S2</div>
<div class="wrapper">
<ul id="projects-nav">
    <li id="SS5"><a href="#">SS5</a</li>
    <li id="SS6"><a href="#">SS6</a></li>
    <li id="SS7"><a href="#">SS7</a></li>
</ul>
</div>

CSS: 

.wrapper ul{
        margin:0;
        padding:0;
    }
    .wrapper ul li{
        float:left;
        list-style:none;
        margin-right:6px;
        width:0;
        height:20px;
        overflow:hidden;
    }

Javascript:

   jQuery(document).ready(function ($) {

        $('.event').hover(function () {
            $(this).next().find('li').animate({width:80}, 750);
        }, function () {
            $(this).next().find('li').animate({ width: 0 }, 1000);
        });
    });

それぞれのラッパーにIDの代わりにクラスを与えます。また、各セクションの幅として 80 ピクセル、高さとして 20 ピクセルの値がハードコードされてい<li>ます。これをコンテンツに合わせて変更できます。

于 2012-06-06T14:11:44.323 に答える