Akihosi
90
2019-06-12 16:30:45
4
222

목록 화살표 바꾸기


<div id="sidebar">
	<div class="toggle-btn" onclick="toggleSidebar()">
		<img src="img/Left.png" width="50px" height="50px">
	</div>
		<ul>
			<li>Home</li>
			<li>About</li>
			<li>Contact</li>
		</ul>
	</div>
function toggleSidebar(){
	document.getElementById("sidebar").classList.toggle('active');
}

이 코드를 치면 밑에 왼쪽사진이 나오고 화살표를 클릭하면 오른쪽 사진처럼 되는데

오른쪽 사진처럼 됐을때 화살표 방향을 오른쪽으로 바꾸고싶습니다.

 Left.png를 Light.png로 바꾸고 싶은데 어떻게 해야하나요?


0
0
  • 답변 4

  • ....
    2019-06-12 16:36:27

    css도 알려주시면 좋겠습니다.

    0
  • Akihosi
    90
    2019-06-12 16:42:36


    @charset "UTF-8";
    
    *{
    	margin: 0px;
    	padding: 0px;
    	font-family: sans-serif;
    }
    
    #sidebar{
    	position: fixed;
    	width: 200px;
    	height: 100%;
    	background: #151719;
    	left: 0px;
    	transition: all 500ms linear;
    }
    
    #sidebar.active {
    	left:-200px;
    }
    
    #sidebar ul li{
    	color:rgba(230,230,230,0.9);
    	list-style: none;
    	padding: 15px 10px;
    	border-bottom: 1px solid white;
    }
    
    #sidebar .toggle-btn{
    	position: absolute;
    	left: 230px;
    	top: 20px;
    }
    
    #sidebar .toggle-btn span{
    	display: block;
    	width: 30px;
    	height: 5px;
    	background: #151719;
    	margin: 5px 0;
    	
    }

    css입니다!

    0
  • ....
    2019-06-12 16:46:04

    toggleSidebar 함수를 사용시

    클릭한 링크의 이미지를 우측 화살표 이미지로 수정하면 되지않을까요?

    .toggle-btn을 이용하시면 될 것 같습니다.

    0
  • Akihosi
    90
    2019-06-12 16:59:52

    혹시 코드를 알려주실수 있을까요?

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.