Jump to content

Magearlik

Members
 View Profile  See their activity

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by Magearlik

    Add accordion to mobile menu...

    in JavaScript

    Posted

    I was reading the tutorial for creating an accordion here:

     

    http://www.w3schools.com/howto/howto_js_accordion.asp

     

    Does anyone know how I could add this accordion or something similar to the mobile view of a responsive menu. I want to add it only when there is a 'submenu'. The code I currently have is (index.html):

    <!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Resposive Multi Level Horizontal Nav?</title>
	<!--nav styles-->
	<style>
		.show
		{
			display: block;
		}
		nav
		{
			width: 100%;
			float: left;
			font-family: 'Oswald', sans-serif;
			font-size: 100%;
			color: #252525;
			border-bottom: 4px solid #0069d4;
			border-top: 4px solid #0069d4;
			background-color: #fff;
		}
		ul
		{
			list-style: none;
			margin: 0;
			padding: 0;
		}
		li
		{
			display: inline-block;
			position: relative;
		}
		a
		{
			text-decoration: none;
			color: #fff;
		}
		li a
		{
			height: 60px;
			line-height: 60px;
			background-color: #fff;
			width: 120px;
			text-align: center;
			color: #252525;
			display: block;
			
		}
		li a:hover
		{
			background-color: #0069d4;
			color: #fff;
			-webkit-transition-duration: 0.3s;
			transition-duration: 0.3s;

		}
		/* submenu desktop */
		ul.submenu 
		{ 
			position:absolute;
			top:100%; 
			display:none;
		}
		ul.submenu li 
		{ 
			display:block;
		}
		ul.submenu li a 
		{ 

			 display:block;
			 float:none;
			 font-size: 100%;
			 line-height:40px;
			 height:auto;
		}
		ul li:hover ul.submenu 
		{ 
			display:block;
		}

		/* open close mobile nav*/
		#i-nav
		{
			display: none;
			float: right;
			padding: 20px 20px;
		}
		.expand_sub
		{
			display: none;
			float: right;
		}
		@media (max-width: 1024px)
		{
			nav
			{
				width: 100%;
				padding: 0;
				margin: 0;
			}
			ul li 
			{ 
				display:block;

			}
			ul
			{
				width: 100%;
				display: none;
			}
			li a
			{
				width: 100%;
				text-align: center;
				float: left;
			}
			#i-nav
			{
				display: block;
			}
			.expand_sub
			{
				display: block;
			}
			ul.submenu 
			{ 
				position:relative;
				top:0%; 
				display:block;
			}
			ul.submenu li 
			{ 
				display:block;
			}
			ul.submenu li a
			{ 
				width: 100%;
				float: left;
			}
		}

	</style>
	<!--google fonts-->
	<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
	<!--font awesome-->
	<link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<nav>
		<div><a id="i-nav" href="#"><i class="fa fa-bars fa-2x" aria-hidden="true" style="color:#0069d4;"></i></a></div>
		<ul id="menu">
			<li><a href="#">HOMEPAGE</a><li>
			<li><a href="#">PROGRAMS</a>
				<ul class="submenu">
					<li><a href="#">Program 1</a></li>
					<li><a href="#">Program 2</a></li>
					<li><a href="#">Program 3</a></li>
				</ul>
			</li>
			<li><a href="#">MEMBERSHIP</a><li>
			<li><a href="#">NEWS</a><li>
			<li><a href="#">GALLERY</a><li>
			<li><a href="#">CONTACT</a><li>
		</ul>
	</nav>
	<!-- jquery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
	<!-- script to toggle mobile menu -->
	<script>
		$(document).ready(function(){
			$('#i-nav').click(function(){
				$('#menu').toggleClass('show');
			});
		});
	</script>
</body>
</html>
×
×
  • Create New...