コーティングの事

コピペで実装。ポップなナビゲーションバー5つ

 

display:flexを使用したナビゲーションバーです

こちらが基本となるHTMLです

<div class="nav">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
</div>

画像では分かりにくいですが、右詰めになります

ポップな色合い

<div class="nav">
body {
font-family: sans-serif;
}

.nav {
background-color: white;
color:#fff200;
}

ul {
display: flex;
flex-flow: row;
line-height: 2;
letter-spacing: 1.5px;
justify-content: flex-end;
list-style-type: none;
}

li{
padding: 15px;
}

ul li:nth-child(odd){
background-color:#ff3838;
margin: 4px;
border-radius: 20px;
}

ul li:nth-child(even){
background-color:#17c0eb;
margin: 4px;
border-radius: 20px;
}

ul li:nth-child(3n){
background-color:#3ae374;
margin: 4px;
border-radius: 20px;
}
少し柔らかめ

<div class="nav">
body {
font-family: sans-serif;
}

.nav {
background-color: white;
color:#bae2be;
}

ul {
display: flex;
flex-flow: row;
line-height: 2;
letter-spacing: 1.5px;
justify-content: flex-end;
list-style-type: none;
}

li{
padding: 15px;
}

ul li:nth-child(odd){
background-color:#f0f1b3;
margin: 4px;
border-radius: 20px;
}

ul li:nth-child(even){
background-color:#a3a7e4;
margin: 4px;
border-radius: 20px;
}
和風です


body {
font-family: sans-serif;
}

.nav {
background-color: white;
color:white;
}

ul {
display: flex;
flex-flow: row;
line-height: 2;
letter-spacing: 1.5px;
justify-content: flex-end;
list-style-type: none;
}

li{
padding: 15px;
}

ul li:nth-child(odd){
background-color:#f26163;
margin: 4px;
border-radius: 20px;
}

ul li:nth-child(even){
background-color:#f2c2c3;
margin: 4px;
border-radius: 20px;
}

ul li:nth-child(3n){
background-color:#f2a0a1;
margin: 4px;
border-radius: 20px;
}
切手風のデザイン


body {
font-family: sans-serif;
}

.nav {
background-color: white;
color:white;
}

ul {
display: flex;
flex-flow: row;
line-height: 2;
letter-spacing: 1.5px;
justify-content: flex-end;
list-style-type: none;
}

li{
border: dashed 2px white;
padding: 20px;
background-color:black;
}
オレンジに

<div class="nav">
body {
font-family: sans-serif;
}

.nav {
background-color:white;
color:#FFF4E0;
}

ul {
display: flex;
flex-flow: row;
line-height: 2;
letter-spacing: 1.5px;
justify-content: flex-end;
list-style-type: none;
}

li{
border: dashed 2px white;
padding: 20px;
background-color:#FFBC61;
}