jquery (11) 썸네일형 리스트형 [jQuery] 메뉴 항목에 Hover 효과 추가하기 HTML 파일에는 "강아지"라는 리스트로, 순서가 없는 엘리먼트를 작성합니다. 강아지의 종류로 웰시코기, 말라뮤트, 시바 3가지 항목을 추가했습니다. HTML 코드는 아래 codepen을 확인해주세요. 순서없는 리스트가 메뉴모양을 갖추도록 간단하고 심플하게 스타일을 적용했습니다. 스타일시트에 타입 선택자를 작성해서 세 엘리먼트에 자동 적용되도록 합니다. 아래와 같이 CSS를 작성합니다. css div{width:200px; box-sizing:border-box;} ul{list-style:none; box-sizing:border-box; margin:0; padding:0; background:#eeeeee; } ul > li {width:100%; padding:0.8em; box-sizing:bo.. [jQuery] ul 메뉴를 브랜드크럼 메뉴( breadcrumb ) 스타일로 표현하기. 브랜드크럼 메뉴 breadcrumb 현재의 위치를 홈 > 서비스 > 서비스 상세 같이 표시하는 것을 브랜드크럼이라고 부릅니다. 빵조각이라는 뜻으로 '헨젤과 그레텔'이야기에서 빵조각으로 돌아갈 길을 표시한다는 의미에서 유래되었습니다. CSS .listStyle{padding:20px; display:inline;} .listStyle::before {padding-right:15px; content:">"; font-size:0.75em; color:#266FEF; } .ulListStyle {list-style: none; display:inline; margin:0; padding:0;} jQuery $(document).ready(function(){ $('ul').addClass('ulListSty.. [jQuery] scroll to top 스크롤 탑 버튼 만들기 $(document).ready(function(){ // hide #toTop first $("#toTop").hide(); // fade in #toTop $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); // scroll body to 0px on click $('#toTop a').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); See the Pen scroll to top butto.. 이전 1 2 다음