티스토리 네비게이션 바(Navigation Bar) 만들기 (html, css, js)

주요 메뉴들을 확인 할 수 있는 네비게이션 바를 만들어 보려고합니다.

 

네비게이션 바는 헤더 아래에 만들도록 하겠습니다.

 

틀 구성

<!-- navigation -->
<nav class="sticky_nav">
    <ul class="blog_menu">
        <li><a href="https://hongku.tistory.com/rss">RSS</a></li>
        <li><a href="https://hongku.tistory.com/tag">Tag</a></li>
        <li><a href="https://hongku.tistory.com/guestbook">GuestBook</a></li>
    </ul>
</nav>

네비게이션 바, Html 틀 구성

 

간단하게 틀을 잡고나서 CSS를 작성하도록 합니다.

 

CSS

색상 CSS

/* white theme - nav */
.th_white_theme nav {
    background-color: #495057;
}
.th_white_theme nav ul li a {
    color: #ffffff;
    border-bottom: 3px solid transparent;
}
.th_white_theme nav ul li a:hover {
    color: #ff6b6b;
    border-bottom: 3px solid #ff6b6b;
}

 

구조 CSS

기본 ul>li의 리스트 스타일은 너무 볼품없기 때문에 ul 태그명으로 list-style을 none으로 설정하겠습니다.

/* common */
ul {
    list-style: none;
}

/* nav */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .25em;
    height: 55px;
}
nav ul {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
}
nav ul li {
    padding: 0;
    margin: 0;
}
nav ul li a {
    padding: 1em;
    font-size: 0.85em;
    display: flex;
    align-items: flex-end;
}

 

Html

아이콘을 추가로 더 넣었는데 적절한 모양인지 잘 모르겠네요! 마음에 안들면 나중에 다시 바꾸도록 하죠.

 

 

큰 화면 (PC)

중간 화면 (테블릿)

작은화면 (모바일)

 

관련 글

2019/08/06 - [Tistory Skin/작업 Log] - 티스토리 스킨 개발을 위한 준비(2019.08.06)

티스토리 스킨 개발을 위한 준비(2019.08.06)

2019/08/24 - [Tistory Skin/작업 Log] - 티스토리 헤더(Header) 만들기 (html, css, js)

티스토리 헤더(Header) 만들기 (html, css, js)