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. 감사합니다. 제작중인 반응형 웹페이지에 적용시켰는데 사이드바의 기본 스킨이 마음에 들지않아
    CSS 파일의 필요한 부분만 추출해낸 다음에 커스텀 했고 잘 동작하는 것을 확인했습니다.

    다만 사이드바가 화면 밖으로 사라질때 원래 사이드바 영역이 회색으로 바뀌던데 그걸 막는 방법이 없을까요?
    제가 뭔가 원본 CSS파일에서 빼먹은 부분이 있는 것 같은데 그게 뭔지 도저히 못찾겠네요 ㅠ
  3. 감사합니다.!!!
  4. 심화평
    이걸 웹 애플리케이션 만들기 예제에 적용이 가능할까요...?
  5. 1234
    와 감사합니다 어떻게하는지 이제 알겠네 ㅎㅎ
  6. feel5
    음.. 저는 전 수업시간에 했던 코드 위에 이번 수업 코드를 같이 넣었는데요.

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