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. 한강
    sidebar 완료했습니다. ^^
    200622
  4. 이요한
    그 문제만 해결하는게 목적이면 그냥 semantic.css에서 body.pushable{ background:#545454 !important; }라고 된 코드에서 "background:#545454!important;" 이부분만 지우면 될 것 같습니다. 이 코드가 무슨 역항을 하는지 잘 모르지만 이 부분이 배경색을 회색으로 칠하는 코드고, 딱히 지워도 문제될 것 같지는 않아보입니다.
  5. jiahnkim
    이제야 시멘틱유아이를 사용하게 되었는데요, 지금 근데 문제가 시멘틱.css는 잘먹는거같은데 제가 따로 만든 css파일이 잘 안읽히는거같아요.. 배경이미지를 넣었는데 그게 사라지고 계속 흰배경으로 되네요 ㅜㅜ; 어떻게해야 두css파일을 같이 잘 사용할 수 있을지 알고싶습니다..!
  6. SanFrancisco
    네 저도 부트스트랩과 함께 시맨틱 UI도 소개해주었으면 좋겠어요
    대화보기
    • 김양지
      감사합니다!! 이고잉님 덕분에 정말 많은 걸 짧은 시간에 배울 수 있었어요 ㅜㅜㅜ 감사해요 정말
    • 스페이스몽키
      오.. 감사합니다 ㅎㅎ
    • JN87
      감사합니다. 제작중인 반응형 웹페이지에 적용시켰는데 사이드바의 기본 스킨이 마음에 들지않아
      CSS 파일의 필요한 부분만 추출해낸 다음에 커스텀 했고 잘 동작하는 것을 확인했습니다.

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

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