On Event 전체메뉴(사이트맵) 보기

자바스크립트의 On Event는 크게 onclick, onmouseover, onmouseout 등이 적용된다.

onclick onmouseover onmouseout onload

마우스클릭외 마우스를 올리거나, 범위내를 벗어나는 상황에 맞는 전체메뉴 열기원리를 소개한다.

 

 

CSS 스타일 규정

#navbox{background:#00f;color:#fff;height:90px;}
#navbox .logo{margin:0;float:left;padding:0 100px;}
#navbox .fLT{float:right;margin-top:30px;} .btn{cursor:pointer;}

#subnav{position:relative;left:0;bottom:-90px;height:400px;background:rgb(51, 153, 255, 0.7);color:#000;display:none;}

필수로 삽입될 자바스크립트

<script>
// 필수로 삽입해야
function viewSN() {document.getElementById("subnav").style.display = "block";}
function closeSN() {document.getElementById("subnav").style.display = "none";}
</script>

<div id="navbox">
   <h1 class="logo">Naviagtion</h1><span class="btn fLT" onmouseover="viewSN()">전체메뉴보기</span>     <div id="subnav" onmouseout="closeSN()">전체메뉴들</div>
</div>

 

 

URL 링크를 지원하는 A태그외 onclick 이벤트 활용한 링크표현

자체창 바뀌는 링크(일명 셀프. 기본값) onclick="location.href='URL'"

새창뜨는 링크(새창,새탭)  onclick="window.open('URL')"

팝업새창뜨는 링크(별도 지정한 크기의 창)
onclick="window.open('URL','window_name','width=430,height=500,location=no,status=no,scrollbars=yes');"

현재페이지내 아이프레임등 원하는 네임의 대상뜨는 링크(name="haha")
onclick="haha.location.href='URL'"

---

 

 

전체메뉴에 삽입가능한 배경이미지 처리하기

 

배경이미지로 활용해보세요.

/* 배경색과 이미지 한줄처리*/
background:#ffeace url('imgs/bg_kart.jpg') no-repeat right bottom;
/* 배경이미지 크기는 별도*/ background-size:50%; }

글씨와 박스모델에 적용할 수 있는 그림자효과

/*박스그림자*/
box-shadow:0px 0px 10px #0039e6
/*글씨 그림자*/
text-shadow:1px 3px 2px #000

---

최종결과물 

전체메뉴원리.zip

0.08MB