CSS 내비게이션바

1 개요[ | ]

CSS Navigation Bar, pure CSS navigation bar implementation
CSS 내비게이션 바
  • 순수 CSS로 구현한 내비게이션바
<style>
  body { margin: 0; }
  .navbar>ul {
    background: hotpink;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .navbar>ul>li {
    display: inline-block;
    padding: 0;
  }
  .navbar>ul>li>a {
    display: block;
    text-decoration: none;
    padding: 10px 20px;
    color: white;
  }
  .navbar>ul>li>a:hover { background: deeppink; }
</style>

<nav class="navbar">
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#">1번 메뉴</a></li>
    <li><a href="#">2번 메뉴</a></li>
    <li><a href="#">3번 메뉴</a></li>
  </ul>
</nav>

2 같이 보기[ | ]

3 참고[ | ]

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}