3 <title>W3.CSS Template</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
7 <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-w3schools.css">
8 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
11 html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}
12 .w3-sidenav a,.w3-sidenav h4 {padding: 12px;}
21 <div id="navbar" class="w3-top">
22 <div class="w3-bar w3-theme w3-top w3-left-align w3-large">
23 <a class="w3-bar-item w3-button w3-opennav w3-right w3-hide-large w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)" onclick="w3_open()"><i class="fa fa-bars"></i></a>
24 <span id="ctdl_banner_title" class="w3-bar-item w3-button w3-theme-l1">XXX</span>
25 <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Ungoto</a>
26 <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Read new</a>
27 <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Read all</a>
28 <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Enter</a>
29 <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Skip</a>
30 <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Goto</a>
31 <a href="#" id="lilo" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Login</a>
32 <span id="current_user" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">XXX</span>
38 <nav class="w3-sidenav w3-collapse w3-theme-l5 w3-animate-left" style="z-index:3;width:250px;margin-top:43px;" id="sidebar">
39 <a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-padding-large w3-hover-black w3-hide-large" title="close menu">
40 <i class="fa fa-remove"></i>
43 <a href="#" class="w3-hover-black">Link</a>
44 <a href="#" class="w3-hover-black">Link</a>
45 <a href="#" class="w3-hover-black">Link</a>
46 <a href="#" class="w3-hover-black">Link</a>
49 <!-- Overlay effect when opening sidenav on small screens -->
50 <div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
52 <!-- Main content: shift it to the right by 250 pixels when the sidenav is visible -->
53 <div id="main" class="w3-main" style="margin-left:250px">
58 <script type="text/javascript" src="js/login.js"></script>
59 <script type="text/javascript" src="js/main.js"></script>
60 <script type="text/javascript" src="js/views.js"></script>
63 var sidebar = document.getElementById("sidebar");
65 // Get the DIV with overlay effect
66 var overlayBg = document.getElementById("myOverlay");
68 // Toggle between showing and hiding the sidenav, and add overlay effect
70 if (sidebar.style.display === 'block') {
71 sidebar.style.display = 'none';
72 overlayBg.style.display = "none";
74 sidebar.style.display = 'block';
75 overlayBg.style.display = "block";
79 // Close the sidenav with the close button
81 sidebar.style.display = "none";
82 overlayBg.style.display = "none";