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. SanFrancisco
    네 저도 부트스트랩과 함께 시맨틱 UI도 소개해주었으면 좋겠어요
    대화보기
    • 김양지
      감사합니다!! 이고잉님 덕분에 정말 많은 걸 짧은 시간에 배울 수 있었어요 ㅜㅜㅜ 감사해요 정말
    • 스페이스몽키
      오.. 감사합니다 ㅎㅎ
    • 감사합니다. 제작중인 반응형 웹페이지에 적용시켰는데 사이드바의 기본 스킨이 마음에 들지않아
      CSS 파일의 필요한 부분만 추출해낸 다음에 커스텀 했고 잘 동작하는 것을 확인했습니다.

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

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