jQuery: slideMenu

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

$(function () {
    $('#menu_toggle').click(function () {
        $(this).next('ul').slideToggle(200);
        $(this).toggleClass('active');
    });
    $(document).click(function() {
        $('#menu_toggle').removeClass('active');　//エリア外をクリックすると閉じる
    });
    $('#header').click(function() {
        event.stopPropagation();　//ヘッダー領域ではイベントを停止
    });
});

1

2

3

4

5

6

7

8

9

10

11

12

$(function () {

$('#menu_toggle').click(function () {

$(this).next('ul').slideToggle(200);

$(this).toggleClass('active');

});

$(document).click(function() {

$('#menu_toggle').removeClass('active');　//エリア外をクリックすると閉じる

});

$('#header').click(function() {

event.stopPropagation();　//ヘッダー領域ではイベントを停止

});

<nav id="slide_nav">
       <a id="menu_toggle" class="active"> <span></span> <span></span> <span></span> </a>
        <ul id="nav_menu">
          <li id="nav01"><a href="#">menu1</a></li>
          <li id="nav02"><a href="#">menu2</a></li>
          <li id="nav03"><a href="#">menu3</a></li>
          <li id="nav04"><a href="#">menu4</a></li>
          <li id="nav05"><a href="#">menu5</a></li>
          <li id="nav06"><a href="#">menu6</a></li>
        </ul>
 </nav>

1

2

3

4

5

6

7

8

9

10

11

</ul>

</nav>

/* Menu Button */
#menu_toggle {
    position: fixed;
    top: 34px;
    right: 10px;
    width: 40px;
    height: 34px;
}
#menu_toggle span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 4px;
}
#menu_toggle span:nth-of-type(1) {
    top: 0;
}
#menu_toggle span:nth-of-type(2) {
    top: 15px;
}
#menu_toggle span:nth-of-type(3) {
    bottom: 0;
}

/* Nav Menu */
#menu_toggle + #nav_menu {
    height: 100%;
    position: fixed;
    right: -240px;
    width: 240px;
    z-index: 999;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
#menu_toggle.active + #nav_menu {
    position: fixed;
    right: 0;
    width: 240px;
    background-color: rgba(0,0,0,0.8);
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

/* Menu Button */

#menu_toggle {

position: fixed;

top: 34px;

right: 10px;

width: 40px;

height: 34px;

}

#menu_toggle span {

position: absolute;

left: 0;

width: 100%;

height: 4px;

background-color: #333;

border-radius: 4px;

}

#menu_toggle span:nth-of-type(1) {

top: 0;

}

#menu_toggle span:nth-of-type(2) {

top: 15px;

}

#menu_toggle span:nth-of-type(3) {

bottom: 0;

}

/* Nav Menu */

#menu_toggle + #nav_menu {

height: 100%;

position: fixed;

right: -240px;

width: 240px;

z-index: 999;

-webkit-transition: all .5s ease;

-o-transition: all .5s ease;

transition: all .5s ease;

}

#menu_toggle.active + #nav_menu {

position: fixed;

right: 0;

width: 240px;

background-color: rgba(0,0,0,0.8);

-webkit-transition: all .5s ease;

-o-transition: all .5s ease;

transition: all .5s ease;

}

この記事を見た人は次の記事も見ています。

コメント

最近の投稿

アーカイブ

RELATED

IE11でのSVG画像のサイズ

dreamweaverの置換について

初めてhtmlを書くときのコツ

第三十八回「noindexタグでindexさせない」

WordPressとは

【備忘録】cssで上下中央にする方法