Opentutorials.org

sidebar

2017-04-04 01:05:44

수업

소스코드

<!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>

azk4년 전

어렵다 ㅜㅜ따라하는건 그렇다 쳐도 응용할 생각하니 막막하네요

답글
미댈5년 전

정말 궁금했던 부분이었는데 감사합니다!

답글
한강5년 전

sidebar 완료했습니다. ^^
200622

답글
이요한5년 전

그 문제만 해결하는게 목적이면 그냥 semantic.css에서 body.pushable{ background:#545454 !important; }라고 된 코드에서 "background:#545454!important;" 이부분만 지우면 될 것 같습니다. 이 코드가 무슨 역항을 하는지 잘 모르지만 이 부분이 배경색을 회색으로 칠하는 코드고, 딱히 지워도 문제될 것 같지는 않아보입니다.

답글
jiahnkim5년 전

이제야 시멘틱유아이를 사용하게 되었는데요, 지금 근데 문제가 시멘틱.css는 잘먹는거같은데 제가 따로 만든 css파일이 잘 안읽히는거같아요.. 배경이미지를 넣었는데 그게 사라지고 계속 흰배경으로 되네요 ㅜㅜ; 어떻게해야 두css파일을 같이 잘 사용할 수 있을지 알고싶습니다..!

답글 수정 삭제
SanFrancisco7년 전

네 저도 부트스트랩과 함께 시맨틱 UI도 소개해주었으면 좋겠어요
대화보기
답글
김양지7년 전

감사합니다!! 이고잉님 덕분에 정말 많은 걸 짧은 시간에 배울 수 있었어요 ㅜㅜㅜ 감사해요 정말

답글
스페이스몽키7년 전

오.. 감사합니다 ㅎㅎ

답글
JN877년 전

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

다만 사이드바가 화면 밖으로 사라질때 원래 사이드바 영역이 회색으로 바뀌던데 그걸 막는 방법이 없을까요?
제가 뭔가 원본 CSS파일에서 빼먹은 부분이 있는 것 같은데 그게 뭔지 도저히 못찾겠네요 ㅠ

답글
orez8년 전

감사합니다.!!!

답글
심화평8년 전

이걸 웹 애플리케이션 만들기 예제에 적용이 가능할까요...?

답글
12348년 전

와 감사합니다 어떻게하는지 이제 알겠네 ㅎㅎ

답글 수정 삭제
feel58년 전

음.. 저는 전 수업시간에 했던 코드 위에 이번 수업 코드를 같이 넣었는데요.

사이드바 메뉴를 눌러서 나타나게하면,
앞시간에 했던 아코디언과 메뉴가 사라집니다 ㅠㅠ
왜이러는걸까용..

답글
오원구8년 전

고맙습니다.

답글

버전 관리

2017-04-04 04:39:48

egoing

현재 버전	2017-04-04 04:39:48
선택 버전

버전 비교

토픽 0
모듈 0
코스 0
봤어요 0
댓글 0
명예의 전당 0

sidebar

수업

소스코드

댓글