Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1910
  • Last Modified:

Mobile (menu) navigation with jQuery.

I got this mobile navigation from http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-5#comments

I've no bother implement the code on its own. I suspect the problem is CSS3 when I integrate the mobile (menu) navigation with jQuery on my HTML code with other functions e.g. accordion etc. I've tried to position the mobile (menu) navigation on the <header> area but it would not stay in a <header> area not without a lot of CSS3 hacking to have absolute positioning in which I think is not a good idea e.g. margin: -34px 0 -0px 23px;

I've successfully implement accordion loosely on centre of a page with background can be seen e.g. .accordion{width:94%;.

For example as below for accordion:
body{background:url(../images/bg.png) repeat;margin:0; padding:0;}
.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial;}
.footer a{color:#999;text-decoration:none}#wrapper-250,
.accordion{width:94%; margin:0 auto; max-width:500px;}


Would it be possible to emulate as above for Mobile (menu) navigation with jQuery without fixing the CSS3 margin: -34px 0 -0px 23px; for example as below. I think is what causes a lot of problem only when I add in margin: -34px 0 -0px 23px to achieve  menu on <header> area.
#nav-wrap {
            position: relative;
            margin: -34px 0 -0px 23px;
      }


I would appreciate with your expertise and easier solution for Mobile (menu) navigation on <header> please?


---------------------------------------------------------------------------------------
The HTML5 code of the actual mobile (menu) navigation with jQuery:
		[b]<!-- Header start -->
	<div id="header"><h3>Heading</h3>
	
	
	
		<!-- Mobile navigation start -->
	<nav id="nav-wrap">
	<!--<div id="menu-icon">Menu</div>-->

	<ul id="nav">
	
	<table width="90%" border="0" cellspacing="5">
    <tr>
        <td><li><a href="#">1</a></li></td>
        <td><li><a href="#">2</a></li></td>
        <td><li><a href="#">3</a></li></td>
        <td><li><a href="#">4</a></li></td>
        <td><li><a href="#">5</a></li></td>
    </tr>
    <tr>
        <td><li><a href="#">6</a></li></td>
        <td><li><a href="#">7</a></li></td>
        <td><li><a href="#">8</a></li></td>
        <td><li><a href="#">9</a></li></td>
        <td><li><a href="#">10</a></li></td>
    </tr>
</table>
	
	</ul>
	</nav>
	<!-- / Mobile navigation end -->
	
	
	
	</div>
<!-- Header End -->[/b]
	

Open in new window



CSS3
[b]/************************************************************************************
GENERAL
*************************************************************************************/
body {
	font: 10px Arial, Helvetica, sans-serif;
	color: #666;
}
a {
	text-decoration: none;
	color: #39C;
}
h1, h2 {
	line-height: 120%;
	margin: 0 0 10px;
	color: #000;
}
/*header {
	display: table; 
}

/************************************************************************************
STRUCTURE
*************************************************************************************/
/* #pagewrap {
	width: 960px;
	max-width: 94%;
	margin: 0px auto 0;
}*/
/*#content {
	clear: both;
	border-top: solid 1px #ccc;
	padding-top: 20px;
	margin: 20px 0;
} */

/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
	margin-top: 20px;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 5px;
}

/* nav link */
#nav a {
	padding: 4px 15px;
	display: block;
	color: #000;
	background: #ecebeb;
}
#nav a:hover {
	background: #f8f8f8;
}

/* nav dropdown */
#nav ul {
	background: #fff;
	padding: 2px;
	position: absolute;
	border: solid 1px #ccc;
	display: none; /* hide dropdown */
	width: 100px;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 5000px) {

	/* nav-wrap */
	#nav-wrap {
		position: relative;
		margin: -34px 0 -0px 23px;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		width: 35px;
		height: 20px;
		background: #a5cd4e url(../images/menu-icon.png) no-repeat 5px center;
		padding: 8px 2px 0px 30px;
		cursor: pointer;
		/* border: solid 1px #666;*/
		display: block; /* show menu icon */
		font: 12px Arial, Helvetica, sans-serif;
	}
	#menu-icon:hover {
/************************************************************************************
GENERAL
*************************************************************************************/
/*body {
	font: .9em/150% Arial, Helvetica, sans-serif;
	color: #666;
}
a {
	text-decoration: none;
	color: #39C;
}
h1, h2 {
	line-height: 120%;
	margin: 0 0 10px;
	color: #000;
}
header {
	content: " "; 
	display: table; 
}*/


/************************************************************************************
STRUCTURE
*************************************************************************************/
/* #pagewrap {
	width: 960px;
	max-width: 94%;
	margin: 30px auto 0;
}
#content {
	clear: both;
	border-top: solid 1px #ccc;
	padding-top: 20px;
	margin: 20px 0;
} */

/************************************************************************************
NAV
*************************************************************************************/
#nav-wrap {
	margin-top: 20px;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 5px;
}

/* nav link */
#nav a {
	padding: 4px 15px;
	display: block;
	color: #000;
	background: #ecebeb;
}
#nav a:hover {
	background: #f8f8f8;
}

/* nav dropdown */
#nav ul {
	background: #fff;
	padding: 2px;
	position: absolute;
	border: solid 1px #ccc;
	display: none; /* hide dropdown */
	width: 100px;
}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}
#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 600px) {

	/* nav-wrap */
	#nav-wrap {
		position: relative;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		width: 42px;
		height: 30px;
		background: #ecebeb url(images/menu-icon.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		border: solid 1px #666;
		display: block; /* show menu icon */
	}
	#menu-icon:hover {
		background-color: #f8f8f8;
	}
	#menu-icon.active {
		background-color: #bbb;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 38px;
		width: 160px;
		z-index: 10000;
		padding: 5px;
		background: #f8f8f8;
		border: solid 1px #999;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #666;
		border: none;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #000;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}

}

@media screen and (min-width: 600px) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}

		background-color: #3db8c8;
	}
	#menu-icon.active {
		background-color: #ffcb05;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 28px;
		width: 320px;
		z-index: 10000; /* place overlay on top of other elements */
		padding: 5px;
		background: #ffcb05;  /* f8f8f8 */
		border: solid 1px #ffcb05;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 0;
		color: #666;
		border: none;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: none;
		color: #000;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}

}

@media screen and (min-width: 600px) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}[/b]

Open in new window




****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************



This is the actual whole HTML5 code just incase you may need it. Including mobile navigation code:
<!DOCTYPE html>

<!-- *********************************************************************************************

How to Create CSS3 + jQuery Accordion Menu [Tutorial]
"How to Create CSS3 + jQuery Accordion Menu" that was specially made for DesignModo by our friend Valeriu Timbuc. 

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com/futurico
http://vladimirkudinov.com
http://rockablethemes.com

********************************************************************************************* -->

<html lang="en">

<head>
	<title>jQuery Accordion Menu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><!-- // Removing the device width and height from the meta tag will give us the fluid layout. http://css3wizardry.com/category/iphone/ -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="robots" content="noindex,follow" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<link rel="apple-touch-startup-image" href="images/splash.png" />
	<script src="js/jquery.mobile.js"></script>


	
	<!-- // Performance improve with accordion function improves with Phonegap scripts were added. Smooth ease in and ease out effect. It degrade gracefully with rollover effect of the content heading bars.-->
	<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
	<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript">


	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e) 
	{ 
      e.preventDefault(); 
    };
	document.addEventListener("touchmove", preventBehavior, false);
	*/
	
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	/*
	function handleOpenURL(url)
	{
		// TODO: do something with the url passed in.
	}
	*/
	
	function onBodyLoad()
	{		
		document.addEventListener("deviceready", onDeviceReady, false);
	}
	
	/* When this function is called, PhoneGap has been initialized and is ready to roll */
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	function onDeviceReady()
	{
		// do your thing!
		navigator.notification.alert("PhoneGap is working")
	}
    
    </script>
    
    <!-- Header and footer style start -->
    <link rel="stylesheet" href="css/generic.css" type="text/css" media="screen" />
    <!-- Header and footer style end -->
    
    <!-- Accordian Start. http://designmodo.com/jquery-accordion-menu/ -->
	<link rel="stylesheet" href="css/accordionmenu.css" type="text/css" media="screen" />
	<!-- <style type="text/css">body{background:url(images/bg.png) repeat;}.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial}.footer a{color:#999;text-decoration:none}#wrapper-250, .accordion{width:94%; margin:0 auto; max-width:500px;}</style> -->

<!-- Accordian script start -->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><!-- Change it to jquery1.7.2 from 1.7.1. It still works. Source: webdesignerwall.com/demo/mobile-nav/-->
<script type="text/javascript">

		$(document).ready(function() {

			// Store variables
			
			var accordion_head = $('.accordion > li > a'),
				accordion_body = $('.accordion li > .sub-menu');

			// Open the first tab on load

			// accordion_head.first().addClass('active').next().slideDown('normal');

			// Click function

			accordion_head.on('click', function(event) {

				// Disable header links
				
				event.preventDefault();

				// Show and hide the tabs on click

				if ($(this).attr('class') != 'active'){
					accordion_body.slideUp('normal');
					$(this).next().stop(true,true).slideDown('normal');
					accordion_head.removeClass('active');
					$(this).addClass('active');
				}else{
                                        $(this).next('.sub-menu').slideUp('normal');
                                        $(this).removeClass('active');
                                        }
			});


		});

	</script>             
<!-- Accordian script end -->




<!-- Coyer start -->
<link rel='stylesheet' href='css/style.css'>
<!-- Coyer end -->

<!-- Mobile navigation start -->
<script type="text/javascript">
jQuery(document).ready(function($){

	/* prepend menu icon */
	$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
	
	/* toggle nav */
	$("#menu-icon").on("click", function(){
		$("#nav").slideToggle();
		$(this).toggleClass("active");
	});

});
</script>
<!-- Mobile navigation start -->

<!-- Mobile navigation start -->
<link href="css/mobile_navigation.css" rel="stylesheet" type="text/css">
<!-- Mobile navigation end -->



</head>

<body>
<!-- Header start -->
	<div id="header"><h3>Heading</h3>
	
	
	
		<!-- Mobile navigation start -->
	<nav id="nav-wrap">
	<!--<div id="menu-icon">Menu</div>-->

	<ul id="nav">
	
	<table width="90%" border="0" cellspacing="5">
    <tr>
        <td><li><a href="#">1</a></li></td>
        <td><li><a href="#">2</a></li></td>
        <td><li><a href="#">3</a></li></td>
        <td><li><a href="#">4</a></li></td>
        <td><li><a href="#">5</a></li></td>
    </tr>
    <tr>
        <td><li><a href="#">6</a></li></td>
        <td><li><a href="#">7</a></li></td>
        <td><li><a href="#">8</a></li></td>
        <td><li><a href="#">9</a></li></td>
        <td><li><a href="#">10</a></li></td>
    </tr>
</table>
	
	</ul>
	</nav>
	<!-- / Mobile navigation end -->
	
	
	
	</div>
<!-- Header End -->

<!-- Body start -->
<!-- Accordion start -->
	<div id="wrapper-250">

		<ul class="accordion">
			
			<li id="one" class="files">

				<a href="#one">My Files<span>495</span></a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>
					
					<li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

					<li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

					<li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>
					
					<li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>

				</ul>

			</li>
			
			<li id="two" class="mail">

				<a href="#two">Mail<span>26</span></a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Hotmail<span>9</span></a></li>
					
					<li><a href="#"><em>02</em>Yahoo<span>14</span></a></li>

				</ul>

			</li>
			
			<li id="three" class="cloud">

				<a href="#three">Cloud<span>58</span></a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Connect<span>12</span></a></li>
					
					<li><a href="#"><em>02</em>Profiles<span>19</span></a></li>
					
					
					
					
					
					
					
					<!-- coyer start -->
	<div id="page-wrap">
				
			<div class="module blue">
				<h2><em>03</em>Deaf person's attention <a href="#">1</a></h2>
				<ul>
				   <li>Take a step-by-step process.</li>
				   <li>Approaching a Deaf person may be enough and your approach may suggest your intention to communicate.</li>
				   <li>You can also wave to get eye contact or tap the person gently on the shoulder.</li>
				</ul>

				<h2><em>04</em>When is it my turn? <a href="#">2</a></h2>
				<ul>
				   <li>Set up a system in the surgery to that a visual indicator will allow a Deaf person to know when he or she is being called.</li>
				   <li>A monitor in the waiting room is a good idea.</li>
				   <li>If an interpreter is present, make sure you call the patient's name and not the interpreter's name.</li>
				</ul>

				<h2><em>05</em>Scheduling appointments <a href="#">3</a></h2>
				<ul>
				   <li>Ensure that email or text messages can be used to make an appointment.</li>
				   <li>Why not try an online booking system?</li>
				   <li>It is important that Deaf people manage their health and can book their own appointments.</li>
				</ul>
			</div>
	</div>
<!-- coyer end -->

					
					
					
					
					
					
					
					

					<li><a href="#"><em>03</em>Options<span>27</span></a></li>

					<li><a href="#"><em>04</em>Connect<span>12</span></a></li>
					
					<li><a href="#"><em>05</em>Profiles<span>19</span></a></li>

					<li><a href="#"><em>06</em>Options<span>27</span></a></li>

				</ul>

			</li>
			
			<li id="four" class="sign">

				<a href="#four">Sign Out</a>

				<ul class="sub-menu">
					
					<li><a href="#"><em>01</em>Log Out</a></li>
					
					<li><a href="#"><em>02</em>Delete Account</a></li>

					<li><a href="#"><em>03</em>Freeze Account</a></li>

				</ul>

			</li>
		
		</ul>
		
	</div>
<!-- Accordion end -->
<!-- Body end -->






<!-- Footer Start -->	
<div id="footer"></div>
<!-- Footer End -->	
	
</body>

</html>

Open in new window

Screen-Shot-2012-08-25-at-22.54..png
Screen-Shot-2012-08-25-at-22.54..png
0
Redscrapbook
Asked:
Redscrapbook
  • 6
  • 6
2 Solutions
 
Kyle HamiltonData ScientistCommented:
Hi,

Please post a zip file with all the css and js files.
0
 
RedscrapbookAuthor Commented:
#nav-wrap {
            position: relative;
            margin: -34px 0 -0px 23px;
      }

The margin is causing problems. If i remove a margin and you'll see a problem where a menu and menu icon move below a <header>.

What I'm hoping to achieve is to have menu align with the accordion or loosely position on a header area that I can adjust easily.

Please find a zipped file as attached.
kozaiwaniec.zip
0
 
Kyle HamiltonData ScientistCommented:
Hi Redscrapbook,

I am not able to open your zip file. maybe it got corrupted in the upload. it's 0 bytes.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
RedscrapbookAuthor Commented:
www.kerrydeaf.com/kozaiwaniec.zip
I've problems uploading stuff on this site for whaterver reason.
0
 
Kyle HamiltonData ScientistCommented:
that didn't work either. I think you need to re-make your zip file.
0
 
Kyle HamiltonData ScientistCommented:
Are you in Kerry? I so wish to return to Ireland... I lived in Dublin for a few years. I'm looking at Galway now - we have a really cute cottage in Connemara - not one you could really live in full time, but awesome to visit. Anyway, if you know of any web development jobs in Ireland, will you let me know?

:))

Cheers.

You can always just email me directly too (include the files)

kyleiwaniec @ gmail com
0
 
RedscrapbookAuthor Commented:
www.kerrydeaf.com/kozaiwaniec_2.zip
I don't know why it has to be painful as possible with a corrupted file! And redo the lota again. I've double checked and a file with plenty of bytes zipped.

I'm from Clare and currently resides in Dublin. This is my client site from Kerry that I'm ftp-ping. Ireland are still deep in recession, 'weary sigh' and 'its going on for too long' . There are work but any work sought are hard won. LinkedIn is a good bet and not many want to spend money on advertising or worse still look for free labour through internship for someone with masters degree calibrate. One big blue chip company actually attempted this and it was eventually withdrawn from Creative Ireland.com protest. I'd recommend work in bigger company with less chance of letting go as opposed to smaller companies.

We (Ireland) are hanging on and wish that this 'recession' thing will be over sooner, but no. Some say it is already over but it far from it. It is global and that effects Ireland like a dominio. I'm a graphic designer by profession and able to tell you the current climate as it is. It isn't easy. My advice is to stay put where you are unless you're wealthy enough to relocate to a lovely cottage in Galway and work from home ;-) ;-)
0
 
Kyle HamiltonData ScientistCommented:
OK, I made some adjustments so that it's a little cleaner. I added an inner wrapper for the header, which is 94% of the window to match the accordion. (I also made a change to the last line of accordion.css, because the 94% was getting read twice.) I'm using absolute positioning for the headerTitle and the nav-wrap, but in a way that you don't have to set weird values.

Anyway, I made a whole bunch of changes to the css files and the html file. I'm having trouble uploading here too, so I'm emailing you the files.
0
 
RedscrapbookAuthor Commented:
Ahh, I'm not the only one with difficulties uploading on this site. Thank you for taking your time in cleaning up the codes and I appreciate it. I'll check my email now.
0
 
RedscrapbookAuthor Commented:
I've identified all the clean up you've done. Is it possible to match the Yellow drop down to match the accordion width. I've tried few ways but to no avail. I even add in 'tables'. I know it should be thing of a past. Then it is a wrap for this question.
0
 
Kyle HamiltonData ScientistCommented:
make the following adjustments:

mobile_navigation.css:92@media screen and (max-width: 5000px)
#nav-wrap {
position: absolute;
padding: 5px 0;
width: 96.7%;
max-width: 500px;

}

mobile_navigation.css:92@media screen and (max-width: 5000px)
#nav {
clear: both;
position: absolute;
width: 100%;
z-index: 10000;
padding: 5px;
background: #FFCB05;
border: solid 1px #FFCB05;
display: none;
}

<table width="" border="0" cellspacing="5" style="
    width: 100%;
   
">
                    <tbody><tr>
                        <td><li><a href="#">1</a></li></td>
                        <td><li><a href="#">2</a></li></td>
                        <td><li><a href="#">3</a></li></td>
                        <td><li><a href="#">4</a></li></td>
                        <td><li><a href="#">5</a></li></td>
                    </tr>
                    <tr>
                        <td><li><a href="#">6</a></li></td>
                        <td><li><a href="#">7</a></li></td>
                        <td><li><a href="#">8</a></li></td>
                        <td><li><a href="#">9</a></li></td>
                        <td><li><a href="#">10</a></li></td>
                    </tr>
                </tbody></table>

If you can, you should try not to use tables though.
Cheers.
0
 
RedscrapbookAuthor Commented:
I'm very impressed with kozaiwaniec dedication and expertise on specific requests. It is always spot on. I always look forward to responses to my requests as I know there is always something to learn.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now