mobile

Cabbageboy · Cabbageboy · commit dbe7d378370c · 2017-07-27T23:42:53.000-04:00
diff --git a/css/basic.css b/css/basic.css
@@ -20,3 +20,18 @@
 	overflow:auto;
 	z-index: 100;
 }
+
+@media (max-width:450px){
+
+	#title-text{
+		font-size:15px;
+		text-align: left;
+	}
+
+}
+
+@media (min-width: 450px){	
+	.hide_phone{
+		display: none;
+	}
+}
diff --git a/css/materialize.min.css b/css/materialize.min.css
diff --git a/index.html b/index.html
@@ -15,14 +15,22 @@
 <body style="padding-left:50px; padding-right:50px">
 	<nav>
 	    <div class="nav-wrapper">
-	      <a href="#" class="brand-logo">&nbsp&nbspInterview Knowledge</a>
+	      <a href="#" data-activates="slide-out" class="button-collapse hide_phone"><i class="material-icons">menu</i></a>
+	      <a href="#" class=" brand-logo " id='title-text'>&nbsp&nbspInterview Knowledge</a>
 	      <ul id="nav-mobile" class="right hide-on-med-and-down">
 	        <li><a href='#!'>About</a></li>
 	        <li><a href="#!" onclick="div_show()">Login</a></li>
 	      </ul>
 	    </div>
 	</nav>
 
+	<ul id="slide-out" class="side-nav">
+		    <li><a href='#!' class='waves-effect'>About</a></li>
+		    <li><div class="divider"></div></li>
+        	<li><a href="#!" class='waves-effect' onclick="div_show()">Login</a></li>
+        	<li><div class="divider"></div></li>
+	</ul>
+
 	<div id="abc">
 	<!-- popout contact starts-->
 	<div id="popupContact">
@@ -84,8 +92,8 @@ <h1 style="text-align:center">C++</h1>
 	      		<li>
 	      			<div class="collapsible-header"> <i class="material-icons">star</i>Keywords</div>
 	      		 	<div class="collapsible-body"><span>
-	      		 		reference & <br>
-						pointer * <br>
+	      		 		reference (&)<br>
+						pointer (*) <br>
 						#define (marco)<br>
 						virtual<br>
 						unsigned<br>
@@ -148,14 +156,15 @@ <h1 style="text-align:center">C++</h1>
 
 
 	    <li>
-	      <div class="collapsible-header"><i class="material-icons">wb_incandescent</i>STL</div>
+	      <div class="collapsible-header"><i class="material-icons">wb_incandescent</i>STL (Standard Template Library)</div>
 	      <div class="collapsible-body"> 
-	      	 
-	      		 
 	      		 	 <span>
 	      		 		vector  <br>
+	      		 		deque<br>
+	      		 		list<br>
+	      		 		pair<br>
 						set/ unordered_set<br>
-						map (red black tree) / unordered_map  <br>
+						map / unordered_map  <br>
 						stack <br>
 						queue/ priority_queue  <br>
 						list<br>
@@ -172,10 +181,12 @@ <h1 style="text-align:center">C++</h1>
 	    </li>
   	</ul>
 
-	<script type="text/javascript" src="js/my.js"></script>
+
 
 	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
+	<script type="text/javascript" src="js/my.js"></script>
+	
 
 </body>
 
diff --git a/java.html b/java.html
@@ -16,7 +16,7 @@
 <body style="padding-left:50px; padding-right:50px; overflow:hidden;">
 	<nav>
 	    <div class="nav-wrapper">
-	      <a href="#" class="brand-logo">&nbsp&nbspInterview Knowledge</a>
+	      <a href="#" class="brand-logo" id='title-text'>&nbsp&nbspInterview Knowledge</a>
 	      <ul id="nav-mobile" class="right hide-on-med-and-down">
 	        <li><a href='#!'>About</a></li>
 	        <li><a href="#!" onclick="div_show()">Login</a></li>
diff --git a/js/my.js b/js/my.js
@@ -16,4 +16,17 @@ function form_reset(){
 	$('#last_name').val('');
 	$('#email').val('');
 	$('#password').val('');
-}
+}
+
+
+$('.button-collapse').sideNav({
+      menuWidth: 300, // Default is 300
+      edge: 'left', // Choose the horizontal origin
+      closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
+      draggable: true, // Choose whether you can drag to open on touch screens,
+      onOpen: function(el) { /* Do Stuff */ }, // A function to be called when sideNav is opened
+      onClose: function(el) { /* Do Stuff */ }, // A function to be called when sideNav is closed
+    }
+);
+
+ 
