Building a Responsive Layout With Skeleton: Navigation

Big like! I was Just looking for this…

Nice!
I was just using Skeleton for one of the projects I am working right now :)

thank you very mutch
very good tutorial

Really great stuff, just can’t wait for the next lesson.

Hi Ian,

Thanks for your response.

Extract of my code :

//Menu pour mobile et tablette
$(document).ready(function() {
$(“”).appendTo(“#conteneur header nav”);

//Default option “Voir les rubriques…”
$(“”, {
“selected”:”selected”,
“value”:”",
“text”:”Voir les rubriques…”
}).appendTo(“nav select”);

//Menu items
$(“#conteneur header nav li a”).each(function(){
var el = $(this);
$(“”, {
“value”:el.attr(“href”),
“text”:el.text()
}).appendTo(“nav select”);});
});

//Link
$(“nav select”).change(function() {
window.location = $(this).find(“option:selected”).val();
});

Hope you can help me with that ! ;-)

Thank-you for this! Very well done!

Amazing Tuts! :P
Thanks a lot…

I had been looking for create a responsive navigation. It is a good tutorial. Thanks for sharing.

I am enjoying the tutorial yet one thing puzzles me: in hiding the text of the logo (h1) the idea is presented to give the font dimensions of 0 pixels but I believe that for search engines this presents an issue. Google for instance, may remove your site from their index when you have text hidden like this.

Check this out: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=66353

Perhaps there is an exception to this policy that I am not aware of, …looking forward to your thoughts on this.

Greetings Michael

I have a question maybe someone can answer for me. Whats the reason for using the sprite image that way. Its it particularly advantageous to keep just one image with both logos and use that twice rather than create two separate images? Is it just a matter of caching or is there something else?

Hi Ian,

I’ve found that adding a bit more javascript to the mobile navigation code will allow us to generate a dash instead of adding it to the markup itself and hiding it with css. Where you have //Populate dropdowns… replace it with this:

// Populate dropdowns with dash for child pages
$(".navigation nav li a").each(function() {
var el = $(this);
var padding = "";
for (var i = 0; i < el.parentsUntil('div > ul').length - 1; i++)
padding += "&ndash;";
$("<option />", {
"value"   : el.attr("href"),
"html"    : padding + el.text(),
}).appendTo("nav select");
});

You can always change out the – with other html such as   , » or whatever else you fancy. Let me know how this works out for you!

Hi and thanks for a fantastic tutorial. It truly stands out for its detail and clarity.

I too have the problem with the no-wrap on the submenu mentioned above by Iva. I’ve tried the no-wrap in a different design as well as in your source files, but despite this I still see the scrollbar.

I use Safari 6.01, but see the same problem in Firefox 15.01. Grateful for any ideas.

I am curious as to the licensing of this tutorial. Can this be followed to create a “real” website, but with different logos and content? Thanks, this tutorial is AMAZING.

How do I center the navigation in the primary nav div?

First of all, let me say that this tutorial is fantastic. I’m fairly new to web design, and this tutorial has helped me out a ton in designing my own responsive site.

I’ve seen a couple of comments about issues with the CSS dropdown menu in IE8 (and possibly earlier?), but haven’t seen any solutions, so I thought I’d share what I’ve found and ask a couple of questions about it. The problem I had been seeing is that in the dropdown menu the hover states did not work correctly in IE8; the first menu item would stay highlighted but none of the others would highlight when you moused over them. It appears that the offending CSS attribute was the “filter: alpha(opacity=XX)” in the “nav.primary ul ul” and “nav.primary ul li:hover ul” selectors. To fix the problem I removed the following from “layout.css”:

nav.primary ul ul {
filter: alpha(opacity=0);
}

nav.primary ul li:hover ul {
filter: alpha(opacity=100);
}


and then since the skeleton boilerplate adds a class of .ie to the html tag for IE8 and earlier, I added the following code to get the dropdown menu to work correctly in those browsers:

.ie nav.primary ul ul {
visibility: hidden;
}

.ie nav.primary ul li:hover ul {
visibility: visible;
}


This appears to be working fine in IE8, but I haven’t been able to test it in earlier versions. I would assume it should work though since the visibility attribute is supported in earlier versions of IE? I also haven’t had a chance to test in IE9 to make sure it still works there, but I would still assume it should work since the opacity attribute is supported in this browser.

So my questions are this: does this seem like a viable solution, and does anybody see any issues that might arise from taking this approach? Also, is using the “visibility” attribute appropriate in this case (it seems like the positioning shouldn’t be a problem since the submenu ul is has absolute positioning anyway), or would it be better to use the “display” attribute or something else entirely? Also, in general we’ve avoided using things like “display: none;” since it affects screen readers, but does the “visibility” attribute have that problem, or is it a non-issue since this rule only applies in IE8 and earlier and so wouldn’t affect screen readers anyway?

Thanks for your help!