レスポンシブWebサイトを作成する際には、多くの人が Bootstrap で作ります 。たまにBootstrap で使用するのは面倒くさい事になります。例えば、メニューは、Webサイトの上部ではなく、そして、画面上合わせて大きくしたりして、Bootstrapで結構難しいものです。
コードCSS style.cssファイル
ul{
display:block;
}
li{
display:inline-block;
float:left;
width:20%;
background-color:#33FF66;
text-align:center;
}
li:hover{
background-color:#F90;
}
.menu{display:none; cursor:pointer; background-color:#333; width:30px;}
.navigation{width:80%; margin-left:auto; margin-right:auto;}
@media(max-width:768px){
span.menu{display:block;}
li{ width:100%;}
ul{
display:none;
}
}
@media(max-width:1500px){
ul{
display:block;
}
.menu{display:none;}
}
コードHTML index.htmlファイル
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link href=”css/bootstrap.css” rel=”stylesheet” type=”text/css” media=”all”>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” media=”all”/>
<script src=”js/jquery-1.11.0.min.js”></script>
</head>
<body>
<div class=”navigation”>
<span class=”menu”><img src=”images/icon.png” alt=””/></span>
<ul class=”res” >
<li><a href=”index.html” class=”active hvr-sweep-to-bottom”>Home</a></li>
<li><a class=”hvr-sweep-to-bottom” href=”about.html”>About</a></li>
<li><a class=”hvr-sweep-to-bottom” href=”typo.html”>News</a></li>
<li><a class=”hvr-sweep-to-bottom” href=”gallery.html”>Gallery</a></li>
<li><a class=”hvr-sweep-to-bottom” href=”contact.html”>Contact</a></li>
</ul>
<div class=”clearfix”></div>
<script>
$( “span.menu” ).click(function() {
$( “ul.res” ).slideToggle( 300, function() {
});
});
</script>
</div>
</body>
</html>