Twitter Mobile Components - Best Practices
When building a responsive website using Twitter Bootstrap, you can use some great JavaScript components like. tabs or collapse (accordion). However, the selection of a particular component is not necessarily appropriate for all devices.
In my case, on the desktop version, I am using tabs . But in the smartphone version, the tabs become unusable because once they have three or more of them, they don't fit in one line due to the small screen size. Instead, for a mobile version, it would be a nice alternative to collapse .
My question is aimed at finding out the best practice for making such a change. I can think of two workarounds, but both are pretty ugly and I'm wondering if there is a cleaner solution:
-
create one inset content with visible CSS desktop and one collapsed content with visible CSS class phone. The downside is that the actual tab content has to be delivered twice, and if it contains user generated HTML (as in my case) will result in invalid W3C code as soon as the user enters an HTML element with an ID (since this ID appears twice on the page).
-
change tab to collapse with JavaScript. This is not a satisfactory solution as a) it requires javascript execution and b) there is a lot of code that needs to be changed (see markup differences in the documentation).
source to share
My approach to this was to turn the main list menu into a dropdown for mobile phone displays. CSS-Tricks.com converts menu to dropdown menu
I based my production code from the above code and modified it a lot to act on the slider bar for large displays and the dropdown for mobile phones.
Why should you disclose your phone list? On mobile phone displays, the dropdown menu activates the phone scrolling user interface, which looks and works just like a regular phone app. Using a dropdown will also reduce the number of height commitments in your design.
When the dropdown menu is activated, the user will automatically be taken to the selected item link.
My example: Dropdown menu with auto-forwarding
$(document).ready(function() {
var sNavFirsLI2 = $(this).find("#gbl_sNav ul").children(":first-child");
sNavFirsLI2.each(function(){
console.log('Outside: '+$(this).html());
});
});var currentSnav; sNavAccordion = new Boolean(false); currentSnav = $("#gbl_sNav").html();
$("#removeAccordion").click(function() {
if(sNavAccordion == true){
var tempContents;
$('#gbl_sNav ul').show();
$('#gbl_sNav select').remove();
//set Snav back to false
sNavAccordion = false;
}else{
alert('Nothing to remove');
}
});
$("#enableAccordion").click(function() {
if(sNavAccordion == false){
$("<select />").appendTo("#gbl_sNav");
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Go to..."
}).appendTo("#gbl_sNav select");
$("#gbl_sNav a").each(function() {
var myli = $(this);
$("<option />", {
"value" : myli.attr("href"),
"text" : myli.text()
}).appendTo("#gbl_sNav select");
});
$('#gbl_sNav ul').hide();
sNavAccordion = true;
}else{
return false;
}
});
source to share