ในการทำเว็บไซต์แบบ responsive หลายคนน่าจะเคยเจอมาเหมือนๆ กัน คือ ใช่ bootstrap ในการทำ แต่ว่าในบางอย่าง บางเรื่องการใช้ bootstrap ทำกลับเป็นเรื่องที่ยุ่งยาก เช่น การทำเมนูย่อ ขยายตามหน้าจอ โดยเมนูไม่ได้อยู่ที่ส่วนบนสุดของเว็บไซต์ แบบนี้การใช้ bootstrap ทำจะยากขึ้นมาทันที
Code ส่วน 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;}
}
Code ส่วน 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>
รับทําเว็บไซต์ 
แลกลิงค์ 
