ブログの
ナビゲーションです!
レスポンシブが欲しい方は
メールください。
<style>
#navs {
width: 100%;
margin:0 auto;
}
#navs > ul{
width: 100%;
font-size: 0;
margin: 0;
padding: 0;
border: none;
height: auto;
background-color: rgba(0, 0, 0, .8)
}
#navs > ul li{
width: 16.6666666% ; /* 未対応ブラウザ用フォールバック */
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
display: inline-block;
font-size: 15px;
text-align: center;
height: 100%;
color: #fff;
}
#navs > ul li a{
display: block;
color: #fff;
font-weight: normal;
text-decoration: none;
border: none;
height: 45px;
line-height: 45px;
}
.widget > .widget-content > #navs > ul li a{
padding: 0;
transition: all 0.25s ease-in-out;
}
#navs > ul li:hover{
opacity: .85;
}
#navs ul li:nth-of-type(1){
background-color: #42d64d;
}
#navs ul li:nth-of-type(2){
background-color: #b59168;
}
#navs ul li:nth-of-type(3){
background-color: #ff5757;
}
#navs ul li:nth-of-type(4){
background-color: #8957a1;
}
#navs ul li:nth-of-type(5){
background-color: #18b7fe;
}
#navs ul li:nth-of-type(6){
background-color: #fec518;
}
</style>
<div id="navs">
<ul>
<li><a href="#.html">HOME</a></li>
<li><a href="#.html">ILLUST</a></li>
<li><a href="#.html">HTML</a></li>
<li><a href="#.html">JQUERY</a></li>
<li><a href="#.html">INQUIRY</a></li>
<li><a href="#.html">INQUIRY1</a></li>
</ul>
</div>
ナビゲーションです!
レスポンシブが欲しい方は
メールください。
<style>
#navs {
width: 100%;
margin:0 auto;
}
#navs > ul{
width: 100%;
font-size: 0;
margin: 0;
padding: 0;
border: none;
height: auto;
background-color: rgba(0, 0, 0, .8)
}
#navs > ul li{
width: 16.6666666% ; /* 未対応ブラウザ用フォールバック */
width: -webkit-calc(100% / 6);
width: calc(100% / 6);
display: inline-block;
font-size: 15px;
text-align: center;
height: 100%;
color: #fff;
}
#navs > ul li a{
display: block;
color: #fff;
font-weight: normal;
text-decoration: none;
border: none;
height: 45px;
line-height: 45px;
}
.widget > .widget-content > #navs > ul li a{
padding: 0;
transition: all 0.25s ease-in-out;
}
#navs > ul li:hover{
opacity: .85;
}
#navs ul li:nth-of-type(1){
background-color: #42d64d;
}
#navs ul li:nth-of-type(2){
background-color: #b59168;
}
#navs ul li:nth-of-type(3){
background-color: #ff5757;
}
#navs ul li:nth-of-type(4){
background-color: #8957a1;
}
#navs ul li:nth-of-type(5){
background-color: #18b7fe;
}
#navs ul li:nth-of-type(6){
background-color: #fec518;
}
</style>
<div id="navs">
<ul>
<li><a href="#.html">HOME</a></li>
<li><a href="#.html">ILLUST</a></li>
<li><a href="#.html">HTML</a></li>
<li><a href="#.html">JQUERY</a></li>
<li><a href="#.html">INQUIRY</a></li>
<li><a href="#.html">INQUIRY1</a></li>
</ul>
</div>
コメント
コメントを投稿