1

固定位置の左側のボタンを作成しています。クリックすると右にスライドし、別の div が左にスライドし、いくつかのオプションが表示されます。

Jqueryとcssで効果を出すことができました。ただし、バグが1つあり、 1ページ以上下にスクロールしてその位置でボタンを押すと、トップに戻ってエフェクトがかかります!

ウェブサイトの上部で問題なく動作します。

これが私のスクリプトです：

$(document).ready(function(){

    $(".events, .messages").click(function() {
    $(".side-menu").toggleClass("sideMenu-expand");
    $(".side-buttons").toggleClass("sideButtons-expand");
});

ここに私のhtmlがあります:

 <div class="side-menu">    
    <div class="side-buttons">
        <ul>

        <li ><a class="events" href="#"></a></li>
        <li ><a class="messages" href="#"></a></li>

        </ul>        
    </div>
</div>

ここに私のCSSがあります：

.side-menu{
height:300px;
background:#fff;
width:150px;
position:fixed;
margin-left:-158px;
margin-top:100px;
border:7px solid #232323;
border-radius: 8px; 
-moz-border-radius: 0 8px 8px 0px; /* vendor specific for mozilla */
-webkit-border-radius: 0 8px 8px 0px; /* vendor specific for webkit browsers */
float:left;
}
.sideMenu-expand{
    position:fixed;
    margin-left:-7px;

}
.side-buttons{
    width:40px;
    height:100px;
    margin-top:100px;
    background:url(images/side-button.png) no-repeat;
position:fixed;
margin-left:152px;
float:left;
z-index:100000;
}
 .side-buttons ul{
    list-style-type:none;
}
.side-buttons ul li a.events{
    display:block;
    width:30px;
    height:18px;
    margin-top:12px;
    margin-left:-1px;
    background:url(images/icons/events.png) no-repeat;
}
.side-buttons ul li a.events:hover{
    background:url(images/icons/events-ho.png) no-repeat;
}
.side-buttons ul li a.messages{
    display:block;
    width:30px;
    height:18px;
    margin-left:10px;
    margin-top:10px;
    background:url(images/icons/messages.png) no-repeat;
    }
.side-buttons ul li a.messages:hover{
background:url(images/icons/messages-ho.png) no-repeat;
       }

.sideButtons-expand{
    position:fixed;
    margin-left:155px;
    z-index:100000;
}

私のコードは基本的に、ボタンがクリックされたときにサイドメニューとサイドボタンにマージン左を追加します。

あなたの助けに感謝します。ありがとう。

4

1 に答える 1

0

メニュー項目に「#」がありますがhref、これは基本的にページのトップへのリンクです。の「#」を削除するか、メニュー項目のクリック ハンドラでhref使用してください。e.preventDefault()

于 2013-04-27T21:53:53.473 に答える