Semantic UI

sidebar

수업

소스코드

<!doctype html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="semantic/semantic.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="semantic/semantic.js"></script>
    <style>


    </style>
</head>

<body>
    <div class="ui sidebar inverted vertical menu">
        <a class="item">
      1
    </a>
        <a class="item">
      2
    </a>
        <a class="item">
      3
    </a>
    </div>
    <div class="pusher">
       <button id="menu" class="ui button">Menu</button>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt nulla, unde, corrupti dolores repudiandae facere a, saepe fugit iusto expedita dicta dignissimos? Ducimus, delectus, ad? Deserunt, repellendus, ad? Praesentium, eaque.
    </div>
    <script>
        $('#menu').click(function(){
            $('.ui.sidebar').sidebar('setting', 'transition', 'overlay').sidebar('toggle');
        })
    </script>
</body>

</html>

 

댓글

댓글 본문
작성자
비밀번호
  1. 감사합니다.!!!
  2. 심화평
    이걸 웹 애플리케이션 만들기 예제에 적용이 가능할까요...?
  3. 와 감사합니다 어떻게하는지 이제 알겠네 ㅎㅎ
  4. 음.. 저는 전 수업시간에 했던 코드 위에 이번 수업 코드를 같이 넣었는데요.

    사이드바 메뉴를 눌러서 나타나게하면,
    앞시간에 했던 아코디언과 메뉴가 사라집니다 ㅠㅠ
    왜이러는걸까용..
  5. 오원구
    고맙습니다.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기