*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body{
font-family: montserrat, sarabun,serif;
}
nav{
background: #0082e6;
height: 80px;
width: 100%
}
label.logo{ /*class logo ใช้กับtag label เท่านั้น */
color: white;
font-size: 50px;
line-height: 70px; /* 80% */
padding: 0 100px;
font-weight: bold;
display: none; /* close ไว้ก่อน เพื่อแสดงภาพข้อความของ .page-content img */
}
.page-content img { /* ภาพย่อ ขยาย ตามขนาดหน้าจอ */
max-width: 100%;
height: auto!important;
}
.page-content1 {
line-height: 70px; /* อยู่ห่างจากขอบบน */
padding-left: 50px; /* อยู่ห่งจากขอบซ้าย */
color: white;
font-size: 30px;
max-width: 100%;
height: auto!important;
}
nav ul{
float: right; /* menu in ul tag at right page */
margin-right: 20px;
}
nav ul li {
display: inline-block;
line-height: 80px;
margin: 0 5px;
}
nav ul li a{
color: white;
font-size: 17px;
padding: 7px 13px;
border-radius: 3px;
text-transform: uppercase;
}
a.active, a.hover{
background: #1b9bff;
transition: .5s;
}
.checkbtn{
font-size: 30px;
color: white;
/*
color: black; สี fa bars */
float: right; /* ให้อยู่ฝั่งขวา */
line-height: 80px;
margin-right: 40px; /* ห่างจากขอบจอ 40px */
cursor: pointer; /* เปลี่ยนเป็นรูปมือชี้ */
display: none; /* ปิดกล่อง ไว้ก่อน */
}
#check{
display: none; /* ปิดกล่องcheckbox ไว้ก่อน */
/* display: block; /* ปิดกล่องcheckbox ไว้ก่อน */
}
@media (max-width:952px){
label.logo{
font-size: 20px; /* ขนาดอักษร math Online ครูสุวิทย์ */
padding-left: 50px;
}
nav ul li a{
font-size: 16px;
}
} /* end @media */
@media (max-width:858px){
.checkbtn{
display: block; /* เลื่อนย่อหน้าจอกล่องcheckbox will be enable */
}
/* ถ้าย่อหน้าจอลง head.gif จะหายไป */
.page-content{
display: none; /* suwit */
}
.page-content1{
display: none; /* suwit */
}
/* ถ้าย่อหน้าจอลง label.logo จะแสดง */
label.logo{
display: block;
}
ul{
position: fixed; /* text ใน tag ul จะ fixed */
width: 100%;
height: 100vh;
background: #2c3e50; /* body color background เวลาจอขนาด 858px */
top: 80px;
/* left: 0;*/
left: -100%; /* กดปุ่ม checkbox ทำให้ menu slide in-out */
text-align: center;
transition: all .5s;
}
nav ul li{
display: block; /* แสดงพื้นหลังเป็นรูปกล่อง เรียงจากบนลงล่างของเมนูรายการเลือก */
margin: 50px 0;
line-height: 30px;
}
nav ul li a{
font-size: 20px;
}
a:hover,a.active{
background: none;
color: #0082e6;
}
#check:checked ~ ul{
left: 0;
/* left: 200;*/
}
} /* end @media (max-width:858px) */
section{
background: url(bg1.jpg) no-repeat;
background-size: cover;
height: calc(100vh - 80px);
}
article a{ /*suwit เปลี่ยนพื้นหลังและสีตัวอักษรของ a href link ที่อยู่ในกรอบของ aeticle*/
background: #ffffff;
color: #0082e6;
}
}
.style6 {
font-size: 12
}
.style7 { /*class style7 >>สีตัวหนังสือสีขาว */
color: #FFFFFF;
}
.style8 {
color: #0000FF;
font-weight: bold;
}
/* icon สร้างเอง */
#titleBar {
background-image: -moz-linear-gradient(top, #008dab, #007294);
background-image: -webkit-linear-gradient(top, #008dab, #007294);
background-image: -ms-linear-gradient(top, #008dab, #007294);
background-image: linear-gradient(top, #008dab, #007294);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
display: block;
/* display: none; /* เมื่อย่อจะไม่แสดง */
height: 44px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10001;
text-align: center;
/* color: #fff; */ /*สีตัวหนังสือ Minimaxing */
color: #ED3E08;
font-size: 1.25em;
background-color: #007294;
}
#titleBar .title {
/* line-height: 44px; */
line-height: 44px; /* ระยะห่างตัวหนังสือ Minimaxing จากขอบบน */
}
#titleBar .toggle {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 60px;
}
#titleBar .toggle:after {
content: '';
position: absolute;
left: 4px;
top: 4px;
color: #fff;
text-align: center;
line-height: 31px;
font-size: 0.8em;
width: 50px;
height: 35px;
/* border-radius: 5px; /*ขอบมนของตัวicon คล้ายfa fa-bars */
border-radius: 5px;
/*สีพื้นหลัง icon คล้าย fa fa-bars*/
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 0, 0.25), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 6px 13px 0px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.1);
/*
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 6px 13px 0px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.1);
*/
}
#titleBar .toggle:before {
content: '';
position: absolute;
width: 20px;
height: 30px;
/* ภาพคล้าย fa-bars */
background: url("images/mobileUI-site-nav-opener-bg.svg");
top: 16px;
left: 19px; /* ตำแหน่งของ icon fa-bars */
}
#titleBar .toggle:active:after {
background: rgba(0, 0, 0, 0.2);
}
/*end icon จากภาพสร้างเอง */
/* เริ่ม icon fabar สร้างเอง */
.sidebar-btn {
position: absolute; /* ตำแหน่ง checkbox และตัวหนังสือ h1 Flat CSS Sidebar จะอยู่บรรทัดติดกัน */
/*clip: rect(0,50,50, 0); */
clip: rect(0, 0, 0, 0); /* เพื่อให้กล่อง checkboxไม่แสดงต้องให้มี top=0 right=0 bottom=0 left=0 */
clip: rect(top, right, bottom, left);
*/
}
label[for="sidebar-btn"] {
position: fixed;
left: 15px;
top: 15px;
z-index: 2;
height: 30px;
width: 30px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
/*
background-image: url("data:image/svg+xml;utf8,");
*/
background-size: contain;
}
/* เมื่อ click ที่ icon fa bars ตัว icon จะเลื่อนไป ซ้าย-ขวา*/
.sidebar-btn:checked + label {
left: 345px; /* ระยะเมื่อ click แล้วอยู่ห่างจากขอบซ้าย */
/*
left: 245px;
*/
}
/* end icon fa-bar สร้างเอง */