function screenWidth()
	{

 "use strict";

	var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;	

	if(width < 800)
	{

		var makeDiv = document.createElement("div");
		makeDiv.id = "mobileNav";

		var navBarList = document.createElement("ul");
		navBarList.id = "navBarMobileControls";

		var links = document.getElementsByClassName("deskTopcontrols")[0].getElementsByTagName('a');

		links.forEach
		{
			var listItem = document.createElement("li").appendChild(navBarList);  	
		}


console.log(listItem);
		}
	}

window.addEventListener("resize", screenWidth);

Basically the idea is to append create an unordered list then add list items based on

	<div class="deskTopcontrols">
		<div class="reviews">
			<ul>
				<li>
					<a href="rreviews.php">Reccent reviews</a>
				</li>
				<li>
					<a href="nlocations.php">New locations</a>
				</li>
				<li>
					<a href="contactus.php">Contact us</a>
				</li>
			</ul>
		</div>	
		<div class="loginMaster">	
			<div class="login"> 
					Already have an account?
			</div>
			<div class="showLogin">Show</div>
				<div class="loginControls">
			<ul>	
				<li>
					<form class="form-controls">
						<div>	
							<span>Email</span>
							<input type="text" placeholder="Email address">
							<span class="error"></span>
						</div>

					<div>	
						<span>Password</span>
						<input type="password" placeholder="Password">
						<span class="error"></span>
					</div>
					<div class="newUser">
						<a href="forgot.php">Forgot password</a>
					</div>
					<div>	
						<input type="submit" value="Enter">
					</div>
				</form>	
			</li>
			<div class="newUser">
				New here? <a href="register.php">Join us</a>
			</div>
		</ul>	
			</div>	
	</div>		
</div>

Any recommenced reading?

    Write a Reply...