-
[html + Java Script] id 위치에서 특정 위치 만큼 이동방뚝딱 학습노트 2022. 9. 20. 16:34
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'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. (0) 2022.12.18 오픈그래프 Open Graph 메타태그 미리보기 설정 (0) 2022.10.26 [HTML + CSS] li 사이에 구분선 넣기 ex) 메뉴 | 회사소개 | 게시판 (2) 2022.09.21 [CSS] 크롬에서 이미지 흐릴때 + 새로고침 (0) 2022.09.20 Python Chapter01 (0) 2022.09.02