러너효방
[html + Java Script] id 위치에서 특정 위치 만큼 이동 본문
HTML
<!--네비게이션 목록-->
<ul class="nav_main_list">
<li><a href="javascript:id_move('category_nav01');">Menu1</a></li>
<li><a href="javascript:id_move('category_nav02');">Menu2</a></li>
<li><a href="javascript:id_move('category_nav03');">Menu3</a></li>
<li><a href="javascript:id_move('category_nav04');">Menu4</a></li>
<li><a href="javascript:id_move('category_nav05');">Menu5</a></li>
<li><a href="javascript:id_move('category_nav06');">Menu6</a></li>
</ul>
<!--이동할 위치 설정-->
<div id="category_nav01">Menu1</div>
<div id="category_nav02">Menu2</div>
<div id="category_nav03">Menu3</div>
<div id="category_nav04">Menu4</div>
<div id="category_nav05">Menu5</div>
<div id="category_nav06">Menu6</div>
css
.nav_main_list{display: flex; list-style: none; }
.nav_main_list li{margin-right: 25px; }
.nav_main_list a {text-decoration: none;}
Comment ※ 리스트 왼쪽으로 나열 display: inline-flex; ※ li 리스트 점 없애기 list-style: none; ※ a 태그 밑줄 없애기 text-decoration: none; ※ div에 마우스 hover 손가락 아이콘 나타내기 cursor: pointer; |
Java Script
<script>
function id_move(p_id){
$('html').animate({'scrollTop':$("#"+p_id).offset().top-50});
}
</script>
'학습노트' 카테고리의 다른 글
'formidable'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. (1) | 2023.10.18 |
---|---|
오픈그래프 Open Graph 메타태그 미리보기 설정 (1) | 2023.10.18 |
[HTML + CSS] li 사이에 구분선 넣기 ex) 메뉴 | 회사소개 | 게시판 (1) | 2023.10.18 |
[CSS] 크롬에서 이미지 흐릴때 + 새로고침 (0) | 2023.10.18 |
Python Chapter01 (2) | 2023.10.18 |