<body>
<style>
body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu{
width: 100%;
height: 80%;
position: absolute;
top: 0;
}
.menuBack{
width: 100%;
height: 100%;
position: absolute;
background-image: url("hana.jpg");
background-position: left;
}
.blur{
width: 100%;
height: 100%;
background: inherit;
overflow: hidden;
}
.blur:before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
-webkit-filter: blur(7px) saturate(2);
/*http://creatorclip.info/2014/06/css-ios7-frosted-glass-background/
ここのページを参考にした。blur(3px) saturate(2)の括弧内の数字でぼかし具合を変えられる*/
}
.blurContent{
width: 100%;
height: 200px;
background: rgba(255,255,255,0.5);
}
.menuLists{
width: 100%;
height: 100%;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
}
.menuList{
width: 90%;
height: 25%;
padding: 0 5%;
font-size: 38px;
color: white;
text-shadow: 1px 1px 0px pink;
border-top:1px solid rgba(255,255,255,0.5);
}
.menuList:first-child{
border-top:none;
}
.item{
width: 100%;
height: 30%;
position: absolute;
bottom: 0;
overflow: scroll;
}
.itemLists{
width: 250%;
height: 100%;
}
.itemList{
width: 20%;
height: 100%;
float: left;
background: green;
position: relative;
}
.itemImg{
width: 100%;
height: 100%;
}
.btnPrev{
bottom: 10%;
left: 0;
width: 30px;
height: 10%;
position: fixed;
display: none;
-webkit-transform: rotate(180deg);
}
.btnNext{
bottom: 10%;
right: 0;
width: 30px;
height: 10%;
position: fixed;
}
.main{
width: 100%;
height: 100%;
background: pink;
position: absolute;
top: 0;
}
.mainImg{
position: absolute;
bottom: 0;
width: 40%;
left: 30%;
}
.itemNavis{
list-style: none;
position: absolute;
left: 0;
bottom: 0;
margin: 0;
padding: 0;
}
.itemNavi{
float: left;
width: 20px;
height: 20px;
background: white;
opacity: 0.8;
margin: 10px;
text-indent: -9999px
}
.btnMenu{
top: 10px;
right: 10px;
background: none;
}
.btnMenu img:first-child{
position: absolute;
-webkit-transform: rotate(90deg);
}
.btnMenu img:last-child{
position: absolute;
-webkit-transform: rotate(-90deg);
display: none;
}
.btnItem{
bottom: 10px;
right: 10px;
}
.btnItem img:first-child{
position: absolute;
-webkit-transform: rotate(-90deg);
}
.btnItem img:last-child{
position: absolute;
-webkit-transform: rotate(90deg);
display: none;
}
.btn{
width: 50px;
height: 50px;
position: absolute;
}
.yajirushi{
width: 100%;
height: 100%;
opacity: 0.8;
border-radius: 10px;
}
</style>
<div class="menu">
<div class="menuBack">
<div class="blur">
<div class="blurContent"></div>
</div>
</div>
<ul class="menuLists">
<li class="menuList">かご</li>
<li class="menuList">ブーケ</li>
<li class="menuList">花瓶</li>
<li class="menuList">鉢植え</li>
</ul>
</div>
<div class="item">
<div class="itemLists">
<div class="itemList"><img class="itemImg" src="gabera.jpg" /></div>
<div class="itemList"><img class="itemImg" src="bara.jpg" /></div>
<div class="itemList"><img class="itemImg" src="churip.jpg" /></div>
<div class="itemList"><img class="itemImg" src="kaneshon.jpg" /></div>
<div class="itemList"><img class="itemImg" src="himawari.jpg" /></div>
</div>
<div class="btnPrev"><img class="yajirushi"src="yajirushi.jpg" /></div>
<div class="btnNext"><img class="yajirushi" src="yajirushi.jpg" /></div>
</div>
<div class="main beforeMenu beforeItem"></div>
<img class="mainImg" src="kago.png" />
<ul class="itemNavis">
<li class="itemNavi">1</li>
<li class="itemNavi">2</li>
<li class="itemNavi">3</li>
<li class="itemNavi">4</li>
<li class="itemNavi">5</li>
</ul>
<div class="btn btnMenu">
<img class="yajirushi" src="yajirushi.jpg" />
<img class="yajirushi" src="yajirushi.jpg" />
</div>
<div class="btn btnItem">
<img class="yajirushi" src="yajirushi.jpg" />
<img class="yajirushi" src="yajirushi.jpg" />
</div>
</body>