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

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>
 

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

  • LATEST
  • RELATED
  • POPULAR