첨부파일을 열면 html코드와 제이쿼리 라이브러리, 아이콘이 있습니다. 두가지 메뉴가 있는데 하나는 클릭해야 슬라이드 되고 하나는 마우스 오버하면 슬라이드 됩니다. Accordion Menu Using jQuery Works on clicking Header-1 Link-1 Link-2 Link-3 Header-2 Link-1 Link-2 Link-3 Header-3 Link-1 Link-2 Link-3 Works with mouse over Header-1 Link-1 Link-2 Link-3 Header-2 Link-1 Link-2 Link-3 Header-3 Link-1 Link-2 Link-3 데모링크 링크
제이쿼리의 슬라이드토글은 하나의 버튼으로 두가지 효과가 있는 토글효과로 메뉴를 슬라이드 시켜서 감추거나 보이도록 하는 효과입니다. open home menu1 menu2 menu3 첨부파일을 웹브라우저에서 열고 open이라는 글자를 클릭하면 메뉴가 사라지고 나타나는 토글버튼의 역할을 합니다. ul태그안의 내용은 아무리 길어도 토글효과의 대상이 됩니다. 메뉴가 처음부터 안나오게 하려면 ul태그 안에 inline style을 삽입합니다. 빨간색 코드만 삽입하면 로딩시 메뉴가 안보이고 open을 클릭하면 나타납니다.
데모를 확인하시려면 다음 링크를 클릭하세요. 링크 압축을 풀면 제이쿼리 라이브러리 파일, easing파일, lavalamp파일, lavalamp 축소파일, 스타일시트파일이 있습니다. 이미지는 2개가 있습니다. 각각 폴더에 저장하고 다음의 링크에서 경로를 수정하고 헤드태그에 삽입합니다. 이미지는 이미지 폴더에 저장하고 css에서 경로를 수정합니다. 네비게이션 메뉴가 3개 있는데 demo.html파일을 열면 3종류의 메뉴가 있고 이중 하나를 수정해서 사용합니다. css파일에도 3종류가 있으니 알맞는 것을 복사해서 사용하면 됩니다. 임베디드 제이쿼리 코드도 다음과 같이 3종류에 대해 연결이 되어있으니 수정하면 됩니다. 스피드의 700은 0.7초입니다. 수정해서 사용하면 됩니다.
맥 컴퓨터 하단의 아이콘은 마우스 오버시 크게 늘어나면서 마우스를 이동하면 작아집니다. 이런 기능을 이용한 메뉴바로 방문자에게 재미를 선사하기도 합니다. CSS와 제이쿼리, 피시아이(Fisheye) 플러그인을 이용해서 만든 것으로 첨부파일을 압축해제하면 상하 두곳에 위치한 소스와 상, 하에 위치한 html파일이 있으니 골라서 사용하면 됩니다. 사용법은 다음과 같습니다. 1. html 헤드태그에 다음의 코드를 삽입합니다. 물론 자신의 웹사이트 경로에 맞춰야합니다. 기본적으로 js폴더가 있다는 가정입니다. 스타일시트도 경로에 맞춰 삽입합니다. 지금은 기본폴더에 있지만 css폴더에 저장한다면 href="css/style.css"로 바꿔야합니다.
CSS와 제이쿼리를 이용한 드랍다운 메뉴입니다. 원본이 섹시하다고 했으나 그다지 섹시하지는 않습니다. 원본 출처 html부분입니다. Home Tutorials Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Resources Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link About Us Advertise Submit Contact Us CSS부분입니다. 제이쿼리부분입니다. 헤드태그에 다음을 삽입하면 별도의 js폴더를 만들지 않아도 됩니다. 다음의 링크를 클릭하면 데모를 볼 수 있습니다. 링크
제이쿼리 라이브러리는 보통 js폴더에 삽입해서 소스불러오기를 하는데 구글에 있는 라이브러리를 사용하면 여러가지 면에서 장점이 있습니다. 우선 라이브러리를 불러올때 접속자의 컴에서 구글의 라이브러리를 불러오므로 내서버에 부담을 주지 않습니다. 두번째로 구글의 서버는 어떤 서버보다도 빠릅니다. 그러니 로딩도 빠릅니다. 그리고 접속자가 구글의 라이브러리를 사용하는 다른 사이트에 방문했었다면 다시 로딩되는 일이 없어서 속도가 빨라집니다. 또한 모든 버전의 제이쿼리 라이브러리를 저장하고 있기 때문에 라이브러리 버전이 안맞아서 오류가 나는 일이 없습니다. 다음의 코드를 삽입하면 됩니다.
제이쿼리를 이용하면 문서전체를 우클릭 방지하거나 일정 부분의 블럭을 방지할 수 있습니다. 제이쿼리는 전체적으로 이해하지 않아도 코드를 가져다 사용하면 됩니다. 이런 코드는 이런 경우에 사용하고 어떤 부분을 고치면 된다. 정도만 알면 됩니다. 대신에 기본적인 html은 반드시 아셔야합니다. 아래 코드를 보면 제이쿼리 라이브러리는 구글에 있는 것을 사용하므로 별도로 라이브러리를 만들 필요는 없습니다. 3개의 div이 있는데 그중 두개의 div에 대해서는(div1,div2) 우클릭 방지가 되고 나머지 하나는(div3) 우클릭이 가능합니다. 문서전체에 대해서 우클릭 방지를 하려면 "#div" 대신에document를 넣으면 됩니다. 우클릭하면 메뉴가 보이지 않습니다. 우클릭하면 메뉴가 보이지 않습니다. 우클릭하면..
