Jump to content
Sign in to follow this  
Magearlik

Add accordion to mobile menu...

Recommended Posts

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...