CSS

【CSS】FlexBoxで構築されたシンプルなレスポンシブナビゲーションバーFlexBox Nav

August 31, 2016

FlexBox NavはFlexBoxで構築されたシンプルなレスポンシブナビゲーションバー

CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">

HTML

    
    <nav class="flex-nav">
      <ul>
        <li><a href="#">Item 01</a></li>
        <li><a href="#">Item 02</a></li>
        <li><a href="#">Item 03</a></li>
        <li><a href="#">Item 04</a></li>
        <li><a href="#">Item 05</a></li>
        <li><a href="#">Item 06</a></li>
        <li class="social">
          <a href="http://twitter.com/itsmayho"><i class="fa fa-twitter"></i></a>
        </li>
        <li class="social">
          <a href="http://instagram.com/itsmayho"><i class="fa fa-instagram"></i></a>
        </li>
        <li class="social">
          <a href="http://facebook.com/itsmayho"><i class="fa fa-facebook"></i></a>
        </li>
        <li class="social">
          <a href="http://github.com/mayho"><i class="fa fa-github"></i></a>
        </li>
      </ul>
    </nav>