【jQuery】横から出てくるスライドメニュー

HTML


<div class="menu">
    <ul class="menu-list">
        <li class="menu-list-item">
            <a href="">項目1</a>
        </li>
        <li class="menu-list-item">
            <a href="">項目2</a>
        </li>
        <li class="menu-list-item">
            <a href="">項目3</a>
        </li>
    </ul>
    <button type="button" class="menu-toggle"></button>
</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

</li>

</li>

</li>

</ul>

</div>

CSS


.menu {
    width: 200px;
    height: 100vh; /* メニューの縦は画面一杯に伸ばす */

    background-color: #ccc;

    position: fixed;
    top: 0;
    left: -200px; /* メニューが閉じているときは画面外に出す */

    transition: 0.3s;
}

.menu.open {
    left: 0; /* メニューを開くと画面内に表示される */
    transition: 0.3s;
}


.menu-list {
    width: 100%;
}

.menu-list .menu-list-item {
    border-bottom: 1px solid #000;
}


.menu-list .menu-list-item a {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;

    transition: 0.5s;
}

.menu-list .menu-list-item a:hover {
    background-color: #eee;
    opacity: 0.5;
    transition: 0.5s;
}


button.menu-toggle {
    border: none;  /* 枠線を消す */
    outline: none; /* クリックしたときに表示される枠線を消す */

    width: 100px;
    height: 50px;
    background-color: #eee;

    cursor: pointer;

    /* メニューボタンの配置 */
    position: absolute;
    top: 100px;
    left: calc(200px - 50px * 0.5); /* メニューの幅 - メニューボタンの高さの半分 */
    transform: rotate(90deg); /* メニューボタンを縦にする */
}

button.menu-toggle:after {
    content : 'OPEN';
}

button.menu-toggle.open:after {
    content : 'CLOSE';
}

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

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

.menu {

width: 200px;

height: 100vh; /* メニューの縦は画面一杯に伸ばす */

background-color: #ccc;

position: fixed;

top: 0;

left: -200px; /* メニューが閉じているときは画面外に出す */

transition: 0.3s;

}

.menu.open {

left: 0; /* メニューを開くと画面内に表示される */

transition: 0.3s;

}

.menu-list {

width: 100%;

}

.menu-list .menu-list-item {

border-bottom: 1px solid #000;

}

.menu-list .menu-list-item a {

display: block;

width: 100%;

height: 50px;

line-height: 50px;

text-align: center;

transition: 0.5s;

}

.menu-list .menu-list-item a:hover {

background-color: #eee;

opacity: 0.5;

transition: 0.5s;

}

button.menu-toggle {

border: none; /* 枠線を消す */

outline: none; /* クリックしたときに表示される枠線を消す */

width: 100px;

height: 50px;

background-color: #eee;

cursor: pointer;

/* メニューボタンの配置 */

position: absolute;

top: 100px;

left: calc(200px - 50px * 0.5); /* メニューの幅 - メニューボタンの高さの半分 */

transform: rotate(90deg); /* メニューボタンを縦にする */

}

button.menu-toggle:after {

content : 'OPEN';

}

button.menu-toggle.open:after {

content : 'CLOSE';

}

jQuery


$(function(){
    /*
        メニューの開閉
    */
    $('button.menu-toggle').click(function() {
        $('button.menu-toggle').toggleClass('open');
        $('div.menu').toggleClass('open');
    });
});

1

2

3

4

5

6

7

8

9

10

11

$(function(){

/*

メニューの開閉

*/

$('button.menu-toggle').click(function() {

$('button.menu-toggle').toggleClass('open');

$('div.menu').toggleClass('open');

});

【jQuery】横から出てくるスライドメニュー

ソースコード

コメントを残すコメントをキャンセル

ソースコード

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル