kevin.legarreta
/
Proyecto_Oller
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

sidenav added

Kevinlega 6 years ago
parent
fb63e18fea
commit
26b577d61f
4 changed files with 108 additions and 114 deletions
Split View Show Diff Stats
  1. 46
    12
      public_html/FORS_XRF/FORS_XRF.html
  2. 8
    0
      public_html/FORS_XRF/scripts/FORS_XRF.js
  3. 54
    43
      public_html/FORS_XRF/style/style.css
  4. 0
    59
      sidenav.html

+ 46
- 12
public_html/FORS_XRF/FORS_XRF.html View File 

@@ -52,20 +52,54 @@
52 52 
 	      			<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
53 53 
 	      			<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
54 54 
 	    		</form>
55 
-	  		</div>
56 
-		</nav>
55 
+	  		</div></nav>
57 56
58 
-	</head>
59 
-	<div id="image"></div>
60 
-	<body onload="Load();">
57 
+
58 
+	    <!-- Sidebar -->
59 
+	    <nav id="sidebar" class="sidenav">
60 
+	    	<li>
61 
+	    		<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
62 
+	    	</li>
63 
+
64 
+   	        <li class="active">
65 
+                <a href="#XRFcolors" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">XRF</a>
66 
+                <ul class="collapse list-unstyled" id="XRFcolors">
67 
+                    <li>
68 
+                    	<a href="#">Home 1</a>
69 
+                    </li>
70 
+                    <li>
71 
+                    	<a href="#">Home 2</a>
72 
+                    </li>
73 
+                    <li>
74 
+                        <a href="#">Home 3</a>
75 
+                    </li>
76 
+                </ul>
77 
+            </li>
78 
+            <li>
79 
+                <a href="#FORScolors" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">FORS</a>
80 
+                <ul class="collapse list-unstyled" id="FORScolors">
81 
+                    <li>
82 
+                        <a href="#">Page 1</a>
83 
+                    </li>
84 
+                    <li>
85 
+                        <a href="#">Page 2</a>
86 
+                    </li>
87 
+                    <li>
88 
+                        <a href="#">Page 3</a>
89 
+                    </li>
90 
+                </ul>
91 
+            </li>
92 
+            <li>
93 
+                <a href="/MSI/msi.html">MSI</a>
94 
+            </li>
95 
+    	</nav>
61 96
62 
-			<nav class="floating-menu">
63 
-				<button onclick="show_XRF();" class="show_colors">XRF</button>
64 
-				<button onclick="show_FORS();" class="show_colors">FORS</button>
65 
-				<a href="/MSI/msi.html"><button class="show_colors">MSI</button></a>
66 
-			</nav>
97 
+    	<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;Options</span>
67 98
68 
-			<nav class="XRF" id="XRFcolors"></nav>
69 
-			<nav class="FORS" id="FORScolors"></nav>
99 
+	</head>
100 
+
101 
+	<body onload="Load();">
102 
+		<div id="image"></div>
103 
+
70 104 
 	</body>
71 105 
 </html>

+ 8
- 0
public_html/FORS_XRF/scripts/FORS_XRF.js View File 

@@ -44,6 +44,14 @@ function show_FORS(){
44 44 
     }
45 45 
 }
46 46
47 
+function openNav() {
48 
+    document.getElementById("sidebar").style.width = "200px";
49 
+}
50 
+
51 
+function closeNav() {
52 
+    document.getElementById("sidebar").style.width = "0";
53 
+}
54 
+
47 55 
 function buttons_colors(){
48 56 
         // var buttons = document.getElementById('XRFcolors');
49 57 
         // var newNode = document.createElement('button');

+ 54
- 43
public_html/FORS_XRF/style/style.css View File 

@@ -5,56 +5,67 @@
5 5 
     margin-top: 150px;
6 6 
     width: 50%;
7 7 
     position: sticky;
8 
-	}
9 
-
10 
-  .floating-menu {
11 
-    font-family: sans-serif;
12 
-    border-width:5px;
13 
-    border-style:solid;
14 
-    padding: 5px;;
15 
-    width: 170px;
16 
-    z-index: 100;
17 
-    margin-left: left;
18 
-    margin-top: -500px;
19 
-  }
20 
-
21 
-  .show_colors {
22 
-  	border: none;
23 
-    background-color: inherit;
24 
-    margin: 0 0.5em;
25 
-    font-size: 2.5em;
26 
-    cursor: pointer;
27 
-    display: inline-block;
28 
-  }
29 
-  .show_colors:hover {background: #eee}
30 
-
31 
-
32 
-  .colors {
33 
-  	border: none;
34 
-    background-color: inherit;
35 
-    margin: 0 0.5em;
36 
-    font-size: 1.5em;
37 
-    cursor: pointer;
38 
-    display: inline-block;
39 
-  }
40 
-  .colors:hover {background: #eee}
41 
-
42 
-  .XRF {
8 
+}
9 
+
10 
+.XRF {
43 11 
     font-family: sans-serif;
44 12 
     border-width:5px;
45 13 
     border-style:solid;
46 14 
     display: none;
47 
-	  width: 140px;
48 
-	  margin-top: -190px;
49 
-	  margin-left: 165px;
50 
-	}
15 
+    width: 140px;
16 
+    margin-top: -190px;
17 
+    margin-left: 165px;
18 
+}
51 19
52 
-  .FORS {
20 
+.FORS {
53 21 
     font-family: sans-serif;
54 22 
     border-width:5px;
55 23 
     border-style:solid;
56 24 
     display: none;
57 25 
     width: 140px;
58 
-	  margin-top: -125px;
59 
-	  margin-left: 165px;
60 
-	}
26 
+    margin-top: -125px;
27 
+    margin-left: 165px;
28 
+}
29 
+
30 
+.sidenav {
31 
+    height: 100%;
32 
+    width: 0px;
33 
+    position: fixed;
34 
+    z-index: 1;
35 
+    /*top: 0;*/
36 
+    left: 0;
37 
+    background-color: #212529;
38 
+    overflow-x: hidden;
39 
+    padding-top: 20px;
40 
+    transition: 0.5s;
41 
+}
42 
+
43 
+.sidenav a {
44 
+    padding: 6px 6px 6px 32px;
45 
+    text-decoration: none;
46 
+    font-size: 25px;
47 
+    color: #818181;
48 
+    display: block;
49 
+
50 
+}
51 
+
52 
+.sidenav a:hover {
53 
+    color: #f1f1f1;
54 
+}
55 
+
56 
+.sidenav .closebtn {
57 
+    position: absolute;
58 
+    top: 0;
59 
+    right: 25px;
60 
+    font-size: 36px;
61 
+    margin-left: 50px;
62 
+}
63 
+
64 
+.main {
65 
+    margin-left: 200px; /* Same as the width of the sidenav */
66 
+}
67 
+
68 
+@media screen and (max-height: 450px) {
69 
+  .sidenav {padding-top: 15px;}
70 
+  .sidenav a {font-size: 18px;}
71 
+}

+ 0
- 59
sidenav.html View File 

@@ -1,59 +0,0 @@
1 
-<!DOCTYPE html>
2 
-<html>
3 
-<head>
4 
-<meta name="viewport" content="width=device-width, initial-scale=1">
5 
-<style>
6 
-body {
7 
-    font-family: "Lato", sans-serif;
8 
-}
9 
-
10 
-.sidenav {
11 
-    height: 100%;
12 
-    width: 200px;
13 
-    position: fixed;
14 
-    z-index: 1;
15 
-    top: 0;
16 
-    left: 0;
17 
-    background-color: #111;
18 
-    overflow-x: hidden;
19 
-    padding-top: 20px;
20 
-}
21 
-
22 
-.sidenav a {
23 
-    padding: 6px 6px 6px 32px;
24 
-    text-decoration: none;
25 
-    font-size: 25px;
26 
-    color: #818181;
27 
-    display: block;
28 
-}
29 
-
30 
-.sidenav a:hover {
31 
-    color: #f1f1f1;
32 
-}
33 
-
34 
-.main {
35 
-    margin-left: 200px; /* Same as the width of the sidenav */
36 
-}
37 
-
38 
-@media screen and (max-height: 450px) {
39 
-  .sidenav {padding-top: 15px;}
40 
-  .sidenav a {font-size: 18px;}
41 
-}
42 
-</style>
43 
-</head>
44 
-<body>
45 
-
46 
-<div class="sidenav">
47 
-  <a href="#">About</a>
48 
-  <a href="#">Services</a>
49 
-  <a href="#">Clients</a>
50 
-  <a href="#">Contact</a>
51 
-</div>
52 
-
53 
-<div class="main">
54 
-  <h2>Sidenav Example</h2>
55 
-  <p>This sidenav is always shown.</p>
56 
-</div>
57 
-
58 
-</body>
59 
-</html>