Tweet
Bonjour à tous,
Je comptais rendre mon template responsive en transformant notamment mon menu (ul>li) en menu déroulant (select>option). La méthode est accessible ici : http://css-tricks.com/convert-menu-to-dropdown/
Comme le menu est créé dynamiquement par Joomla, le script suivant est nécessaire pour transformer ajouter un menu sous forme select>option identique au menu ul>li. Les css s'occupent ensuite avec la fonction media queries de n'afficher ce menu que lorsque l'affichage est inférieur à x pixels.
Cependant, pour fonctionner ce script a besoin de ça :
Ce qui empêche le composant aiContactSafe de fonctionner. Connaitriez vous une autre méthode pouvant fonctionner sans l'appel à ce dernier script ?
Je comptais rendre mon template responsive en transformant notamment mon menu (ul>li) en menu déroulant (select>option). La méthode est accessible ici : http://css-tricks.com/convert-menu-to-dropdown/
Comme le menu est créé dynamiquement par Joomla, le script suivant est nécessaire pour transformer ajouter un menu sous forme select>option identique au menu ul>li. Les css s'occupent ensuite avec la fonction media queries de n'afficher ce menu que lorsque l'affichage est inférieur à x pixels.
Code:
<script>
// DOM ready
$(function() {
// Create the dropdown base
$("<select />").appendTo("nav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Menu"
}).appendTo("nav select");
// Populate dropdown with menu items
$("nav .menu li a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
});
// To make dropdown actually work
// To make more unobtrusive: http://css-tricks.com/4064-unobtrusive-page-changer/
$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
});
</script>
Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
Commentaire