(opgelost) ul conterteren naar Select

[pasmaskas]

beste CMSMS leden,

Ik ben bezig met een responsive website en nu heb ik een script gevonden die het menu <ul> omvormt naar een <select> groep. Dit heb ik in de css geplaatst als de website onder de 639px komt. word het menu een Selectie box zal maar zeggen.

Zie hier het script:

Code: Select all

(function($) { $(function() {
	
    var $select = $('<select>')
        .appendTo('nav');

    $('li').each(function() {
        var $li    = $(this),
            $a     = $li.find('> a'),
            $p     = $li.parents('li'),
            prefix = new Array($p.length + 1).join('-');

        var $option = $('<option>')
            .text(prefix + ' ' + $a.text())
            .val($a.attr('href'))                       
            .appendTo($select);
    });
	
});})(jQuery);

Echter als ik op een link klik in het omgevormde <select> menu dan gebeurt er niets. Waarschijnlijk is er niets mis met het java script alleen ik weet niet wat.

Weet iemand welke regel er bij/af moet om het werkent te krijgen? en als ik dan ergens op druk hij wel doorgaat naar de onderlichende pagina?

Alvast bedankt

Gr Pascal.

[deactivated010521]

----------

[pasmaskas]

Bedankt Arnoud! Het werkt.

Het script ziet er dan als volgt uit:

Code: Select all

(function($) {
	$(function() {
		var $select = $('<select>').appendTo('nav');
		$('li').each(function() {
			var $li = $(this),
				$a = $li.find('> a'),
				$p = $li.parents('li'),
				prefix = new Array($p.length + 1).join('-');
			var $option = $('<option>')
				.text(prefix + ' ' + $a.text())
				.val($a.attr('href'))
				.appendTo($select);
		});
		$(function() {
			$('nav select').bind('change', function() {
				var url = $(this).val();
				if (url) {
					window.location = url;
				}
				return false;
			});
		});
	});
})(jQuery);

Is het ook mogelijk een tekst met bijvoorbeeld "Navigeer naar..." standaard er te laten staan? Aangezien hij nu elke keer terug schiet naar "Homepage" terwijl je daar niet bent.

Gr pascal

[pasmaskas]

Ik heb nu dit:

Code: Select all

(function($) {
	$(function() {
		var $select = $('<select>').appendTo('nav');
		$('li').each(function() {
			var $li = $(this),
				$a = $li.find('> a'),
				$p = $li.parents('li'),
				prefix = new Array($p.length + 1).join('-');
			var $option = $('<option>')
				.text(prefix + ' ' + $a.text())
				.val($a.attr('href'))
				.appendTo($select);
		});
		$(function() {
			$("<option>", {
				"selected": "selected",
				"value": "",
				"text": "Navigeer naar..."
			}).appendTo("nav select");
		});
		$(function() {
			$('nav select').bind('change', function() {
				var url = $(this).val();
				if (url) {
					window.location = url;
				}
				return false;
			});
		});
	});
})(jQuery);

Het werk wel en als ik een pagina bezoek schiet de tekst terug naar "Navigeer naar..." alleen de tekst komt onderaan de lijst te staan. Dit wil ik boven aan hebben kan dat? Volgens mij klopt er ook iets niet met het script zo kijtk wel 2 talen door elkaar maar het werkt wel.

[deactivated010521]

----------

[pasmaskas]

Bedankt Arnoud het werkt.

Het script is nu zo:

Code: Select all

(function($) {
	$(function() {
		var $select = $('<select>').appendTo('nav');
		$('li').each(function() {
			var $li = $(this),
				$a = $li.find('> a'),
				$p = $li.parents('li'),
				prefix = new Array($p.length + 1).join('-');
			var $option = $('<option>')
				.text(prefix + ' ' + $a.text())
				.val($a.attr('href'))
				.appendTo($select);
		});
		$(function() {
			$("<option>", {
				"selected": "selected",
				"value": "",
				"text": "Navigeer naar..."
			}).prependTo("nav select");
		});
		$(function() {
			$('nav select').bind('change', function() {
				var url = $(this).val();
				if (url) {
					window.location = url;
				}
				return false;
			});
		});
	});
})(jQuery);

"Navigeer naar..." staat nu boven aan en als je naar een pagina gaat springt hij terug naar deze tekst.

Gr Pascal