이 기사의 예에서는 jQuery가 블로그에 사용할 수 있는 동적 슬라이딩 메뉴를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. jQuery滑动菜单插件 <br> (함수($){<br> $.fn.extend({<br> 태그드롭: 함수(옵션) {<br> var 기본값 = {<br> tagPaddingTop: '90px',<br> tagDefaultPaddingTop: '30px',<br> bgColor: '#B1CCED',<br> bgMoverColor: '#7FB0F0',<br> 텍스트색상: '#e0e0e0',<br> textDefaultColor: '#fff'<br> };<br> var 옵션 = $.extend(기본값, 옵션);<br> return this.each(function() {<br> var obj = $(this);<br> var li_items = $("li", obj);<br> $("li", obj).css('배경색', options.bgColor);<br> li_items.mouseover(함수(){<br> $(this).animate({paddingTop: options.tagPaddingTop}, 300);<br> $(this).css('배경색', options.bgMoverColor);<br> $(this).css('color', options.textColor);<br> }).mouseout(function() {<br> $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500);<br> $("li",$(this).parent()).css('배경색', options.bgColor);<br> $("li",$(this).parent()).css('color', options.textDefaultColor);<br> });<br> });<br> }<br> });<br> })(jQuery);<br> <br> <script type="text/javascript"><br> $(문서).ready(함수() {<br> $('.menu').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'});<br> });<br> <br> <스타일><br> 몸 {<br> 여백:0;<br> 패딩:0;<br> }<br> #nav li {여백: 0; 패딩: 0;디스플레이: 인라인;목록 스타일 유형: 없음;글꼴 크기: 12px;}<br> #nav a:링크, #nav a:방문 {<br> }<br> #nav a:hover {색상: #fff; 배경:#FF6A00;}<br> #nav a:visited.active, #nav a:link.active {배경색: #fff;색상: #FF6A00;}<br> .메뉴 {<br> 목록 스타일:없음;<br> 여백: 0;<br> 부동:오른쪽;<br> }<br> .menu 리 {<br> 부동:왼쪽;<br> 여백:0 자동;<br> 커서:포인터;<br> 높이:30px;<br> 패딩:30px 5px 5px 5px;<br> 여백:0px 3px 0px 3px;<br> -moz-border-radius: 0px 0px 10px 10px;<br> -webkit-border-radius:0px 0px 10px 10px;<br> -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br> -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);<br> 색상: #FFF;<br> 텍스트 그림자: 0 -1px 1px rgba(0,0,0,0.25);<br> 글꼴 계열: "Lucida Grande",Lucida,Verdana,sans-serif;<br> 글꼴 크기:13px;<br> 글꼴 두께:굵게;<br> 텍스트 변환:대문자;<br> }<br> </스타일><br> </머리><br> <br> <ul class="menu"><br> <li>회사 소개</li><br> <li>연락처</li><br> <li>기타</li> <br> <li>제품</li> <br> <li>포트폴리오</li><br> <li>소감</li><br> <br> </본문><br> </div>