Positioning을 이용한 menu button


Home > Document > Web design > Menu > Button > Positioned button

Positioning을 이용한 menu button

Button 이라는게 웹에서 참 중요한 역할을 하는 것이 사실입니다. 왜냐하면 방문자와 그 사이트의 contents 를 연결하는 안내자 역할을 하기 때문이죠. 그 사이트의 인상을 좌우한다고 해도 과언이 아닙니다. 저도 처음에 사이트를 만들 때 Flash에 매료되어서 Flash button 을 사용한 적이 있습니다. 그냥 이미지 button은 시시해 보여서 말이죠. 그런데 사이트를 만들고 나서 보니 결정적인 단점이 있더군요. 배경색이 일치하지 않는 문제는 지금 많이 나아졌다고 하지만 작은 글씨가 희미해 보이고, 유지 및 보수에 많은 시간이 든다는 사실이었습니다. 그런데 일반적인 button 은 유지 보수가 편한 반면 아무래도 동적인 느낌은 떨어지게 되는 것은 사실입니다. 그래서 이 궁리 저 궁리하다가 만들어 본 button 입니다.

Positioning 을 사용했다는 것을 빼면 앞의 Window menu button 과 Process 는 동일하구요. MouseUp 때의 Action을 아래와 같이 2가지로 구분해 보았습니다.



Button action 1
Menu 1 Menu 2 Menu 3 Menu 4 Menu 5


Mouse event 별 button 모양
button 모양 Mouse event 별 구분
Button
onMouseOut
Button
onMouseOver, onMouseUp
Button
onMouseDown




Button action 2
Menu 1 Menu 2 Menu 3 Menu 4 Menu 5


Mouse event 별 button 모양
button 모양 Mouse event 별 구분
Button
onMouseOut, onMouseUp
Button
onMouseOver
Button
onMouseDown


이렇게 위와 같이 각각 3가지 모양이 필요하겠습니다. 이렇게 하기 위해서 우선 위의 3 가지 형태를 CSS class selector 를 사용하여 지정 하도록 하겠습니다. Button action 1과 2는 여러 분들이 변형해서 적용해 보세요.

CSS selector 지정
<style type="text/css">
<!-- 
/*onMouseOver와 onMouseUp 때의 button 모양, Button action 2에서는 onMouseUp 빠짐. */
.over_button{
color:#ffffff;
height:25px;
width:100px;
background:maroon;
cursor: hand; 
border:1px silver solid;
position: relative;
top:-3px; /* 위로 3px 브라우저 창에서의 X, Y 좌표 참조 */
left:3px; /* 오른쪽으로 3px */
text-align:center;
}

/*평상시와 onMouseOut 때의 button 모양, Button action 2에서는 onMouseUp 추가 */
.button{
color:#ffffff;
height:25px;
width:100px;
background:maroon;
cursor: hand; 
border:1px silver solid;
position: relative;
text-align:center;
} 

/*onMouseDown 때의 button 모양*/
.down_button{
color:#ffffff;
height:25px;
width:100px;
background:maroon;
cursor: hand; 
border:1px silver solid;
position: relative;
top:1px; /* 아래로 1px */
left:-1px; /* 왼족으로 1px */
text-align:center;
}
-->
</style>
JavaScript function 설정
<script type="text/javascript">
<!--
// btn 대입변수를 사용하여 mouse over & up 때 className을 over_button으로 지정
// Button action 2에서는 OnMouseUp 빠짐.
function buttonOver(btn){
btn.className = "over_button"
}

// btn 대입변수를 사용하여 mouse down 때 className을 down_button으로 지정
function buttonDown(btn){
btn.className = "down_button"
}

// btn 대입변수를 사용하여 mouse out 때 className을 out_button으로 지정
// Button action 2에서는 OnMouseUp 추가.
function buttonOut(btn){
btn.className = "button"
}

// page 대입 변수를 사용하여 click 했을 때 링크걸 url 지정하고 location object를 사용하여 Link
function goUrl(page){
window.location.href = page
}
// -->
</script>
소스 보기




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색