본문 바로가기
Articles

심심해서 만들어 보았다

Jay_K 2018. 9. 12. 04:00

완성품


여길 눌러보세요~


CSS + Javascript 조금으로 만들어 보았습니다.


누군가 긁어갈때는 출처표기를 조금 해줬으면 좋겠네요.


(참고: 심심풀이로 만든거라 그런지 쓸모없는게 꽤 많이 포함되어있습니다)


CSS


 div {

position: relative;

box-sizing: border-box;

}


.toolset {

position: absolute;

margin-top: 50px;

top: 0px;

left: 0px;

width: 100%;

height: 50px;

overflow: hidden;

transition: 0.1s;

}


.paragraph {

position: absolute;

margin-top: 0px;

top: 0px;

left: 0px;

width: 100%;

height: 50px;

overflow: hidden;

transition: 0.1s;

padding-top: 16px;

padding-left: 16px;

font-size: 13px;

font-weight: bold;

}


.tools {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 50px;

overflow: hidden;

transition: 0.25s;

}



.tools .container {

position: absolute;

transition: 0.25s;

}


.tools img {

float: left;

width: 50px;

height: 50px;

opacity: 0.5;

transition: 0.25s;

}


.tools img[data-sel="selected"] {

float: left;

width: 50px;

height: 50px;

opacity: 1;

}


.tool-strip {

position: absolute;

top: 0px;

right: 0px;

margin-left: 100%;

height: 50px;

transition: 0.25s;

overflow: hidden;

text-align: right;

opacity: 0;

}


.back-button {

position: absolute;

top: 0px;

right: 0px;

height: 50px;

transition: 0.25s;

overflow: hidden;

text-align: right;

}


.back-button img {

width: 50px;

height: 50px;

float: right;

}


.tool-strip img {

width: 50px;

height: 50px;

float: right;

transition: 0.5s;

}


.tool-strip[data-sel="selected"] {

background-color: white;

margin-left: 0;

opacity: 1;

}



Javascript


 function onClick(btn) {

var tool = btn.dataset["strip"];

var pp = document.querySelectorAll("div[data-strip]");

var pp2 = document.querySelector("div[data-strip=" + tool + "]");

var pv = document.getElementsByClassName("container")[0];

var pb = document.getElementsByClassName("back-button")[0];

console.log(tool, pp, pp2);

if(pp2.dataset["sel"] == "selected") {

pv.style.marginLeft = "0px";

pp2.dataset["sel"] = "";

btn.dataset["sel"] = "";

pb.style.marginRight = "0px";

}

else {

for(var n in pp) {

if(pp[n].dataset != undefined)

pp[n].dataset["sel"] = "";

}

pv.style.marginLeft = (-btn.offsetLeft) + "px";

pp2.dataset["sel"] = "selected";

btn.dataset["sel"] = "selected";

pb.style.marginRight = "-50px";

}

console.log(pp2.dataset["sel"]);

}

function toggleToolset(how) {

var pel = document.getElementsByClassName("paragraph")[0];

var tel = document.getElementsByClassName("toolset")[0];

if(how) {

pel.style.marginTop = "50px";

tel.style.marginTop = "0px";

}

else {

pel.style.marginTop = "0px";

tel.style.marginTop = "50px";

}

}


HTML


<div style="border:1px solid lightgray; width: 100%; height: 50px; overflow: hidden">

<div class="paragraph" onclick="toggleToolset(true)">

여길 눌러보세요~

</div>

<div class="toolset">

<div class="tools">

<div class="container">

<img src="box.png" data-strip="box" onclick="onClick(this); return true;" />

<img src="clip.png" data-strip="clip" onclick="onClick(this); return true;" />

</div>

</div>

<div class="tool-strip" data-strip="box">

<img src="back.png" data-strip="box" onclick="toggleToolset(false)" />

<img src="clock.png" data-strip="box" />

</div>

<div class="tool-strip" data-strip="clip">

<img src="back.png" data-strip="box" onclick="toggleToolset(false)" />

<img src="cloud.png" data-strip="box" />

</div>

<div class="back-button">

<img src="back.png" data-strip="box" onclick="toggleToolset(false)" />

</div>

</div>

</div> 

아이콘셋



티스토리툴바