www.webdeveloper.com
Results 1 to 14 of 14

Thread: [RESOLVED] One last problem with responsive navigation

  1. #1
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210

    resolved [RESOLVED] One last problem with responsive navigation

    I want to thank those who have helped me with my previous problems with my responsive navigation.

    I have one last problem which can be seen at this url:
    http://www.lawrence-nv.us/Rnav2/

    If you view this on a screen width of less than 800 pixels, you will see a Menu button which if you click on it you will get a drop down menu.

    The problem is, is you don't click on the Menu button, but hover your mouse pointer over the area beneath the Menu button, you will see the individual links become visible.

    Does anyone know of a way to prevent these links from being visible without clicking the Menu button?

  2. #2
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    You might try, replace:
    Code:
    @media screen and (max-width: 800px){
        .showDesktop { display: none; }
    	.showMobile { display:block; }
    
        nav ul{
          max-height: 0;
        }
        .showing{max-height: 25em;}
        nav ul li{
          box-sizing: border-box;
          width: 100%;
          padding: 10px 15px 5px 15px;
          text-align: left;
        }
        nav ul li:first-child{
          padding: 50px 15px 5px 15px;
        }
        .handle{
          display:block;
        }
    }
    with:
    Code:
    @media screen and (max-width: 800px) {
        .showDesktop { display: none; }
        .showMobile { display:block; }
    }
    nav ul {
        max-height: 0;
    }
    .showing {
        max-height: 25em;
    }
    nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 15px 5px 15px;
        text-align: left;
    }
    nav ul li:first-child {
        padding: 50px 15px 5px 15px;
    }
    .handle {
        display:block;
    }

  3. #3
    I don't know who told you to do that... but... UHG...

    Two copies of the same menu for nothing, jQuery for nothing, hiding the menu for nothing but making it HARDER to use on mobile (I don't care if that's the current sick trend, it's usability garbage) -- It's a laundry list of how not to build a menu.

    I would toss pretty much all of that, and just make a normal menu, cutting down the sizes. You're getting WAY too complex for something ridiculously simple.

    Though that's often the nature of the beast known as HTML 5 mated to scripttardery.

    Of course, if you REALLY want to hide it on mobile, you can do it without scripting using :target

    First, let's drag it kicking and screaming back into an actual RECOMMENDATION doctype instead of that bekaptah bloated pointless HTML 5 nonsense.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
      
    <title>
    	Menu Demo
    </title>
    
    </head><body>
    
    <h1>Menu Demo</h1>
    
    <div id="mainMenu">
    	<!--
    		I put no text in the show/hide anchors as they are CSS control only
    		elements and make no sense when CSS is disabled/unavailable. Don't
    		confuse screen reader users with that stuff, instead add them with
    		generated content!
    	-->
    	<a href="#mainMenu" class="show"></a>
    	<a href="#" class="hide"></a>
    	<ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">What is a Q Painting</a></li>
    		<li><a href="#">About the Author and Artist</a></li>
    		<li><a href="#">About our Collection</a></li>
    		<li><a href="#">More info on Ordering</a></li>
    		<li><a href="#">Contact Us</a></li>
    	</ul>
    <!-- #mainMenu --></div>
    
    <div id="testWidth"></div>
    
    </body></html>
    I would axe the trying to split them into multiple lines to try and make sure they stay together, and instead just make them fit as needed -- after all if you're making a responsive layout, well... make a responsive layout. A single trigger to keep the number per line relatively equal would be all I'd do until you hit the 'hide' trigger.

    From there it's a simple matter of using #mainMenu:target to show/hide the UL. To do this I would set the outer DIV to overflow:hidden, both a.show and a.hide to position:relative and a high z-index, then use a negative margin-top equal to the number of menu items times their height (line-height + padding + any borders)... a transition on margin will give the animation.

    Something like:
    Code:
    /* assumes a reset is in use */
    
    #mainMenu {
    	text-align:center;
    	background:#4A8;
    }
    
    #mainMenu a {
    	display:none;
    	text-decoration:none;
    	padding:0.25em 0.5em;
    	color:#FFF;
    	background:#086;
    }
    
    #mainMenu ul {
    	list-style:none;
    	padding:0.25em;
    	background:#4A8;
    }
    
    #mainMenu li {
    	display:inline;
    }
    
    #mainMenu li a {
    	display:inline-block;
    	background:inherit;
    	-webkit-border-radius:0.5em;
    	-moz-border-radius:0.5em;
    	border-radius:0.5em;
    }
    
    #mainMenu li a:active,
    #mainMenu li a:focus,
    #mainMenu li a:hover {
    	background:#086;
    }
    
    @media (max-width:48em) {
    	#mainMenu ul {
    		max-width:30em;
    		margin:0 auto;
    	}
    }
    
    @media (max-width:30em) {
    	#mainMenu {
    		overflow:hidden;
    		min-height:2em;
    		/*
    			you have to min-height equal to line-height + padding or webkit will
    			shrink element an extra amount for christmas knows what reason.
    		*/
    	}
    	#mainMenu>a {
    		position:relative;
    		z-index:999;
    	}
    	#mainMenu .show,
    	#mainMenu li {
    		display:block;
    	}
    	#mainMenu ul {
    		position:relative;
    		z-index:1;
    		margin-top:-12.5em;
    		/*
    			negative margin-top should equal number of menu elements times
    			(line-height + padding + borders) combined with UL padding.
    		*/
    		transition:margin 0.5s;
    	}
    	#mainMenu .hide,
    	#mainMenu:target .show {
    		display:none;
    	}
    	#mainMenu:target .hide {
    		display:block;
    	}
    	#mainMenu:target ul {
    		margin-top:0;
    	}
    	#mainMenu .show:before {
    		content:"Show Menu";
    	}
    	#mainMenu .hide:before {
    		content:"Hide Menu";
    	}
    }
    I put a live copy up here:
    http://www.cutcodedown.com/for_other.../template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/lkeeney/

    Really what you had there is a stunning example of what I mean by "jQuery doing CSS' job". You'll find this animates far smoother, has none of the issues you were encountering, and isn't a nonsensical waste of markup by saying the same menu twice.

    Hope this helps.
    Is unlocked for easy access to the gooey bits and pieces.

  4. #4
    Join Date
    May 2014
    Posts
    4
    i thnk a developer can resolve it up... you should try to contact it on any freelancing site .

  5. #5
    Join Date
    Feb 2013
    Posts
    110
    Even though I generally disagree with Deathshadow on HTML5, I agree in what he writes. You don't need two navigation menus and you can do things in CSS (Specially CSS3 - LOL) than you can do in jQuery (or the minimalist Javascript ).

  6. #6
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    Quote Originally Posted by ShrineDesigns View Post
    You might try, replace:
    Code:
    @media screen and (max-width: 800px){
        .showDesktop { display: none; }
    	.showMobile { display:block; }
    
        nav ul{
          max-height: 0;
        }
        .showing{max-height: 25em;}
        nav ul li{
          box-sizing: border-box;
          width: 100%;
          padding: 10px 15px 5px 15px;
          text-align: left;
        }
        nav ul li:first-child{
          padding: 50px 15px 5px 15px;
        }
        .handle{
          display:block;
        }
    }
    with:
    Code:
    @media screen and (max-width: 800px) {
        .showDesktop { display: none; }
        .showMobile { display:block; }
    }
    nav ul {
        max-height: 0;
    }
    .showing {
        max-height: 25em;
    }
    nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 15px 5px 15px;
        text-align: left;
    }
    nav ul li:first-child {
        padding: 50px 15px 5px 15px;
    }
    .handle {
        display:block;
    }
    I may be going crazy, but are both of these codes identical?

  7. #7
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    Quote Originally Posted by deathshadow View Post
    I don't know who told you to do that... but... UHG...

    Two copies of the same menu for nothing, jQuery for nothing, hiding the menu for nothing but making it HARDER to use on mobile (I don't care if that's the current sick trend, it's usability garbage) -- It's a laundry list of how not to build a menu.

    I would toss pretty much all of that, and just make a normal menu, cutting down the sizes. You're getting WAY too complex for something ridiculously simple.

    Though that's often the nature of the beast known as HTML 5 mated to scripttardery.

    Of course, if you REALLY want to hide it on mobile, you can do it without scripting using :target

    First, let's drag it kicking and screaming back into an actual RECOMMENDATION doctype instead of that bekaptah bloated pointless HTML 5 nonsense.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html
    	xmlns="http://www.w3.org/1999/xhtml"
    	lang="en"
    	xml:lang="en"
    ><head>
    
    <meta
    	http-equiv="Content-Type"
    	content="text/html; charset=utf-8"
    />
    
    <meta
    	http-equiv="Content-Language"
    	content="en"
    />
    
    <meta
    	name="viewport"
    	content="width=device-width; height=device-height; initial-scale=1.0"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
      
    <title>
    	Menu Demo
    </title>
    
    </head><body>
    
    <h1>Menu Demo</h1>
    
    <div id="mainMenu">
    	<!--
    		I put no text in the show/hide anchors as they are CSS control only
    		elements and make no sense when CSS is disabled/unavailable. Don't
    		confuse screen reader users with that stuff, instead add them with
    		generated content!
    	-->
    	<a href="#mainMenu" class="show"></a>
    	<a href="#" class="hide"></a>
    	<ul>
    		<li><a href="#">Home</a></li>
    		<li><a href="#">What is a Q Painting</a></li>
    		<li><a href="#">About the Author and Artist</a></li>
    		<li><a href="#">About our Collection</a></li>
    		<li><a href="#">More info on Ordering</a></li>
    		<li><a href="#">Contact Us</a></li>
    	</ul>
    <!-- #mainMenu --></div>
    
    <div id="testWidth"></div>
    
    </body></html>
    I would axe the trying to split them into multiple lines to try and make sure they stay together, and instead just make them fit as needed -- after all if you're making a responsive layout, well... make a responsive layout. A single trigger to keep the number per line relatively equal would be all I'd do until you hit the 'hide' trigger.

    From there it's a simple matter of using #mainMenu:target to show/hide the UL. To do this I would set the outer DIV to overflow:hidden, both a.show and a.hide to position:relative and a high z-index, then use a negative margin-top equal to the number of menu items times their height (line-height + padding + any borders)... a transition on margin will give the animation.

    Something like:
    Code:
    /* assumes a reset is in use */
    
    #mainMenu {
    	text-align:center;
    	background:#4A8;
    }
    
    #mainMenu a {
    	display:none;
    	text-decoration:none;
    	padding:0.25em 0.5em;
    	color:#FFF;
    	background:#086;
    }
    
    #mainMenu ul {
    	list-style:none;
    	padding:0.25em;
    	background:#4A8;
    }
    
    #mainMenu li {
    	display:inline;
    }
    
    #mainMenu li a {
    	display:inline-block;
    	background:inherit;
    	-webkit-border-radius:0.5em;
    	-moz-border-radius:0.5em;
    	border-radius:0.5em;
    }
    
    #mainMenu li a:active,
    #mainMenu li a:focus,
    #mainMenu li a:hover {
    	background:#086;
    }
    
    @media (max-width:48em) {
    	#mainMenu ul {
    		max-width:30em;
    		margin:0 auto;
    	}
    }
    
    @media (max-width:30em) {
    	#mainMenu {
    		overflow:hidden;
    		min-height:2em;
    		/*
    			you have to min-height equal to line-height + padding or webkit will
    			shrink element an extra amount for christmas knows what reason.
    		*/
    	}
    	#mainMenu>a {
    		position:relative;
    		z-index:999;
    	}
    	#mainMenu .show,
    	#mainMenu li {
    		display:block;
    	}
    	#mainMenu ul {
    		position:relative;
    		z-index:1;
    		margin-top:-12.5em;
    		/*
    			negative margin-top should equal number of menu elements times
    			(line-height + padding + borders) combined with UL padding.
    		*/
    		transition:margin 0.5s;
    	}
    	#mainMenu .hide,
    	#mainMenu:target .show {
    		display:none;
    	}
    	#mainMenu:target .hide {
    		display:block;
    	}
    	#mainMenu:target ul {
    		margin-top:0;
    	}
    	#mainMenu .show:before {
    		content:"Show Menu";
    	}
    	#mainMenu .hide:before {
    		content:"Hide Menu";
    	}
    }
    I put a live copy up here:
    http://www.cutcodedown.com/for_other.../template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/lkeeney/

    Really what you had there is a stunning example of what I mean by "jQuery doing CSS' job". You'll find this animates far smoother, has none of the issues you were encountering, and isn't a nonsensical waste of markup by saying the same menu twice.

    Hope this helps.
    Is unlocked for easy access to the gooey bits and pieces.
    I have to admit, this is much more elegant than what I came up with.

    My only concern with putting them on a single line is the client has mentioned they may want to add two more navigation buttons after the site is up and running. I guess I could reduce the text size if they want to add more.

  8. #8
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    As I mentioned in one of my posts, I am a very old fart and I haven't kept up with the latest techniques in website design. This is the first website I am designing which hopefully will be responsive. This may also be the last website I ever design because I am just too old to keep with the quickly changing technology.

    I now have to make this navigation work with drop-down menus. Can anyone point me to tutorial that will help me accomplish this? I have made many of the old conventional websites with drop-down menus in the past, but this is quite different from anything I have done before.

    As pointed out in the above posts, there are many ways of doing things with HTML5 and CSS3. Unless you use it on a daily basis it is difficult to know which is the best path to take.

  9. #9
    Join Date
    Dec 2002
    Location
    Seattle, WA
    Posts
    1,843
    Quote Originally Posted by lkeeney View Post
    I may be going crazy, but are both of these codes identical?
    I pushed all but the .showDesktop and .showMobile out of the media query.

  10. #10
    Quote Originally Posted by lkeeney View Post
    As I mentioned in one of my posts, I am a very old fart and I haven't kept up with the latest techniques in website design. This is the first website I am designing which hopefully will be responsive. This may also be the last website I ever design because I am just too old to keep with the quickly changing technology.
    Sad part is, most of it in terms of good practices HASN'T changed in a decade and a half -- the problem is most of the tutorials, books and people teaching it never pulled their heads out of 1997's backside in the first place. It's how HTML 5 came into being, as it's carefully crafted to set development practices BACK a decade or more.

    But yeah, it is hard to keep up; the old IT saying from the '80's comes to mind: "3 years is obsolete, 5 years is the scrapheap."

    Which is why many experienced IT folks think a bachelors is a waste of time and money. Only people who know nothing about IT or haven't worked in the field for more than a decade could possibly think a college education in the topic is worth a flying purple fish.

    Quote Originally Posted by lkeeney View Post
    I now have to make this navigation work with drop-down menus. Can anyone point me to tutorial that will help me accomplish this? I have made many of the old conventional websites with drop-down menus in the past, but this is quite different from anything I have done before.
    Dropdowns can be very difficult to work with in a responsive layout, particularly if you care about mobile users. Generally speaking I've STOPPED putting them on websites and put sub-navigation into a sidebar instead. Really they are painful to use and are not compatible with the whole "shrink it down for mobile" nonsense. Between "link overload" -- giving the visitor too many options at once, "false simplicity" -- oversimplifying a complex task to the point it's actually harder to use, and "accessibility, what's that?" -- where you get so much CSS and JS going on that in trying to make the page useable on different devices you've made it harder to use on different devices... You might be best off just finding some other way to deliver sub-pages. Keep the main menu simple and direct to the sub-sections, with good old 'drilldown' navigation for the rest of the site.

    Basically, it's way too easy now to get too complicated for your own good... and sadly many ridiculously overcomplicated things that make more work are sold to people as making life simpler, faster and easier; the exact opposite of what they actually do. Again, see jQuery, BootStrap, and the vast majority of HTML, CSS and JS frameworks.

    Quote Originally Posted by lkeeney View Post
    As pointed out in the above posts, there are many ways of doing things with HTML5 and CSS3. Unless you use it on a daily basis it is difficult to know which is the best path to take.
    Particularly CSS3 which has been a total game-changer... though it's not that hard or that complex if - as I keep saying - you know semantic markup, separation of presentation from content, follow accessibility guidelines, build with progressive enhancement so you have graceful degradation, and all the other good practices we're SUPPOSED to have been using the past decade and a half. That many developers still scoff at in ignorance, sleazing out presentational HTML 3.2 and slapping 4 tranny or 5 lip-service on it.

    As to the trainwreck known as HTML 5 for the most part there are only a handful of reasons to use it:

    1) you REALLY need to deliver video and audio to people dumb enough to throw money away on Apple products just to be told that they don't even own the device and can't run third party software unless it's "approved" by them. Have fun screwing around with four different codec/container combinations like the worst of the late '90's wmp vs. quicktime vs. realplayer nonsense.

    2) You're building a web application and are using MANIFEST

    3) The client "demands" it because they only know it as a sick buzzword with no clue what it really means other than "5 is greater than 4 so it must be better". In which case you build the page in HTML 4 strict or XHTML 1.0 Strict (the current recommendations) and then slap the 5 lip-service doctype on it when finished.

    Apart from that, all HTML 5 does is re-introduce old redundancies, create all new redundancies with allegedly semantic wrappers that serve no legitimate purpose on a site, promote vendor lock-in, and basically undo all the progress HTML 4 Strict was supposed to be about.

    After all, there's a reason HTML 4.01 Strict and XHTML 1.0 Strict are STILL the recommendation doctypes, when they are 1998 era ideas. Here's hoping the idiocy known as HTML 5 NEVER becomes a recommendation, or that by the time it does, we'll have a HTML 6 Strict that undoes all the garbage it's pissing on the specification with just like HTML 3.2 before it.

  11. #11
    Join Date
    May 2014
    Location
    bangalore
    Posts
    39
    add the viewport metalink and java script coding in header position.

    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

    JS:
    Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
    	$(function() {
    		var pull = $('#pull');
    		menu = $('nav ul');
    		menuHeight = menu.height();
    		$(pull).on('click', function(e) {
    		e.preventDefault();
    		menu.slideToggle();
    		});
    	$(window).resize(function(){
    		var w = $(window).width();
    	if(w < 320 && menu.is(':hidden')) {
    	menu.removeAttr('style');
    	}
    	});
    	});
    </script>

    and then add the style coding as given below:
    Code:
    nav {
        font-family: 'PT Sans',Arial,sans-serif;
        font-size: 11pt;
        font-weight: bold;
        position: relative;
        padding:0 0 35px;
    }
    nav ul {
        height: 40px;
        margin: 0 auto;
        padding: 0;
        width: 71%;
    }
    nav li {
        display: inline;
        float: left;
       font-size:15px;
    }
    nav a {
        color: #FFFFFF;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        text-shadow: 1px 1px 0 #283744;
        background-color: #001B60;
        border-bottom-style: none;
        padding:15px;
    }
    nav li a {
        box-sizing: border-box;
    }
    nav li:last-child a {
        border-right: 0 none;
    }
    nav a:hover, nav a:active {
        background-color: #8C99A4;
    }
    nav a#pull {
        display: none;
    }
    
    
    .clearfix:before, .clearfix:after {
        content: " ";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix:before, .clearfix:after {
        content: " ";
        display: table;
    }

    and also add @media coding that is
    Code:
    @media only screen and (max-width: 480px) {
    nav {
        border-bottom: 0 none;
    }
    nav ul {
        display: none;
        height: auto;
    }
    
    nav a {
        border-radius: 10px;
        margin: 0 0 0 10px;
    	width:93%;
    }
    
    nav a#pull {
        background-color: #283744;
        display: block;
        position: relative;
        /*width: 100%;*/
    	width:81%;
    	border-radius: 10px;
    	margin: 0 0 0 10px;
    }
    nav a#pull:after {
        background: url("nav-icon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
        content: "";
        display: inline-block;
        height: 30px;
        position: absolute;
        right: 15px;
        top: 10px;
        width: 10%;
    }
    in the css style page.
    Last edited by jedaisoul; 05-29-2014 at 04:07 PM. Reason: code tags added

  12. #12
    Join Date
    Mar 2004
    Location
    Nevada, USA
    Posts
    210
    I want to thank everyone for their help. I have decided to completely change my approach to the design of this website, so I have marked this thread as "Resolved".

  13. #13
    Join Date
    Mar 2012
    Posts
    1,831
    Quote Originally Posted by Veeramanikandan View Post
    add the viewport metalink and java script coding in header position.

    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    What has "maximum-scale=1" got to do with responsive code???

  14. #14
    Quote Originally Posted by jedaisoul View Post
    What has "maximum-scale=1" got to do with responsive code???
    Other than crippling accessibility by removing the ability to zoom on mobile? Nothing really. That's a value you REALLY should NEVER set. "initial-scale"? That's fine. "Maximum-scale"? Not so much.

    Though I'd also set height="device-height" since that gets reported as width on some newer Android devices when in portrait display. (or is it landscape? one or the other)

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles