"Fullscreen Show_HidetoDropdow"
Bootstrap 4.1.1 Snippet by yui.napassorn

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container"><br/>
<h2>แสดงข้อมูลทั้งหมด / แสดงข้อมูลเป็น Dropdow (responsiveness)</h2><br/>
<div class="row box">
<div class="col-6 col-xl-6">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>
</div>
<div class="col-6 col-xl-6">
<div class="sidebar-nav">
<input id="navCheck-right" type="checkbox"/>
<label class="nav-link" for="navCheck-right">e-service<i class="fa fa-caret-down"></i></label>
<div class="sidebar-nav-button-right">
<ul class="navbar-nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
.container{padding:5%}
.container .box{margin-left:10%;margin-right:10%}
.container .nav-link{color:#9a332b}
.container .col-xl-6{padding:5%;border:1px solid #9a332b}
.container .sidebar-nav{margin-bottom:-10px}
.container .sidebar-nav .flex-column{margin-left:14%}
.container .sidebar-nav i{display:unset;padding-left:10px}
@media only screen and (min-width:1200px){
.container .sidebar-nav i{display:none}
}
.container .sidebar-nav #navCheck-left{display:none}
.container .sidebar-nav #navCheck-left:not(:checked)~.sidebar-nav-button-left{display:none}
@media only screen and (min-width:1200px){
.container .sidebar-nav #navCheck-left:not(:checked)~.sidebar-nav-button-left{display:unset}
}
.container .sidebar-nav #navCheck-left:checked~.sidebar-nav-button-left{display:block}
.container .sidebar-nav #navCheck-right{display:none}
.container .sidebar-nav #navCheck-right:not(:checked)~.sidebar-nav-button-right{display:none}
@media only screen and (min-width:1200px){
.container .sidebar-nav #navCheck-right:not(:checked)~.sidebar-nav-button-right{display:unset}
}
.container .sidebar-nav #navCheck-right:checked~.sidebar-nav-button-right{display:block}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard React
Fullscreen Background Carousel

Questions / Comments: