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(../ima
.footer{margin-top:50px;te
.footer a{color:#999;text-decorati
.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:
CSS3
**************************
This is the actual whole HTML5 code just incase you may need it. Including mobile navigation code:
Screen-Shot-2012-08-25-at-22.54..png
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(../ima
.footer{margin-top:50px;te
.footer a{color:#999;text-decorati
.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]
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]**************************
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>Screen-Shot-2012-08-25-at-22.54..png
ASKER
#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
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
Hi Redscrapbook,
I am not able to open your zip file. maybe it got corrupted in the upload. it's 0 bytes.
I am not able to open your zip file. maybe it got corrupted in the upload. it's 0 bytes.
ASKER
www.kerrydeaf.com/kozaiwaniec.zip
I've problems uploading stuff on this site for whaterver reason.
I've problems uploading stuff on this site for whaterver reason.
that didn't work either. I think you need to re-make your zip file.
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
:))
Cheers.
You can always just email me directly too (include the files)
kyleiwaniec @ gmail com
ASKER
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 ;-) ;-)
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 ;-) ;-)
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
ASKER
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
Please post a zip file with all the css and js files.